echarts重写图例点击事件图例过滤并显示对应图例的折线

最新推荐文章于 2024-07-30 00:26:52 发布

潇蓝诺依

最新推荐文章于 2024-07-30 00:26:52 发布

阅读量3.4k

点赞数 1

分类专栏： vue echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_31126175/article/details/88421882

版权

vue 同时被 2 个专栏收录

41 篇文章 9 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

图例过滤并显示对应图例的折线

问题：但是现在如果只点击在log、data中切换,没有问题。一旦切换到all,显示全部数据,在切换到log、data时,图例正确,折线一直是所有折线
问题如下图
在这里插入图片描述
解决方法:
在画布实例化之前,清空数据

myChart.clear();//清空ECharts
myChart.setOption(option);

可以自己测下有无myChart.clear();的区别

git 在线地址

重写图例点击事件

点击一次，显示一条线；再次点击，显示所有

      function click({name: legend, selected}) {
        let isBegin = true;
        //判断是否是第一次点击
        //name = legend时, 当是true时,不是第一次
        //name!=legend, 有false,不是第一次
        for (let name in selected) {
            if (selected.hasOwnProperty(name)) {
                if (name === legend) {
                    if (selected[name] === true) {
                        isBegin = false;
                    }
                } else {
                    if (selected[name] === false) {
                        isBegin = false;
                    }
                }
            }
        }
        //是第一次的时候, name = legend时,选中;其他不选中
        //不是第一次,当selectd[legend] = true;说明他之前是false,不选中状态. 点击它是要选中它,所以name = legend时,选中;其他不选中;
        //............................= false;说明他之前是true,选中状态. 点击它是要选中全部,所以全部选中.
        if (isBegin) {
            for (let name in selected) {
                if (selected.hasOwnProperty(name)) {
                    if (name === legend) {
                        myChart.dispatchAction({type: 'legendSelect', name});
                    } else {
                        myChart.dispatchAction({type: 'legendUnSelect', name});
                    }
                }
            }
        } else {
            if (selected[legend]) {
                for (let name in selected) {
                    if (selected.hasOwnProperty(name)) {
                        if (name === legend) {
                            myChart.dispatchAction({type: 'legendSelect', legend});
                        } else {
                            myChart.dispatchAction({type: 'legendUnSelect', name});
                        }
                    }
                }
            } else {
                for (let name in selected) {
                    if (selected.hasOwnProperty(name)) {
                        myChart.dispatchAction({type: 'legendSelect', name});
                    }
                }
            }
        }
    }
    myChart.on("legendselectchanged", click);