echarts点击事件循环N次问题

最新推荐文章于 2024-12-13 18:25:19 发布

原创最新推荐文章于 2024-12-13 18:25:19 发布 · 894 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

前端专栏收录该内容

10 篇文章

订阅专栏

博客主要讲述了给echarts饼图添加点击事件时出现卡死的问题。经浏览器断点发现是echarts的一个bug，导致进入循环N次。作者还表示会给出解决代码，重点在标明的1.2.3.4处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts点击事件卡死（循环N次）问题

给echarts 的饼图做了一个点击事件，结果发现每点一次就会卡死，刚开始以为是代码写的有问题，进了浏览器断点发现echarts的一个bug，真的是bug啊，进入循环了N次，难怪卡死了，直接上解决代码

重点就在最后标明的1.2.3.4那了

    //初始化echart实例
    charts = echarts.init(document.getElementById("echarts"));
    //显示加载动画效果
    charts.showLoading({
        text: '稍等片刻,精彩马上呈现...',
        effect:'whirling'
    });
    option = {
        tooltip:{
            trigger: 'item'
        },
        toolbox:{
            feature:{
                saveAsImage:{}//保存为图片
            },
            right:'2%'
        },
        series:[{
            name:'案例',
            type:'pie',
            radius : ['55%', '70%'],
            color:['#FFB90F','#7cbc16','#818181'],
            data:[
                {value:12, name:'demo1'},
                {value:23, name:'demo2'},
                {value:32, name:'demo3'}
            ],
            itemStyle : {
                normal: {
                    label : {
                        //标示线文字修改
                        formatter: function(param){
                            return param.name+"："+param.value+"%";
                        }
                    }
                }
            }
        }]
    }
    // 1、清除画布
    charts.clear()
    // 2、为echarts对象加载数据
    charts.setOption(option);
    ///3、在渲染点击事件之前先清除点击事件
    charts.off('click');
    //隐藏动画加载效果
    charts.hideLoading();
    // 4、echarts 点击事件
    charts.on('click', function (param) {
        alert("点击了！");
    });