echarts 柱狀圖下鑽功能
阿新 • • 發佈：2018-12-28
| var drillDown = { | |
| getOption : function () { | |
| var option = null; | |
| option = { | |
| title: { | |
| text: '折線圖下鑽示例', | |
| left: 'center' | |
| }, | |
| tooltip: { | |
| trigger: 'item', | |
| formatter: '{a} <br/>{b} : {c}' | |
| }, | |
| legend: { | |
| left: 'left', | |
| data: ['月資料'] | |
| }, | |
| xAxis: { |
|
| type: 'category', | |
| name: 'x', | |
| splitLine: {show: false}, | |
| data: ['201601', '201602', '201603', '201604', '201605', '201606', '201607', '201608', '201609'] | |
| }, | |
| grid: { | |
| left: '3%', | |
| right: '4%', | |
| bottom: '3%', | |
| containLabel: true | |
| }, | |
| yAxis: { | |
| type: 'log', | |
| name: 'y' | |
| }, | |
| series: [ | |
| { | |
| name: '月資料', | |
| type: 'line', | |
| data: [1, 2, 4, 8, 16, 32, 64, 128, 256] | |
| } | |
| ] | |
| }; | |
| return option; | |
| }, | |
| initChart : function (myChart,option) { | |
| myChart.setOption(option); | |
| myChart.on('click',function(object){ | |
| // 銷燬之前的echarts例項 | |
| echarts.dispose(dom); | |
| // 初始化一個新的例項 | |
| var myChart = echarts.init(dom); | |
| // object為當前的這個echart物件，大家可以自己打印出來看看 | |
| // console.dir(object); | |
| // 我們可以看到name屬性即為當前點選點的對應月份值，那麼我們可以通過這個值去介面查詢對應201609月份下的每一天的值. | |
| // 此處的201609月份資料可以通過介面讀取 | |
| // $.ajax( | |
| // type : 'get', | |
| // url : interfaceUrl + '&month=' + object.name, // 此處可以替換為你的介面地址 | |
| // dataType : 'json', | |
| // success : function (msg){ | |
| // option.xAxis.data = msg.xAxis; | |
| // option.series[0].data = msg.yAxis[0]; | |
| // myChart.setOption(option, true); | |
| // } | |
| // ); | |
| // 我這裡就模擬一個測試資料，做為demo演示 | |
| option.xAxis.data = [ | |
| '2016-09-01','2016-09-02','2016-09-03','2016-09-04','2016-09-05','2016-09-06','2016-09-07','2016-09-08', | |
| '2016-09-09','2016-09-10','2016-09-11','2016-09-12','2016-09-13','2016-09-14','2016-09-15','2016-09-16', | |
| '2016-09-17','2016-09-18','2016-09-19','2016-09-20','2016-09-21','2016-09-22','2016-09-23','2016-09-24', | |
| '2016-09-25','2016-09-26','2016-09-27','2016-09-28','2016-09-29','2016-09-30' | |
| ]; | |
| option.series[0].data = [ | |
| 3,4,5,6,5,6,7,8,8,9, | |
| 12,13,15,16,20,12,30,21,22,29, | |
| 30,31,33,34,35,36,20,29,33,40 | |
| ]; | |
| myChart.setOption(option, true); | |
| }); | |
| }, | |
| }; |
| <!DOCTYPE html> | |
| <html style="height: 100%"> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body style="height: 100%; margin: 0"> | |
| <div style="margin-left:40%;margin-top:2%"> | |
| <button id='return-button' value=''>返回</button> | |
| </div> | |
| <div id="container" style="height: 50%;width: 50%"></div> | |
| <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> | |
| <script type="text/javascript" src="../jquery.js"></script> | |
| <script type="text/javascript" src="./drillDown.js"></script> | |
| <script type="text/javascript"> | |
| var dom = document.getElementById("container"); | |
| var myChart = echarts.init(dom); | |
| var option = drillDown.getOption(); | |
| drillDown.initChart(myChart,option); | |
| $('#return-button').on('click',function(){ | |
| var myChart = echarts.init(dom); | |
| var option = drillDown.getOption(); | |
| drillDown.initChart(myChart,option); | |
| }); | |
| </script> | |
| </body> | |
| </html> |