手把手教你实现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，欢迎你们在看事后踊跃拍砖。