在echarts中,如何使用复选框代替legend控制显隐?

昨日开发工作中有一项,需使用复选框控制echarts的显隐,找了很多方法,无效,如:

this.myChart.dispatchAction({

    type:'legendToggleSelect', // 切换按钮

    name:'233'

})

再如:

this.myChart.dispatchAction({

    type:'legendselected', // 渲染选中的按钮

    name:'233'

})

再如:

this.myChart.dispatchAction({

    type:'legendunselected', // 取消选中后的事件

    name:'233'

})

最后终于找到一个方法,那就是:

// 使用刚指定的选择项数据显示图表。
        const selectArr = myChart.getOption().legend[0].data;//legend所有值
        const checkboxs=document.getElementsByName('checkboxchart')
        $(".checkboxchart").click(function(){
            const obj = {};
            for(var i=0; i<checkboxs.length; i++){
                if(checkboxs[i].checked){
                    obj[selectArr[i]] = true;
                }else{
                    obj[selectArr[i]] = false;
                }
            } 
            this.option.legend.selected = obj;
            this.myChart.setOption(this.option);
        });

思想是:

拿到所有legend的值,拿到所有选中的复选框的值,创建一个对象,选中的值设为true,否则设为false,将对象赋值给this.option.legend.selected,重新渲染Echarts组件。

原文地址:https://www.cnblogs.com/jiaxiaonuo/p/12742708.html