饼图点击事件
饼图点击事件会触发两次
myChart.off('click’) // 取消之前的点击事件
//添加点击事件
myChart.on('click',(a,b)=>{
console.log(a)
})
/**
* 点击事件
*/
myChart2.on('click', function (param) {
var index = param.dataIndex;
alert(index);
});
可以通过点击事件 查询当前饼图是裂开还是合上的状态
a.event.target.parent._children是饼图的对象数组
数组中selected为true代表当前为选中状态,反之未选中
echarts的legend事件禁用以及legend显示百分比
legend: {
orient: "vertical",
left: 'center',
top:'73%',
selectedMode: false, //legend事件禁用
// legend显示百分比
formatter: (name)=> {
var total = 0
var tarValue
for(let i of this.topStreetArr) {
total += i.value
if (i.name === name) {
tarValue = i.value
}
}
if(tarValue){
var rate = ((tarValue / total) * 100).toFixed(0)
return name + " " + " " + rate + "%"
}else{
return name+ " "
}
},
},
自定义fomatter图标消失解决
tooltip: {//此为提示配置项
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter:'{b}<br />\
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#7ace4c"></span>\
{a0}:{c0}%<br />\
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ffbb44"></span>\
{a1}:{c1}%<br />\
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#11a0f8"></span>\
{a2}:{c2}%<br />'
},