fd_dwgz_zhyw_nx/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: "标题",
    },
    // 值
    series: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      Data: [],
      label: [],
      indicator: [
        {
          name: "N",
          max: 100,
        },
        {
          name: "NNE",
          max: 100,
        },
        {
          name: "NE",
          max: 100,
        },
        {
          name: "ENE",
          max: 100,
        },
        {
          name: "E",
          max: 100,
        },
        {
          name: "ESE",
          max: 100,
        },
        {
          name: "SE",
          max: 100,
        },
        {
          name: "SSE",
          max: 100,
        },
        {
          name: "S",
          max: 100,
        },
        {
          name: "SSW",
          max: 100,
        },
        {
          name: "SW",
          max: 100,
        },
        {
          name: "WSW",
          max: 100,
        },
        {
          name: "W",
          max: 100,
        },
        {
          name: "WNW",
          max: 100,
        },
        {
          name: "NW",
          max: 100,
        },
        {
          name: "NNW",
          max: 100,
        },
      ],
    };
  },

  methods: {
    initChart() {
      console.log(this.series);
      let nameList =
        this.series.name && this.series.name.length ? this.series.name : [];
      let option = {
        grid: {
          left: 40,
          right: 40,
          bottom: "40%",
          top: "40%",
          containLabel: false,
        },
        legend: {
          show: false,
        },
        polar: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        angleAxis: {
          type: "value",
          startAngle: 90,
          min: 0, //最小刻度
          max: 360, //最大刻度
          interval: 360 / nameList.length, //间隔刻度 16方位间隔22.5，可改8方位
          axisLabel: {
            show: false,
            // formatter: function (value, index) {
            //   return nameList.reverse()[index] || "";
            // },
          },
        },
        radiusAxis: {},
        // series: [
        //   {
        //     // coordinateSystem: "polar",
        //     name: "line",
        //     type: "radar",
        //     data: this.series.data
        //       ? [{ name: "a", value: this.series.data.map((i) => i[0]) }]
        //       : [],
        //     areaStyle: {
        //       color: "rgba(227, 127, 127, 1)",
        //     },
        //   },
        // ],
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            itemStyle: {
              //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
              color: "#087636",
              borderColor: "#087636",
            },
            areaStyle: {
              color: "#087636",
            },
            data: [
              {
                value: this.series.data
                  ? this.series.data.map((i) => i[0])
                  : "",
                name: "风向频率",
              },
            ],
          },
        ],
        radar: [
          {
            indicator: this.indicator,
            center: ["50%", "50%"],
            radius: "70%",
            splitLine: {
              //配置雷达图的每一圈的网格线颜色
              lineStyle: {
                color: "#262732",
              },
            },
            splitArea: {
              //配置雷达图的网格线背景
              show: false,
            },
            name: {
              //配置雷达图的每个指示器的名称颜色
              textStyle: {
                color: "#838D9E",
              },
            },
            axisLine: {
              //配置雷达图的射线样式颜色
              lineStyle: {
                color: "#262732",
              },
            },
          },
        ],
        // 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.data
        //             ? this.value.data.map((item) => {
        //                 return [
        //                   item.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,
        //                     },
        //                   ]),
        //                 ];
        //               })
        //             : [
        //                 0,
        //                 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: this.value.data,
        //     itemStyle: {
        //       normal: {
        //         color: "#fff",
        //       },
        //     },
        //     pointer: {
        //       show: true,
        //       length: "70%",
        //       radius: "0%",
        //       width: util.vh(3), //指针粗细
        //       offsetCenter: ["0%", "0%"],
        //     },
        //     animationDuration: 1000,
        //   },
        // ],
      };
      console.log(option);
      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>