echats点击旋转并切换高亮效果

Posted 2020-11-24 sinceforever

echats点击旋转并切换高亮效果

• 本方法前面是点击旋转，原理是每次点击是重新渲染图表，计算图标旋转角度，达到切换旋转效果，
• 本方法后面是点击切换图标时该扇形显示高亮效果

onChartClick(param) {
      //切换图标时计算角度
      let dataIndex = param.dataIndex;
      let angle = 0;
      //计算起始扇形角度
      if (dataIndex == 0) {
        this.radarOptionConfig.series[0].startAngle = this.percentArrary[0] / 2;
        // this.onChartDispatch = { type: "downplay" };
      } else {
        for (let i = 0; i <= dataIndex; i++) {
          angle += this.percentArrary[i];
        }
        let moreAngle = angle - this.percentArrary[dataIndex] / 2;
        this.radarOptionConfig.series[0].startAngle = moreAngle;
        // console.log(dataIndex);
      }
      //点击切换表格数据
      this.tableData = this.newVIPdataArr[dataIndex];
      this.navTitle = this.tableData.name;//图标对应数据显示在表格中
      this.triangle = "triangle" + (dataIndex % 5); //图标上三角形指示器切换颜色

      //点击控制高亮
      let obj =
        (this.radarOptionConfig &&
          this.radarOptionConfig.series &&
          this.radarOptionConfig.series[0] &&
          this.radarOptionConfig.series[0].data) ||
        [];

      const chart = this.$refs["chartContainer"].chart;

      obj.forEach((_, i) => {
        console.log(i, dataIndex);

        if (i === dataIndex) {
          chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex
          });
          this.clickdataindex = i;
        } else {
          chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: i
          });
        }
      });
    },