手把手教你實現echarts3的折線圖下鑽drilldown功能系列篇一

一.拋出需求：折線圖-下鑽功能

最近接到領導的一個需求:說是想在原來的月份數據的折線圖上，點擊某個月份後能顯示一個該月份對應的每一天的一個折線圖。

歡迎你們訪問個人github blog查看更多文章
折線圖圖一以下：

領導的意圖是:好比，點擊201609月份這個點後,可以出現一個新的折線圖，顯示的是201609月份的每一天的數據。

需求看到這裏,相信之前接觸或使用過highcharts的童鞋就知道了，這是一個下鑽的功能。

個人項目如今使用的是echarts3，之前是用過highcharts

二.highcharts的下鑽功能

1.看圖表

咱們來看highcharts官網的一個例子,顯示的是各個主流瀏覽器的一個數值比重，我這裏截圖如圖二所示：

而後點擊隨意的一個柱子，會出現一個新的圖表,以下圖圖三:(我點擊的是第一個柱子:IE瀏覽器)：

從圖三能夠看出：

• 顯示的是 IE瀏覽器的各個版本使用率的佔比.
• 點擊圈紅的後退按鈕，能夠返回上一級的圖表.

2.看API

看一下API對鑽取的支持,以下圖四：

3.疑問

既然highcharts對下鑽功能支持那麼好，那麼echarts在這一塊作的怎麼樣呢？

三.echarts的下鑽功能-drilldown

1.看圖表

翻了半天，只找到一個矩形樹圖的例子，相似有那麼點下鑽的意思，感受很雞肋。想了解的點這裏。

2.看API

只找到了series的type=treemap類型，如圖五：

感受好雞肋呀，折線圖，柱狀圖的這些都不支持下鑽。。。

3.echarts項目issue區域

去github的echarts項目issue區域看了看，發現已經有了好幾條關於鑽取的問題，如圖六:

而後點最下面的一條件進去看了看，發現是echarts的做者林峯的回覆，哈哈，終於看見大神了。以下:

4.翻譯一下

好吧，翻譯一下：大概意思就是告訴咱們echarts不會提供什麼鑽取的接口，你們要想使用鑽取功能，請使用萬能的setOption吧。。。

四.總結

看到這裏你大概會想說：

• BB了那麼久，怎麼還不入正題呢？
• echarts的折線圖究竟怎麼來實現下鑽(drilldown)功能呢？

五.未完待續

• 不要着急，本篇主要講了一下碰見需求後分析問題和解決問題的一些思路。
• 下篇 我會從代碼的角度詳細介紹怎麼一步一步來實現，敬請關注!
• 代碼可從github上下載: https://github.com/phping1/ec...
• 碼字不易，轉載請註明出處!

最近結合hexo和github pages又搭建了一個新的博客，我會慢慢的將sae博客的文章逐漸遷移過去，歡迎你們訪問。
歡迎你們訪問個人新系列文章，主要是講用最新版的express怎麼去開發一個簡單的blog.
目前已經更新兩篇：手把手教你開發nodejs微博網站-開站篇
,手把手教你開發nodejs微博網站-首頁篇。最近在學習nodejs，歡迎你們在看事後踊躍拍磚。