廢話：好久沒有寫博客了，每每看着自己的'戰績'都有點愧疚，但是這段時間確實學習了不少東西，待我慢慢地一 一梳理，將之消化並分享。
---------------------------$O_O$---------------------------
echarts下鑽：就是點擊echarts圖表，讓圖表展開更詳細的下一級數據。比如：點擊2018年的數據，展開2018年12個月的數據，再次點擊某一個月，展開選中月的整月按天數的數據...
而這最根本的就是——點擊事件（呼呼）。
1 let myChart = echarts.init(document.getElementById('idName')); 2 // 基礎配置、設置啥的，官網都有，不再贅余
3 // myChart.showLoading();
4 // myChart.setOption();
5 myChart.on('click',(params)=>{ 6 console.log(params); 7 })
給圖表加上點擊事件，並點擊某個位置，console出來，看看每次點擊圖表的時候都能返回啥？下圖是在echats官網做的一個實驗：
下圖是返回的參數部分合照：
有木有感覺echats團隊掏心掏肺的把能給的都給返回了？！省了不少事。
在這張非全家福中，最有用的莫過於：data、dataIndex、name、seriesIndex、value這幾個屬性了。
有了他們，你就可以精確的知道用戶點擊了那個柱圖的什么數據，知道用戶要什么自然接下來就知道返給他們什么了。然后去后台把數據拿回來，再塞到圖表中展示給用戶看。。。
具體來說，流程就系下邊這樣的：
1 // 基礎配置、設置啥的，官網都有，不再贅余
2 let myChart = echarts.init(document.getElementById('idName')); 3 myChart.showLoading();//友好用戶體驗。。。。。。
- 畫一個空表格 —— 先給客戶上點水，別讓桌面空着
1 let option={//配置自己填，echarts配置項非常詳細又強大
2 xAxis: { 3 type: 'category', 4 data: [] 5 }, 6 yAxis: { 7 type: 'value'
8 }, 9 series: [{ 10 data: [], 11 type: 'bar'
12 }] 13 }; 14 myChart.setOption(option);
如果覺得就上一杯白開水有點寒酸難看，這一步可以等ajax響應成功后再做
因為數據沒回來之前，餅圖啥的還好，柱圖和線圖（有x、y軸的圖），就只有兩根線比較丑。但也有優點
- 提前准備好上菜的程序
1 function fillNewData(echartsBox,optionData){ 2 echartsBox.setOption({ 3 xAxis: { 4 data: optionData.xData 5 }, 6 series : [ 7 { 8 name: optionData.seriesName, 9 data: optionData.seriesData 10 } 11 ] 12 }); 13 }
- 初始化填充一組數據，數據可以是ajax返回值來的
1 fillNewData(myChart,{ 2 xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 3 seriesName: '可有可無看你需要', 4 seriesData: [120, 200, 150, 80, 70, 110, 130] 5 }) 6 myChart.hideLoading();//友好用戶體驗。。。。。。
- 然后就是正經事了。。。。正經事件
1 myChart.on('click',(params)=>{ 2 console.log(params); 3 // 點擊后拿着params里你需要的參數去找后台大佬要新的數據,response再填充進來，如下：
4 myChart.clear(); //上新菜前擦擦桌子吧。
5 fillNewData(myChart,{ 6 xData: response.xDataFromDB, 7 seriesName: response.NameFromDB, 8 seriesData: response.DataFromDB 9 }); 10 });
。至此，一個真正意義上的下鑽輪回就成功了，好像也沒有特別難，注意點就是重新賽數據時最好只塞幾個數據的屬性，樣式的就不要重復搞了。
總結：利用echarts強大的回調函數和面面俱到的params回參，貌似什么事情都能干呢~！不光點擊事件，hover事件也不在話下。
每次用echarts的時候，我都要感嘆N回，真是良心國產啊！
竊竊私語：這只是很簡陋的一個下鑽思路，真正做下鑽的時候，可能用戶點擊后你拿到的返回參數需要經過處理再返給后台，而這就需要用戶點擊的下標，並且把上次返回的數據保存下來用於查找具體值啥的。神煩~
2018-12-10 10:13:41 補充：
發現一個問題，點擊柱子的空白區域沒有反應。比如下圖中畫圓圈的位置，紅色箭頭是截圖時鼠標的位置：：
這個解決方法，見另一篇博文最底部：
監聽click事件必須點到柱上，點擊柱子之間的空白區域沒有作用
聲明：
請尊重博客園原創精神，轉載或使用圖片請注明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/