| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>圖表選項卡</title> | |
| <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> | |
| <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> | |
| <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> | |
| </head> | |
| <style type="text/css"> | |
| .myTable-container { | |
| width: 800px; | |
| height: 430px; | |
| } | |
| </style> | |
| <body> | |
| <div class="container" style="padding-top: 5%; padding-left: 10%"> | |
| <ul id="myTab" class="nav nav-tabs"> | |
| <li class="active"><a href="#tab1" data-toggle="tab">月度數據</a></li> | |
| <li><a href="#tab2" data-toggle="tab">車間數據</a></li> | |
| <li><a href="#tab3" data-toggle="tab">員工數據</a></li> | |
| </ul> | |
| <div id="myTabContent" class="tab-content"> | |
| <div class="tab-pane active" id="tab1"> | |
| <div id="tab1-container" class="myTable-container"></div> | |
| </div> | |
| <div class="tab-pane " id="tab2"> | |
| <div id="tab2-container" class="myTable-container"></div> | |
| </div> | |
| <div class="tab-pane " id="tab3"> | |
| <div id="tab3-container" class="myTable-container"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var $tab1 = document.getElementById('tab1-container'); | |
| var $tab2 = document.getElementById('tab2-container'); | |
| var $tab3 = document.getElementById('tab3-container'); | |
| /* 折線圖 */ | |
| var tab1Option = { | |
| title : { | |
| text : '2019年月度數據圖表', | |
| subtext : '2019/12/29', | |
| x : 'center' | |
| }, | |
| xAxis : { | |
| type : 'category', | |
| data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] | |
| }, | |
| yAxis : { | |
| type : 'value' | |
| }, | |
| series : [ { | |
| data : [ 820, 932, 901, 934, 1290, 1330, 1320 ], | |
| type : 'line' | |
| } ] | |
| }; | |
| /* 餅圖 */ | |
| var tab2Option = { | |
| title : { | |
| text : '四個車間數據圖表', | |
| subtext : '2019/12/29', | |
| 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 : 896, | |
| name : '第五車間' | |
| }, { | |
| value : 771, | |
| name : '第六車間' | |
| } ], | |
| itemStyle : { | |
| emphasis : { | |
| shadowBlur : 10, | |
| shadowOffsetX : 0, | |
| shadowColor : 'rgba(0, 0, 0, 0.5)' | |
| } | |
| } | |
| } ] | |
| }; | |
| /* 柱圖 */ | |
| var tab3Option = { | |
| tooltip : { | |
| trigger : 'item', | |
| formatter : "{a} <br/>{b} : ￥{c} " | |
| }, | |
| xAxis : { | |
| type : 'category', | |
| data : [ '孫健', '付麗麗', '李科', '吳明軒', '孫楠', '邢安媛', '莫西宇', '孫楠', '邢安媛', '莫西宇' ] | |
| }, | |
| yAxis : { | |
| type : 'value' | |
| }, | |
| series : [ { | |
| name : '員工數據', | |
| data : [ 120, 200, 150, 80, 70, 110, 230.15,400.11,236.56,303.25 ], | |
| type : 'bar' | |
| } ] | |
| }; | |
| /* 初始化tab1的 */ | |
| var tab1Table = echarts.init($tab1); | |
| tab1Table.setOption(tab1Option); | |
| /* shown.bs.tab為tab選項卡高亮 */ | |
| $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { | |
| /* 獲取已激活的標簽頁的名稱 */ | |
| /* hash 屬性是一個可讀可寫的字符串，該字符串是 URL 從 # 號開始的部分 */ | |
| var activeTab = $(e.target)[0].hash; | |
| /* 當相應的標簽被點擊時，進行對應的圖表渲染 */ | |
| if (activeTab == "#tab2") { | |
| /* 釋放圖表實例，使實例不可用,不加上這個，會報錯： */ | |
| /* there is a chart instance already initialized on the dom */ | |
| echarts.dispose($tab2); | |
| var tab2Table = echarts.init($tab2); | |
| tab2Table.setOption(tab2Option); | |
| } else if (activeTab == "#tab3") { | |
| echarts.dispose($tab3); | |
| var tab3Table = echarts.init($tab3); | |
| tab3Table.setOption(tab3Option); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
https://www.echartsjs.com/examples/zh/index.html