[JavaScript知识库]echart 雷达图2

initCharts(valueData, indicator) {
      let ex = echarts.getInstanceByDom(this.$refs.chart)
      if (ex) {
        echarts.dispose(ex)
      }
      this.myChart = echarts.init(this.$refs.chart);
      let option = {
        tooltip: {
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          // confine: true,
          // enterable: true, //鼠标是否可以移动到tooltip区域内
          // borderColor: '#dedede',
          show: false
        },
        radar: {
          splitNumber: 3, // 雷达图圈数设置
          radius: "50%",
          name: {
            textStyle: {
              fontSize: 12,
              color: '#584741',
              fontFamily: 'PingFangSC-Regular, PingFang SC'
            },
          },
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: 'rgba(131,141,158,.1)',
            },
          },
          indicator: indicator,
          //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
          splitArea: {
            areaStyle: {
              color: ['#FDF4E8', '#F5F5F5'],
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: 'hsla(16, 16%, 82%, 1)', // 设置网格的颜色
            },
          },
        },
        series: [
          {
            //name: "雷达图", // tooltip中的标题
            type: 'radar', //表示是雷达图
            symbol: 'circle', // 拐点的样式，还可以取值'rect','angle,circle'等
            symbolSize: 8, // 拐点的大小

            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2,
                color: '#C54242'
              },
            },
            itemStyle: {
              normal: {
                  color: "#FFED7E",
                  borderColor: '#C54242',
                  borderWidth: 1,
                  lineStyle: {
                    color: '#C54242',
                  },
              }
            }, 
            data: [
              {
                value: valueData,
                name: this.rateTime,
                // 设置区域边框和区域的颜色
                // itemStyle: {
                //   normal: {
                //     color: '#C54242',
                //     lineStyle: {
                //       color: 'rgba(255,225,0,.3)',
                //     },
                //   },
                // },
                //在拐点处显示数值
                label: {
                  normal: {
                    show: false,
                    formatter: (params) => {
                      return params.value;
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      window.onresize = function () {
        this.myChart.resize();
      };
      this.myChart.setOption(option);
    },

beforeDestroy () {
    let ex = echarts.getInstanceByDom(this.$refs.chart)
    if (ex) {
      echarts.dispose(ex)
    }
    this.myChart = null
  },