手把手教你实现echarts3的折线图下钻drilldown功能系列篇二
开场白
好了,上一篇介绍了关于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,欢迎大家在看过后踊跃拍砖。
手把手教你实现echarts3的折线图下钻drilldown功能系列篇二相关推荐
- 手把手教你用ECharts画折线图
导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟 来源:大数据DT(ID:hzdashuju) 在正式学习之前,先来了解一个ECharts官网提供的很好用的 ...
- 折线图_手把手教你用ECharts画折线图
导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟 来源:华章科技 在正式学习之前,先来了解一个ECharts官网提供的很好用的功能.该功能可以实时显示代码的 ...
- 得到的概率值_手把手教你将矩阵概率画成图
手把手教你将矩阵&概率画成图 要是将每个矩阵和概率都看成对应的「图」会怎么样?本文作者带我们体验了这个简单而有趣的可视化过程. 选自math3ma,作者:Algebra,机器之心编译,参与:高 ...
- 【突破二次元壁】手把手教你用AnimeGAN将风景图转换成宫崎骏动漫风
[突破二次元壁!]手把手教你用AnimeGAN将风景图转换成宫崎骏动漫风! 未经作者允许,本文禁止转载 0. 效果图: 1. 下载源码: 2. 下载预训练模型: 3. 准备图片: 4. 开始转换: 5 ...
- 手把手教你如何将树莓派网关链接到服务器之第二篇
本文为系列文章--手把手教你如何将树莓派网关连接到服务器之第二篇,涉及图1所示步骤二:如何在电脑上操作,配置树莓派网关的密码.频段以及选择服务器. 将树莓派网关连接到服务器的主要流程图如图1所示: 图 ...
- 手把手教你用JAVA调用Websocket实现“声音转换”功能(变声)标贝科技
手把手教你用JAVA调用Websocket实现"声音转换"功能(变声)标贝科技 前言 什么是声音转换? 基于深度学习和迁移学习技术,精准将原说话人的声音转换为目标说话人,同时保留原 ...
- 手把手教你带货直播源码实现直播功能,不依赖第三方SDK
手把手教你带货直播源码实现直播功能,不依赖第三方SDK 先上图: 推流的手机 拉流的网页和VL播放器 拉流的手机客户端 下面开始实现手机直播功能 1.首先你要准备一份编译好的ffmpeg+x264库, ...
- 手把手教你用 pyecharts 制作日历图
公众号后台回复"图书",了解更多号主新书内容 作者:林骥 来源:林骥 日历图,是指按照日历的布局,用颜色展现每一天的数据,从而比较直观地看到全年的数据情况. 比如说,下面是一家超市 ...
- 【图形设计】手把手教你如何画好时序图
编辑导语:时序图可以有效地描述交互顺序,并帮助研发团队更清晰地理顺系统逻辑,做好流程分析,若利用得当,则可以一定程度上降低沟通成本,更快速地推进业务进行.本篇文章里,作者就时序图的构成与画法等方面做了 ...
- 手把手教你画酷炫环形图(图文详解)
作者:白墨(生信菜鸟团) 原文:https://mp.weixin.qq.com/s/mXuF-xqtFSX-m1agxa_CYg 成品预览 环境需求 R 及 Rstudio 的安装配置 https: ...
最新文章
- JAVA中类的访问修饰符的作用范围
- MySQL:给表的某个字段添加唯一性约束
- Python基础day03 作业解析【5道 字符串题、3道 列表题、2道 元组题】
- java 多线程 关键字_java多线程基础(synchronize关键字)
- android 开机打开串口失败,请大神帮我看看这是怎么回事,一用就说串口打开失败,再电脑上试...
- 判断是否是空对象_3分钟短文 | Laravel 查询结果检查是不是空,5个方法你别用错...
- mysql sql注入工具下载_sql注入工具下载|超级SQL注入工具SSQLInjectionv1.0 正式版 附使用说明 - 极光下载站...
- 模型预测控制与机器学习
- Android Layout 布局属性全解
- 2022年熔化焊接与热切割考试模拟100题及在线模拟考试
- Windows下 Jenkins 下载、安装
- 2022年,美股将要上市的巨头能否逃过破发命运?
- 基于Python的作业自动批改系统
- Java 服务器版超市管理系统,基于JAVA的超市进销存管理系统.doc
- 5.2为每种类型的模块内聚举一个例子
- Java百宝箱——实现ip地址、手机号、身份证号归属地查询
- 蓝牙耳机音质变差或许该注意这些问题,学生党什么牌子蓝牙耳机性价比高?
- 《OKR工作法》读后感
- Pet Peeve 是什么?
- php编写古诗,古诗写作方法集锦
热门文章
- 电脑版微信网络连接已断开,解决方案
- 操作系统漏洞检测与利用
- matlab如何绘制状态图,[转载]MATLAB画状态方程的向量图
- 复化科特斯公式matlab_牛顿科特斯公式要点分析.ppt
- 删除mac开机启动项
- windows无法访问 计算机打印机,windows 7 无法连接到打印机 (错误0x0000000d)的解决方法...
- HP1010和HP1020的区别
- Vue + Spring Boot 项目实战(一):项目简介
- go——垃圾回收机制(GC)
- SpringCloud微服务之学生管理