欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

手把手教你实现echarts3的折线图下钻drilldown功能系列篇二

程序员文章站 2022-07-12 23:31:58
...

开场白

好了,上一篇介绍了关于echarts下钻(drilldown)的一些信息,通过上一篇文章我们知道echarts折线图,柱状图没有支持下钻(drilldown)功能的api,那就需要我们自己动手,丰衣足食了。
这一篇我开始进行实质性的代码演示。你可以按照我的步骤一步一步来做,有什么疑问可以留言我。

欢迎大家访问我的github blog查看更多文章

一.效果贴图

为了避免枯燥无味,我先不贴代码,写贴上我的demo图,这里还会拿上一篇的那个demo图为例。

1.下钻(drilldown)前效果

手把手教你实现echarts3的折线图下钻drilldown功能系列篇二

从图可以看出:这是展示2016年1月一直到2016年9月份的数据的折线图。

下钻(drilldown)开始:比如我点击2016年9月份(201609)的这个点,则应该显示一个属于2016年9月份下的每一天的一个折线图。

2.下钻(drilldown)后效果:

手把手教你实现echarts3的折线图下钻drilldown功能系列篇二

从图可以看出:这是展示的从2016年9月份0901号开始直到0930号这30天的一个折线图。
完全符合我们的要求,对吧。

3.返回父级所在折线图

这里我提供了一个返回按钮,点击返回按钮后,会重新返回到父级的折线图:
手把手教你实现echarts3的折线图下钻drilldown功能系列篇二

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轴赋值即可。`

五.代码下载

手把手教你实现echarts3的折线图下钻drilldown功能系列篇二

demo下载点击 这里

六.总结

  • 好了,如果在第二部分中直接使用我模拟的测试数据的话,可以先不理会data.php的代码。
    直接打开line-drill-down.html运行即可测试;
  • 跑通后,需要与后台接口打通时,可以看一下data.php的一个思路,根据自己的业务写逻辑,然后再做测试即可;
  • 大家在测试的过程中有什么问题,可以跟我留言,我会在第一时间回复;
  • 码字不易,转载请注明出处。

最近结合hexo和github pages又搭建了一个新的博客,我会慢慢的将sae博客的文章逐渐迁移过去,欢迎大家访问。

欢迎大家访问我的新系列文章,主要是讲用最新版的express怎么去开发一个简单的blog.
目前已经更新两篇:手把手教你开发nodejs微博网站-开站篇
手把手教你开发nodejs微博网站-首页篇
最近在学习nodejs,欢迎大家在看过后踊跃拍砖。