echarts - 下鑽功能總結

廢話：很久沒有寫博客了，往往看着本身的'戰績'都有點愧疚，可是這段時間確實學習了很多東西，待我慢慢地一 一梳理，將之消化並分享。

---------------------------$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/