echarts 点击事件

饼图点击事件

1. 饼图点击事件会触发两次

myChart.off('click’)    // 取消之前的点击事件
//添加点击事件
myChart.on('click',(a,b)=>{
    console.log(a)
})
 
/**
 * 点击事件
 */
myChart2.on('click', function (param) {
    var index = param.dataIndex;
    alert(index);
});复制

2. 可以通过点击事件 查询当前饼图是裂开还是合上的状态

a.event.target.parent._children是饼图的对象数组

数组中selected为true代表当前为选中状态，反之未选中

3. 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 />'
},复制