echarts3标题点击取消显示时保留一项显示

来源：互联网发布：linux 查看网络通不通编辑：程序博客网时间：2024/06/06 13:15
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="echarts.min.js" type="text/javascript"></script>    <script src="jquery.js" type="text/javascript"></script></head><body><div id="edmid" style="width: 600px;height:400px;"></div><script type="text/javascript">    var myChart = echarts.init(document.getElementById('edmid'));    var option = {        title: {            text: '堆叠区域图'        },        tooltip : {            trigger: 'axis',            axisPointer: {                type: 'cross',                label: {                    backgroundColor: '#6a7985'                }            }        },        legend: {            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],            selected:{                '邮件营销':true,                '联盟广告':true,                '视频广告':true,                '视频广告':true,                '直接访问':true,                '搜索引擎':true            }        },        toolbox: {            feature: {                saveAsImage: {}            }        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        xAxis : [            {                type : 'category',                boundaryGap : false,                data : ['周一','周二','周三','周四','周五','周六','周日']            }        ],        yAxis : [            {                type : 'value'            }        ],        series : [            {                name:'邮件营销',                type:'line',                stack: '总量',                areaStyle: {normal: {}},                data:[120, 132, 101, 134, 90, 230, 210]            },            {                name:'联盟广告',                type:'line',                stack: '总量',                areaStyle: {normal: {}},                data:[220, 182, 191, 234, 290, 330, 310]            },            {                name:'视频广告',                type:'line',                stack: '总量',                areaStyle: {normal: {}},                data:[150, 232, 201, 154, 190, 330, 410]            },            {                name:'直接访问',                type:'line',                stack: '总量',                areaStyle: {normal: {}},                data:[320, 332, 301, 334, 390, 330, 320]            },            {                name:'搜索引擎',                type:'line',                stack: '总量',                label: {                    normal: {                        show: true,                        position: 'top'                    }                },                areaStyle: {normal: {}},                data:[820, 932, 901, 934, 1290, 1330, 1320]            }        ]    };    myChart.setOption(option);//方法一：//    myChart.on('legendselectchanged', function (param) {//var ckname =param.name;//选中的标题名称//var enblenum =0;//取消显示的数量//var countnum =0;//总标题数量//        $.each(param.selected,function(k,v){//var curflag = option.legend.selected[k];//选中前的状态//var nowflag =(!curflag);//选中后的状态////if(false == v ){//enblenum++;//}//countnum++;//if(ckname == k){//如果leg列表中遍历到的选项和选中的一样，需要把选中状态反选下//option.legend.selected[k]= nowflag;//}////        })////遍历 判断选中项是否为最后一个，如果最后一个则不会被取消掉//$.each(param.selected,function(z,q){// if((enblenum == countnum) &&(ckname == z)){//option.legend.selected[z]= true;// }// })//// myChart.setOption(option);//    });//方法二：  myChart.on("legendselectchanged", function(param){      if(!(param.selected['邮件营销'] || param.selected['联盟广告'] || param.selected['视频广告'] || param.selected['直接访问'] || param.selected['搜索引擎'])){        myChart.dispatchAction({          type: 'legendToggleSelect',          name: param.name        })      }    })</script></body></html>
阅读全文
0 0