fd_dwgz_zhyw/src/components/chart/radar/radar-chart.vue

<template>
  <div class="chart" :id="id"></div>
</template>

<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";

export default {
  name: "radar-chart",
  componentName: "radar-chart",
  props: {
    // 宽度 默认9.722vh
    width: {
      type: String,
      default: "100%",
    },
    // 高度 默认9.722vh
    height: {
      type: String,
      default: "7.4074vh",
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 值
    value: {
      type: Object,
      default: () => {
        return {
          indicator: [
            "北(0.0/0.0)",
            "北北西(0.0/0.0)",
            "北西(0.0/0.0)",
            "西北西(0.0/0.0)",
            "西(0.0/0.0)",
            "西南西(0.0/0.0)",
            "南西(0.0/0.0)",
            "南南西(0.0/0.0)",
            "南(0.0/0.0)",
            "南南东(0.0/0.0)",
            "东南(0.0/0.0)",
            "东南东(0.0/0.0)",
            "东(0.0/0.0)",
            "东北东(0.0/0.0)",
            "北东(0.0/0.0)",
            "北北东(0.0/0.0)",
          ],
          data: [
            {
              value: [
                44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
                35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000,
                20000, 35000, 50000, 38000,
              ],
              name: "NAME",
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      lineStyles: [],
      green: {
        areaStyle: {
          color: "rgba(165,228,175, 0.9)",
        },
        lineStyle: {
          color: "rgba(255,255,255, 0.85)",
        },
        itemStyle: {
          color: "rgba(165,228,175, 0.5)",
          borderColor: "rgba(255,255,255, 0.5)",
          borderWidth: 0.5,
        },
      },
      blue: {
        areaStyle: {
          color: "rgba(75,85,174, 0.9)",
        },
        lineStyle: {
          color: "rgba(255,255,255, 0.85)",
        },
        itemStyle: {
          color: "rgba(75,85,174, 0.9)",
          borderColor: "rgba(255,255,255, 0.5)",
          borderWidth: 0.5,
        },
      },
    };
  },
  computed: {},
  methods: {
    initChart() {
      let themeName = "";
      let theme = this.$store.state.themeName;
      if (theme == "dark" || theme == "light") {
        themeName = theme;
      } else {
        themeName = theme.split(" ")[1];
      }
      let chart = echarts.init(this.$el);

      let maxValue = -1;
      if (themeName === "dark") {
        this.lineStyles = [this.green, this.blue];
      } else {
        this.lineStyles = [this.blue, this.green];
      }
      if (this.value.data)
        this.value.data.forEach((item, index) => {
          item.value.forEach((value) => {
            if (value > maxValue) {
              maxValue = value;
            }
          });
          item.areaStyle =
            this.lineStyles[index % this.lineStyles.length].areaStyle;
          item.lineStyle =
            this.lineStyles[index % this.lineStyles.length].lineStyle;
          item.itemStyle =
            this.lineStyles[index % this.lineStyles.length].itemStyle;
        });
      maxValue *= 1.5;

      let indicator = [];
      if (this.value.indicator)
        this.value.indicator.forEach((item) => {
          indicator.push({ name: item, max: maxValue });
        });

      let baseSize = 65;

      let option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
        },
        tooltip: {
          trigger: "item",
          backgroundColor:
            this.$store.state.themeName === "dark"
              ? "rgba(0,0,0,0.4)"
              : "rgba(255,255,255,0.5)",
          borderColor:
            this.$store.state.themeName === "dark"
              ? partten.getColor("gray")
              : "#000",
          textStyle: {
            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
            fontSize: util.vh(16),
          },
          position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = { top: 60 };
            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
          },
          extraCssText: "position: absolute; margin-top:-20%;",
          // extraCssText: "max-width:140px;position:sticky;top:0;left:0"
        },
        radar: [
          // 最低层 90
          {
            radius: baseSize + "%",
            center: ["50%", "50%"],
            splitNumber: 1,
            nameGap: "4",
            name: {
              textStyle: {
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray")
                    : "#000",
                fontSize: 12,
                padding: [0, 16],
              },
            },
            axisLine: {
              lineStyle: {
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
              },
            },
            splitArea: {
              areaStyle: {
                color: "transparent",
              },
            },
            indicator: indicator,
          },
          // 次外层 80 - 90
          {
            radius: ["55%", "65%"],
            center: ["50%", "50%"],
            startAngle: 90,
            splitNumber: 2,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
                shadowBlur: 1,
                shadowColor: "#fff",
                shadowOffsetX: 0.5,
                shadowOffsetY: 1,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
                shadowColor: "#fff",
                shadowBlur: 0,
                shadowOffsetX: 0.5,
                shadowOffsetY: 0.5,
              },
            },
            splitArea: {
              areaStyle: {
                color: "transparent",
              },
            },
            indicator: indicator,
          },
          // 渐变层 40 - 80
          {
            radius: ["30%", "55%"],
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray")
                    : "#000",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: "transparent", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color:
                        this.$store.state.themeName === "dark"
                          ? partten.getColor("green") + 60
                          : partten.getColor("deepblue") + 60, // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            indicator: indicator,
          },
          // 渐变层 0 - 40
          {
            radius: ["0%", "30%"],
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray")
                    : "#000",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: "transparent", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color:
                        this.$store.state.themeName === "dark"
                          ? partten.getColor("green") + 60
                          : partten.getColor("deepblue") + 60, // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            indicator: indicator,
          },
          // 内层 0 - 50
          {
            radius: "50%",
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray")
                    : "#000",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: "transparent",
              },
            },
            indicator: indicator,
          },
          // 内层 0 - 45
          {
            radius: "35%",
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray") + 40
                    : "#000" + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color:
                  this.$store.state.themeName === "dark"
                    ? partten.getColor("gray")
                    : "#000",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: "transparent",
              },
            },
            indicator: indicator,
          },
        ],
        series: [
          {
            name: this.title,
            type: "radar",
            data: this.value.data,
          },
        ],
      };
      console.log(option);
      chart.setOption(option);
    },
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.style.width = this.width;
      this.$el.style.height = this.height;
      this.initChart();
    });
  },
  updated() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    "$store.state.themeName"() {
      this.initChart();
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
  position: relative;
}
</style>