zoukankan      html  css  js  c++  java
  • 在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组件。

  • 相关阅读:
    知识点
    Python基础 (下)
    Python基础 (上)
    RESTful和SOAP的区别
    Maven
    centos7下配置的php命令
    centos7下的nginx命令配置
    CentOS 7.4下使用yum安装MySQL5.7.20 最简单的
    word下载
    phpExcel导出表格
  • 原文地址:https://www.cnblogs.com/jiaxiaonuo/p/12742708.html
Copyright © 2011-2022 走看看