首页 前端知识 echarts 点击事件

echarts 点击事件

2024-03-07 08:03:41 前端知识 前端哥 309 892 我要收藏

饼图点击事件

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

myChart.off('click’)    // 取消之前的点击事件
//添加点击事件
myChart.on('click',(a,b)=>{
    console.log(a)
})

/**
 * 点击事件
 */
myChart2.on('click', function (param) {
    var index = param.dataIndex;
    alert(index);
});

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

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

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

  1. 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 />'
},

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3408.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!