在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组件。