教程:百度数据可视化图表套件echart实战 (附代码)

于2017-04-01由小牛君创建

分享到:


最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3。d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的。3月底由在亚马逊工作的同学介绍下使用了一下echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html)。这个echart其实是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,支持数据拖拽重计算,数据区域漫游,全中文文档非常过瘾。跟同样是国产的前端脚手架fis一样(官网http://fis.baidu.com/),都是诚意满满的国产套餐,体现了现今国内不俗的前端开发实力。使用它们的感觉就像想自己做个平板电脑,去华强北一转,主板、CPU、屏幕等各种套餐一订购,东西就哗哗地组装起来了。极其高效,非常适合商业项目开发。而且,即使是为了研究,用这些也可以打一个很好的基础。

Echart

1.引入目录

废话不多说了,看到好东西,第一步是从github上把相关文件全下下来,然后到build目录翻箱倒柜把东西找齐。新建目录如下:

echarts-1.3.8
—-zrender   //zrender是echart依赖的绘图库,官网要求下载,但是目前我的程序中并没有直接引用它,可以说普通情况下echart可以自己独立运行
——–zrender.js
—-excanvas_r3 //excanvas是实现IE7,8兼容canvas绘图的利器,实现了大部分canvas的API,在绘图方面其核心是通过IE的VML去实现的,效率较低
——–excanvas.js
—-echarts.js  //echarts主程序,包含除map以外所有的主题图库。注意这个是压缩过的,并且只能通过requirejs或者esl.js模块化加载;想用标签或sea.js加载请用echarts-plain.js
—-echarts-orginal.js  //没有压缩过的echarts.js
—-echarts-map.js  //echarts的map主题图库

 

2.在自己的项目中实现其demo

这个echart是百度前端做的,他们推荐使用模块式开发。好在我之前的项目,就是采用requirejs + angularjs开发的。所以引入比较容易。

首先,在requirejs的入口配置文件main.js里加上echart:

然后,在要引入echart的具体页面控制js文件里,加载相关依赖。

以上两步,熟悉dojo或者requirejs的朋友应该都毫无压力,但是还是有很多朋友没用过这些,所以还是有必要说一下的。

接着就是把官网的例子放在自己的页面里实现。这里我选取了一个特别的千层饼图,点击这里去官网查看原图。

那么我们把例子里的静态数据(option对象)搬运到我们自己的JS文件中,然后仿照官网的例子写一个渲染&刷新函数

然后在页面上找个div,显示echart就可以了。

不过请注意一定要给这个div设置宽度高度,否则图显示不出来不要怪我。

我这里用了bootstrap,宽度是按栅格系统的百分比值变化的,所以上面的代码中没有指定宽度。最后调试调试,没有问题我这里也可以显示。

3.定制

当然,仅仅停留在引用别人的例子是不能让我满意的。

首先,要进行数据绑定。

这里细分为3步:

  1. 分析数据格式(就是分析option对象,这一步需要注意把后台获取的数据和样式信息分开。故而我在代码里设置了$scope.option对象存储默认的样式配置信息,之后ajax获取数据后将二者再extend即可。)
  2. 在后台组装相应的数据(根据不同需求而异,我这里只取数值信息,不多言)
  3. 前台ajax获取真实数据(这一点相信大家都很纯熟,不过我的代码里是使用angularjs封装过的$.post对象来做到这一点的)

这样,我们就将官网的千层饼图变成了符合我项目需要的内容——故障类型时序变化年轮图。此图可以本图由内向外展示了各种故障类型的出现频率所占百分比,及其随时间变化的规律。

 

数据可视化实际效果图

 

5.进一步定制

虽然我使用了官网的例子实现了需求,但是我还有些自己的想法。

官网的千层饼图中,代表时间的年轮宽度是固定的。但是我们从后台读取的数据(以月