开场白
好了,上一篇介绍了关于echarts下钻（drilldown）的一些信息，通过上一篇文章我们知道echarts折线图，柱状图没有支持下钻（drilldown）功能的api，那就需要我们自己动手，丰衣足食了。
这一篇我开始进行实质性的代码演示。你可以按照我的步骤一步一步来做，有什么疑问可以留言我。
欢迎大家访问我的github blog查看更多文章
一.效果贴图
为了避免枯燥无味，我先不贴代码，写贴上我的demo图,这里还会拿上一篇的那个demo图为例。
1.下钻（drilldown）前效果
从图可以看出：这是展示2016年1月一直到2016年9月份的数据的折线图。
下钻（drilldown）开始：比如我点击2016年9月份(201609)的这个点，则应该显示一个属于2016年9月份下的每一天的一个折线图。
2.下钻（drilldown）后效果：
从图可以看出：这是展示的从2016年9月份0901号开始直到0930号这30天的一个折线图。
完全符合我们的要求，对吧。
3.返回父级所在折线图
这里我提供了一个返回按钮，点击返回按钮后，会重新返回到父级的折线图:
4.总结
- 由这3张图我们能够看出一个标准的折线图下钻（drilldown）功能就出来了。
- 那么，实现起来复杂了，其实也很简单。因为我们有万能的 setOption 函数。
不废话了，下面开始贴出详细的代码，准备好了吗？
注意：如果有对echarts的最基础的使用还不太了解的话，建议去 官网 看看api和教程之类的，我这里就不再对基础的只是进行赘述了。
二.折线图界面line-drill-down.html
<!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); // 初始化加载折线图，并显示出来
// 点击返回按钮，会重新回到一.1的折线图
$('#return-button').on('click',function(){
var myChart = echarts.init(dom);
var option = drillDown.getOption();
drillDown.initChart(myChart,option);
});
</script>
</body>
</html>代码解释：
- 10行：在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器;
- 13行：加载了一个drillDown.js文件，详细代码见下面的第三步;
- 61，62行：基于准备好的dom，初始化echarts实例;
- 63行：指定图表的配置项;
- 64行：使用封装好的initChart方法为图表填充数据，并使用63行的配置项和64行的数据来显示图表.
这里都是echarts的基础知识，详细的可以点击这里进行充电。
三.drillDown.js代码
在这个js文件里我封装了几个方法:
- getOption: 获取当前echart对象的配置数组，我就不再详细讲解了。
-
initChart: 初始化折线图，这个方法做了两件事：
- 显示图表;
- 为图表添加点击事件，也就是点击 返回按钮时触发的事件，详细逻辑看代码。
看代码：
var drillDown = {
getOption : function () {
var option = null;
option = {
title: {
text: '折线图下钻（drilldown）示例',
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']
},
......
};由于代码篇幅过长，影响阅读性，我这里不详细贴出，大家可以从这里下载。
四.后台数据接口代码data.php
这里我写了伪代码，大家看一下应该就能够明白了:
<?php
// 这里的接口代码伪代码大概如下:
function getInterfaceData($month) {
// 1.写查询语句,这里只是写伪代码,自己做防sql注入
$sql = "select ... from table where month = $month";
// 2.连接数据库,查询结果为$data
// 3.对查询的结果进行组装,返回json格式的数组
$chartResult = [];
// 4.取出x轴的值
$chartResult['xAxis'] = $data['report_date'];
// 5.为第一个series赋值，我们这里的demo只有一条折线
$yAxisArr['yAxis'][0] = $data['data0'];
// 如果有多条折线的情况下,可以这样写
// $yAxisArr['yAxis'][5] = $data['data1'];
// $yAxisArr['yAxis'][6] = $data['data2'];
// 6.为y轴赋值
$chartResult['yAxis'] = $yAxisArr;
// 7.返回json格式的数据
exit(json_encode($chartResult));
}
?>说明:
`data.php每一步我都有详细的注释，该方法主要是返回一个json格式的字符串，来供ajax回调使用。
客户端再拿到这个json字符串后，再进行拆分，分别给图表的x轴和y轴赋值即可。`
五.代码下载
demo下载点击 这里。
六.总结
- 好了，如果在第二部分中直接使用我模拟的测试数据的话，可以先不理会data.php的代码。
直接打开line-drill-down.html运行即可测试; - 跑通后，需要与后台接口打通时，可以看一下
data.php的一个思路，根据自己的业务写逻辑，然后再做测试即可; - 大家在测试的过程中有什么问题，可以跟我留言，我会在第一时间回复;
- 码字不易，转载请注明出处。
最近结合hexo和github pages又搭建了一个新的博客，我会慢慢的将sae博客的文章逐渐迁移过去，欢迎大家访问。
欢迎大家访问我的新系列文章，主要是讲用最新版的express怎么去开发一个简单的blog.
目前已经更新两篇：手把手教你开发nodejs微博网站-开站篇
手把手教你开发nodejs微博网站-首页篇
最近在学习nodejs，欢迎大家在看过后踊跃拍砖。