siscode/src/components/chart/radar/direction-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: "dsah-pie",
  componentName: "dsah-pie",
  props: {
    // 宽度 默认9.722vh
    width: {
      type: String,
      default: "100%",
    },
    // 高度 默认9.722vh
    height: {
      type: String,
      default: "7.4074vh",
    },
    // 标题
    title: {
      type: String,
      default: "标题",
    },
    // 值
    value: {
      type: Number,
      default: 90,
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      indicator: [
        {
          name: "北",
          max: 100,
        },
        {
          name: "北北西",
          max: 100,
        },
        {
          name: "北西",
          max: 100,
        },
        {
          name: "西北西",
          max: 100,
        },
        {
          name: "西",
          max: 100,
        },
        {
          name: "西南西",
          max: 100,
        },
        {
          name: "南西",
          max: 100,
        },
        {
          name: "南南西",
          max: 100,
        },
        {
          name: "南",
          max: 100,
        },
        {
          name: "南南东",
          max: 100,
        },
        {
          name: "东南",
          max: 100,
        },
        {
          name: "东南东",
          max: 100,
        },
        {
          name: "东",
          max: 100,
        },
        {
          name: "东北东",
          max: 100,
        },
        {
          name: "北东",
          max: 100,
        },
        {
          name: "北北东",
          max: 100,
        },
      ],
    };
  },
  computed: {},
  methods: {
    initChart() {
      let option = {
        grid: {
          left: 40,
          right: 40,
          bottom: "40%",
          top: "40%",
          containLabel: false,
        },
        radar: [
          // 最低层 80
          {
            radius: "70%",
            center: ["50%", "50%"],
            splitNumber: 1,
            nameGap: "10",
            name: {
              textStyle: {
                color: partten.getColor("gray") + 99,
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: partten.getColor("gray") + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: partten.getColor("gray") + 40,
              },
            },
            splitArea: {
              areaStyle: {
                color: "transparent",
              },
            },
            indicator: this.indicator,
          },
          // 次外层 70 - 80
          {
            radius: ["60%", "70%"],
            center: ["50%", "50%"],
            startAngle: 90,
            splitNumber: 2,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: partten.getColor("gray") + 40,
                shadowBlur: 1,
                shadowColor: "#fff",
                shadowOffsetX: 0.5,
                shadowOffsetY: 1,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: partten.getColor("gray") + 40,
                shadowColor: "#fff",
                shadowBlur: 0,
                shadowOffsetX: 0.5,
                shadowOffsetY: 0.5,
              },
            },
            splitArea: {
              areaStyle: {
                color: "transparent",
              },
            },
            indicator: this.indicator,
          },
          // 渐变层 40 - 70
          {
            radius: ["30%", "60%"],
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: partten.getColor("gray") + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: partten.getColor("gray"),
              },
            },
            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") : partten.getColor("deepblue") + 60, // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            indicator: this.indicator,
          },
          // 内层 0 - 40
          {
            radius: "30%",
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: partten.getColor("gray") + 40,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: partten.getColor("gray"),
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: "transparent",
              },
            },
            indicator: this.indicator,
          },
        ],
        series: [
          // 进度条
          {
            z: 1,
            name: "内部（环形）进度条",
            type: "gauge",
            radius: "70%",
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                color: [
                  [
                    this.value / 360,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: this.$store.state.themeName === "dark" ? partten.getColor(this.color) + 10 : partten.getColor("deepblue") + 10,
                      },
                      {
                        offset: 1,
                        color: this.$store.state.themeName === "dark" ? partten.getColor(this.color) + 99 : partten.getColor("deepblue") + 99,
                      },
                    ]),
                  ],
                  [1, "transparent"],
                ],
                width: 40,
              },
            },
            startAngle: 90,
            endAngle: 450,
            clockwise: true,
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          // 指针
          {
            name: "指针",
            type: "gauge",
            z: 2,
            min: 0,
            max: 360,
            radius: "100%",
            startAngle: 90,
            endAngle: 360 + 90,
            clockwise: false,
            axisLine: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            title: {
              //标题
              show: false,
            },
            data: [
              {
                value: this.value,
              },
            ],
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
            pointer: {
              show: true,
              length: "70%",
              radius: "0%",
              width: util.vh(3), //指针粗细
              offsetCenter: ["0%", "0%"],
            },
            animationDuration: 1000,
          },
        ],
      };

      this.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.chart = echarts.init(this.$el);
      this.initChart();
    });
  },
  updated() {
    this.initChart();
  },
  watch: {
    "$store.state.themeName"() {
      this.initChart();
    },
  },
};
</script>

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