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

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 }); } }); },