前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线

我为什么选择ECharts ?

       本周学校课程设计，原本随机佛系选了一个51单片机来做音乐播放器，结果在粗略玩了CN-DBpedia两天后才回过神，课设还没有开始整。于是懒癌发作，碍于身上还有比赛的作品没交，本菜鸡对硬件也没啥天赋，所以就直接把题目切换成软件方面的题目。写 python的同学选择了一个时间序列数据的可视化曲线程序设计题目，果真python在数据可视化这一点性能很优秀。于是我见色起意，也想用前端折腾一下。遂到ECharts 的官网逛了一下午，发现ECharts 有两个最主要优点：1，容易使用，好上手，官网文档优雅清晰，案例简明美观，学习时间短。2，开源免费，压根不要什么成本，适合我这种穷屌啊。所以，在比较了MetricGraphics.js后选择了使用ECharts.js。

 

 

ECharts 的特性

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。官网文档写出主要特性：

1，丰富的可视化类型（基本需要的数据统计图都有，甚至是中国地图，这点不得的不为百度团队点赞啊）。

2，多种数据格式无需转化直接使用。（这一点需要注意，省去大量的数据转换的步骤，我没注意到这一点，前期花费了两个小时用去转换数据了，踩坑。）

3，千万数据的前端展现，增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，（简单来说就是支持是的数据量很ok，但是我使用的是4.0 以下的版本，一对比就发现数据量过多时会出现部分卡顿的现象，换成4.0明显问题消除）。

4，移动端优化，（自适应，以及滑块效果很流畅）。

5，多渲染方案，跨平台使用，（pc端移动端还有4.0 甚至支持小程序，以及对其他语言的扩展，牛逼，为其点赞）。

6，深度的交互式数据探索。（暂时还没体验，所以不做评价）。

7，多维数据的支持以及丰富的视觉编码手段（ECharts 3 开始加强了对多维数据的支持，效果也越来越美观了）。

8，动态数据，（主要配合timeline组件使用，可以描述时间维度）。

9，绚丽的特效，通过 GL 实现更多更强大绚丽的三维可视化，无障碍访问（4.0+）等，我在本次的课设中并没有使用到，所以就不赘述了。

 

ECharts 的运用实例

官网实用教程配代码实例5分钟上手Echarts

官网链接直接上，我差不多花了3个小时，就把官网关于我所需的ECharts 的教程看完了。看完情不自禁的感慨，这个教程写的太妙了，简洁明了，行云流水，实例也清晰到爆炸。强行安利直接点击上方超链接，去官网学习，没有更好的学习EChart方式了。

 

总结一条在官网学习ECharts的路线：

step1:初步了解ECharts的特性。

 step2:查看教程，务必先完成五分钟上手一个实例，清楚知道其中的获取EChart、引入 EChart,绘 制一个简单的图标。推荐在线定制。

step3:查看教程中的自定义构建 ECharts，根据自己需求构建一个可以直接src的Echart， 这一步很简单，但是必须要好好整一下，合适的EChar.js在大小和使用需求方面可以恰到好处，不冗余也非常有利于了解EChart的各个部件功能。

step4：完成以上三步，就可以任意根据你想要运用的效果，选择性的点击学习不同模块。

 

ps:如果只是需求不大的想做个简单特效的，那直接复制粘贴官网实例，简单修改一下数值即可。

 

简单展示时间序列数据的可视化曲线效果

这个是我根据官网模板进行编辑修改。

我的X轴坐标有三条线，每个线250个值，进行12次重复，每条线3k个值，3条线一共9k个值，验证了官网所描述的‘’千万数据的前端展现‘’这一特性，以及在展示的过程中，发现之前使用的EChart在展示时候出现了卡顿现象，随即重新下载版本4.2.1的EChart.js，引入后发现该问题消失。

 

关于EChart的主题

本颜狗真的很看重美观这一点。

索性EChart连主题配色都可以定制：定制主题。个人认为下载的展示主题模板也很ok了几个基本款主题。

下载后，主题使用示例：

• 简单展示一下温暖的vintage主题：

• 简单展示一下dark主题：

 

本次使用总结：

       EChart使用简洁，对酸菜鱼还是很友好，可视化界面也很美观,随着不断更新，在图片数据处理展示这方面性能也逐步优化，适合平台多，自适应屏幕状态好，私以为还是相当值得前端攻城狮们看看使用一下的。

      在大致了解框架后，结合官网的文档学习效率会高出不少，推荐主要还是实践。出于忙碌，以及其他比赛的ddl要到，我没有投入过多的时间，但是如果涉及到开发的话，务必还是要把API好好地梳理一遍，深层了解学习。这样才能更好的使用。

(小声悄悄说：希望有神仙可以给小酸菜鱼点一个赞哦~）