echarts给饼图添加点击事件_echarts饼图点击事件

vue使用echarts,给饼图添加点击事件

var valueData = [
      {value: 33,name: '诊所'},
    {value: 29,name: '汽车服务相关'},
    {value: 27, name: '洗衣店'},
    {value: 26,name: '中介机构'},
    {value: 22,name: '汽车维修'}
];
var nameData = ['诊所', '汽车服务相关', '洗衣店', '中介机构', '汽车维修'];
var colorData = ['#A769EB', '#f69846', '#f6d54a', '#45dbf7', '#5AF6DE', '#89F6DC'];

let Option2 = {
    backgroundColor: 'rgba(0,0,0,0)',
    tooltip: {
        trigger: 'item',
        formatter: "{b} : {d}% <br/> {c}"
    },
    legend: {
        // orient: 'vertical',
        icon: 'circle',
        bottom: 20,
        x: 'center',
        y: 'top',
        data: nameData,
        textStyle: {
            color: '#fff'
        }
        //data: ['诊所', '汽车服务相关', '洗衣店', '中介机构', '汽车维修', '火车站', '人流指数', '日式简餐/快餐', 'ATM', '超市']
    },
    series: [{
        type: 'pie',
        // radius: ['20%', '40%'],
        center: ['50%', '50%'],
        left:70,
        right:70,
        color: colorData,
        data: valueData,
        labelLine: {
            normal: {
                show: true,
                length: 20,
                length2: 20,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            }
        },
        label: {
            normal: {
                formatter: '{c|{b}}\n{a|{d}}'+ '%',
                rich: {
                    b: {
                        fontSize: 12,
                        color: '#12EABE',
                        align: 'left',
                        padding: 4
                    },
                    d: {
                        
                        fontSize: 12,
                        align: 'left',
                        padding: 2
                    },
                    c: {
                        color: '#fff',
                        fontSize: 12,
                        align: 'left',
                        padding: 2
                    }
                }
            }
        }
    }]
}
var dom1 = document.getElementById("Box2");
var myChart1 = echarts.init(dom1);
let number = 0 //声明一个变量稍后接扇区的dataIndex 
myChart1.on('click', function(param) { //添加点击事件
    console.log(param );
    myChart1.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
    if (param.dataIndex !== number) { // 当鼠标点击的时候 消除上一个扇区的高亮
        myChart1.dispatchAction({ type: 'downplay', dataIndex: number });
    }
    number = param.dataIndex //接住当前扇区的dataIndex
});
myChart1.setOption(Option2)
myChart1.dispatchAction({ type: 'highlight', dataIndex: 0 }); // 生成是默认第一条数据高亮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

饼图中间添加图片