方法一：用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左右的像素）
详解大全)
