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

時間 2019-11-06

標籤手把手實現 echarts3 echarts 折線下鑽 drilldown 功能系列简体版

原文原文鏈接

開場白

好了, 上一篇介紹了關於echarts下鑽（drilldown）的一些信息，經過上一篇文章咱們知道echarts折線圖，柱狀圖沒有支持下鑽（drilldown）功能的api，那就須要咱們本身動手，豐衣足食了。
這一篇我開始進行實質性的代碼演示。你能夠按照個人步驟一步一步來作，有什麼疑問能夠留言我。

歡迎你們訪問個人github blog查看更多文章javascript

一.效果貼圖

爲了不枯燥無味，我先不貼代碼，寫貼上個人demo圖,這裏還會拿上一篇的那個demo圖爲例。php

1.下鑽（drilldown）前效果

從圖能夠看出：這是展現2016年1月一直到2016年9月份的數據的折線圖。html

下鑽（drilldown）開始：好比我點擊2016年9月份(201609)的這個點，則應該顯示一個屬於2016年9月份下的每一天的一個折線圖。java

2.下鑽（drilldown）後效果：

從圖能夠看出：這是展現的從2016年9月份0901號開始直到0930號這30天的一個折線圖。
徹底符合咱們的要求，對吧。node

3.返回父級所在折線圖

這裏我提供了一個返回按鈕，點擊返回按鈕後，會從新返回到父級的折線圖:

4.總結

由這3張圖咱們可以看出一個標準的折線圖下鑽（drilldown）功能就出來了。
那麼，實現起來複雜了，其實也很簡單。由於咱們有萬能的 setOption 函數。

不廢話了，下面開始貼出詳細的代碼，準備好了嗎？jquery

注意：若是有對echarts的最基礎的使用還不太瞭解的話，建議去官網看看api和教程之類的，我這裏就再也不對基礎的只是進行贅述了。git

二.折線圖界面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的基礎知識，詳細的能夠點擊這裏進行充電。github

三.drillDown.js代碼

在這個js文件裏我封裝了幾個方法:ajax

getOption: 獲取當前echart對象的配置數組，我就再也不詳細講解了。
initChart: 初始化折線圖，這個方法作了兩件事：sql
- 顯示圖表;
- 爲圖表添加點擊事件，也就是點擊返回按鈕時觸發的事件，詳細邏輯看代碼。

看代碼：

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));
    }
?>