echarts图使用tab和下拉切换

方法一：用tab建切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="jquery-1.12.4.min.js"></script><script type="text/javascript" src="echarts.js"></script><style>.btns input{width:100px;height: 40px;background-color: #ddd;border: 0;}.btns .current{background-color: gold;}.cons .active{display: block;}.tab1{width: 500px;height: 300px;}.none {display: none;}</style><script>$(function () {var $btn = $('.btns input');var $div = $('.cons div');$btn.click(function () {$(this).addClass('current').siblings().removeClass('current');$('.cons .item').eq($(this).index()).addClass('active').siblings('.item').removeClass('active');})})</script>
</head>
<body><div class="btns"><input type="button" name="" value="01" class="current"><input type="button" name="" value="02"><input type="button" name="" value="03"></div><div class="cons"><div  class="clearfloat item none active"><div id="tab1" class="tab1"></div></div><div class="clearfloat item none"><div id="tab2" class="tab1"></div></div><div class="clearfloat item none"><div id="tab3" class="tab1"></div></div></div>
<script type="text/javascript">(function () {var myChart1 = echarts.init(document.getElementById('tab1'));var option1 = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [2,2.5 , 3.3, 4.5, 6.3, 10.2, 20.3],type: 'line'}]};// 为echarts对象加载数据myChart1.setOption(option1);var myChart2 = echarts.init(document.getElementById('tab2'));var option2 = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};myChart2.setOption(option2);var myChart3 = echarts.init(document.getElementById('tab3'));var option3 = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series : [{name: '访问来源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart3.setOption(option3);})()
</script>
</body>
</html>

效果：

方法二：利用下拉列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导航条</title><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="echarts.js" type="text/javascript" ></script><script>$(function(){var li = $('#tabs');var cc=$('#tabs option');var len=cc.length;li.change(function(){var t = parseInt(li.get(0).selectedIndex);for(var i= 0;i<len;i++){if(t==i){$('#chanpin'+t).show();}else{$('#chanpin'+i).hide();}}});});</script><style>.selector{margin: 17px 15px 0 0 ;float: right;}#content .active{display: block;}.chart{width: 400px;height: 300px;}.none {display: none;}</style>
</head>
<body><select name="status" id="tabs" class="selector"><!--<option>ALL</option>--><option>表1</option><option>表2</option><option>表3</option></select><div id="content"><div id ="chanpin0" class="none active"><div id ="main1" class="chart" ></div><!--我们是共产主义接班人！！--></div><div id ="chanpin1" class="none"><div id ="main2" class="chart" ></div></div><div id ="chanpin2" class="none"><div id ="main3" class="chart" ></div></div></div><script type="text/javascript">(function () {var myChart1 = echarts.init(document.getElementById('main1'));var option1 = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [2,2.5 , 3.3, 4.5, 6.3, 10.2, 20.3],type: 'line'}]};// 为echarts对象加载数据myChart1.setOption(option1);var myChart2 = echarts.init(document.getElementById('main2'));var option2 = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};myChart2.setOption(option2);var myChart3 = echarts.init(document.getElementById('main3'));var option3 = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series : [{name: '访问来源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart3.setOption(option3);})()
</script>
</body>
</html>

效果图：

参考自https://blog.csdn.net/luoyangxa/article/details/83510501

当在切换时有的时候第二图不会正常显示，是因为echarts不能识别到你设置的百分比宽度

解决方案一：设置成固定宽度

解决方案二：https://www.zhihu.com/question/42895113

（还没有试）

解决方案三：

在html文件加载时就给main1，main2，main3设置宽度为父div的宽度（也可以增减30左右的像素）

echarts图使用tab和下拉切换相关推荐

vue+动画实现tab栏下划线切换
(vue+过渡实现tab栏下划线切换) 在网上看了很多都是下划线跟随效果,所以今天写了一个可以点击时下划线的位置会有动画效果的. 核心代码是改变它的left值: return (10 + this. ...
vue移动端下拉切换页面_Vue实现移动端页面切换效果
找了好多博客实现效果都--emmm-- 应用Vue自带的过渡 < 进入/离开 & 列表过渡 >和嵌套路由和 fixed定位实现其实还是挺简单的. 在子页面把整个页面做绝对定位 ...
计算器带菜单java_java GUI 模仿计算器界面的代码有点小问题。（如图，如何让下拉菜单下面的两行压扁一点？）...
代码:importjava.awt.*;publicclassCalculator{publicstaticvoidmain(String[]args){Framef=newFrame("计 ...
下拉菜单与轮播图的实现
下拉菜单与轮播图的实现目录下拉菜单与轮播图的实现一.折叠菜单二.轮播图的实现三.简单网页界面(具有轮播图效果) 一.折叠菜单 <body><a href="#co ...
html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
python爬虫selenium操作下拉框详解
使用python爬虫的selenium操作网页的下拉框. 以该网站为例:https://www.17sucai.com/pins/demo-show?id=5926 该网页下存在多个可供测试的下拉框. ...
Bootstrap 带下拉的导航
下拉菜单(dropdown)是一个独立的组件,它可以与页面上任何元素(如,按钮.导航等)捆绑使用.可以为导航捆绑下拉菜单,来制作带下拉的导航. 如果要给导航的某个列表项添加下拉菜单,只需给相应的列表项 ...
Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap 多级下拉菜单
在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...

echarts图使用tab和下拉切换

echarts图使用tab和下拉切换相关推荐

最新文章

热门文章