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 }); // 生成是默认第一条数据高亮

饼图中间添加图片