echarts图使用tab和下拉切换
生活随笔
收集整理的這篇文章主要介紹了
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/> : {c} (ozvdkddzhkzd%)"},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/> : {c} (ozvdkddzhkzd%)"},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和下拉切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据结构-树3-红黑树
- 下一篇： 32位存储环境下整数范围为什么是[-2^