echarts使用复选框样式legend控制显隐

echarts使用复选框样式legend控制显隐

开发中遇到了一个问题，在展示的曲线，也就是legend很多的时候，想用复选框选择只展示其中几条（如下图）。配置中是可以默认设置初始化是否展示，但不适用于客户选择的场景。

研究了文档后发现，可以通过修改配置，然后再次调用setOption方法实现。

我的做法是添加一组checkbox，点击按钮的时候，触发事件重新画图。代码不复杂，贴在下面。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js--><script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.common.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="邮件营销"/>邮件营销<input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="联盟广告"/>联盟广告<input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="视频广告"/>视频广告<input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="直接访问"/>直接访问<input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="搜索引擎"/>搜索引擎<div id="main" style="width: 800px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {tooltip : {trigger: 'axis'},grid:{//边框//x:100,x2:100//y:50//height:350}, legend: {data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],orient: 'vertical',right: 0,top: 100,bottom: 20//selected:{'邮件营销':true,'联盟广告':false,'视频广告':true,'直接访问':true,'搜索引擎':true}},calculable : true,xAxis : [{type : 'category',boundaryGap : false,data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value'}],series : [{name:'邮件营销',type:'line',stack: '总量',data:[120, 132, 101, 134, 90, 230, 210],selected:false},{name:'联盟广告',type:'line',stack: '总量',data:[220, 182, 191, 234, 290, 330, 310]},{name:'视频广告',type:'line',stack: '总量',data:[150, 232, 201, 154, 190, 330, 410]},{name:'直接访问',type:'line',stack: '总量',data:[320, 332, 301, 334, 390, 330, 320]},{name:'搜索引擎',type:'line',stack: '总量',data:[820, 932, 901, 934, 1290, 1330, 1320]}]};myChart.setOption(option);// 使用刚指定的选择项数据显示图表。var selectArr = myChart.getOption().legend[0].data;//legend所有值var checkboxs=document.getElementsByName('checkboxchart'); $(".checkboxchart").click(function(){var obj = {};for(var i=0; i<checkboxs.length; i++){if(checkboxs[i].checked){obj[selectArr[i]] = true;}else{obj[selectArr[i]] = false;}} option.legend.selected = obj;myChart.setOption(option);});</script>
</body>
</html>

echarts使用复选框样式legend控制显隐相关推荐

html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
css复选框样式_使用CSS样式复选框
css复选框样式 Introduction: 介绍: Sometimes we want to develop a website or web page that would contain a f ...
自定义复选框,复选框样式修改,重写复选框
查了好多资料复选框写的磨磨叽叽的一大堆废话! 我来教大家写一个原生jq的复选框样式,简单实用,又不会耽误checkbox的调用. html: <label class="checkli ...
修改微信小程序单选，复选框样式
xml <label class="checkbox"><checkbox checked="checked" disabled />获 ...
自学篇之-----纯css做的漂亮的单选框复选框样式
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <title>ch ...
在reader中勾选pdf复选框_轻松控制PDF文件的打开方式
经常在网上下载资料的朋友们一定都有过这样的烦恼,现在不少资料在网上都是以PDF格式提供下载的,所以在安装有Adobe PDF Reader的电脑上,我们的IE总会"自作主张"地在它 ...
ajax动态拼接复选框样式,JavaScript 通过Ajax 动态加载CheckBox复选框
废话不多说了,直接给大家贴代码了,具体代码如下所示: //动态加载年份checkbox by dongch 20170830 function GetCompareYearByStationName( ...
html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...

echarts使用复选框样式legend控制显隐

echarts使用复选框样式legend控制显隐相关推荐

最新文章

热门文章