echarts 点击事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts 点击事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

饼图点击事件

饼图点击事件会触发两次

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图标消失解决文章来源地址https://www.toymoban.com/news/detail-675565.html

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

到了这里，关于echarts 点击事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！