echats点击旋转并切换高亮效果
- 本方法前面是点击旋转，原理是每次点击是重新渲染图表，计算图标旋转角度，达到切换旋转效果，
- 本方法后面是点击切换图标时该扇形显示高亮效果
1 onChartClick(param) {
2 //切换图标时计算角度
3 let dataIndex = param.dataIndex;
4 let angle = 0;
5 //计算起始扇形角度
6 if (dataIndex == 0) {
7 this.radarOptionConfig.series[0].startAngle = this.percentArrary[0] / 2;
8 // this.onChartDispatch = { type: "downplay" };
9 } else {
10 for (let i = 0; i <= dataIndex; i++) {
11 angle += this.percentArrary[i];
12 }
13 let moreAngle = angle - this.percentArrary[dataIndex] / 2;
14 this.radarOptionConfig.series[0].startAngle = moreAngle;
15 // console.log(dataIndex);
16 }
17 //点击切换表格数据
18 this.tableData = this.newVIPdataArr[dataIndex];
19 this.navTitle = this.tableData.name;//图标对应数据显示在表格中
20 this.triangle = "triangle" + (dataIndex % 5); //图标上三角形指示器切换颜色
21
22 //点击控制高亮
23 let obj =
24 (this.radarOptionConfig &&
25 this.radarOptionConfig.series &&
26 this.radarOptionConfig.series[0] &&
27 this.radarOptionConfig.series[0].data) ||
28 [];
29
30 const chart = this.$refs["chartContainer"].chart;
31
32 obj.forEach((_, i) => {
33 console.log(i, dataIndex);
34
35 if (i === dataIndex) {
36 chart.dispatchAction({
37 type: "highlight",
38 seriesIndex: 0,
39 dataIndex
40 });
41 this.clickdataindex = i;
42 } else {
43 chart.dispatchAction({
44 type: "downplay",
45 seriesIndex: 0,
46 dataIndex: i
47 });
48 }
49 });
50 },
