Echarts学习之路 —— echarts介绍

最近接触到了Echarts这个JavaScript图表库，感觉已经被它的多种多样的绚丽图形深深地吸引了，所以我决定去学习它，了解它。

今天先来对它进行一些初步的了解。

ECharts介绍：

官方解释：

ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

翻译过来就是：ECharts是一个免费的、功能强大的、可视化的一个库。它可以非常简单的往软件产品中添加直观的、动态的和高度可定制化的图表。它是一个全新的基于zrender的用纯JavaScript打造完成的canvas库。

简单的说，echarts就是一个帮助数据可视化的库。这个功能可就不起啊，相信在上学的时候很多老师就说过，能用图表展示的就千万别用文字这句话，是的图表可以很直观的把庞大的数据以一种合适的方式展现给我们，我们也能通过进行图表分析得出有价值的信息。所以作为一个前端人员来说，就是为了把数据以一种很舒服、很直观的方式给别人展现出来，所以说这是前端人员的必备神器啊！！

ECharts的特性：

凡是什么东西肯定要好用用的人才多是吧，不好用的东西就算说出花来也改变不了其本质，那么ECharts有哪些特性了？

特性一：它有非常丰富的图表类型

echarts不仅提供常见的如折线图，柱状图，`散点图，饼图，K线图等图表类型，而且ECharts 提供了用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

特性二：多个坐标系的支持

echarts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。

特性三：移动端的优化

流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构，带来了核心部分体积的减小。ECharts 组件众多，并且后面会持续增加，我们提供了更细粒度的按需打包能力。最小体积缩小为 ECharts 2 的 40%。

移动端交互也做了优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移。有很好的PC端和移动端的兼容性和适应性。

特性四：深度的交互式数据探索

交互是从数据中发掘信息的重要手段。“总览为先，缩放过滤按需查看细节”是数据可视化交互的基本需求。
echarts 提供了legend visualMap dataZoom tooltip等组件以及图表附带的漫游，选取等操作提供了数据筛取、视图缩放、展示细节等能力。echarts 3 中，对这些组件进行了广泛增强，支持在数据的各种坐标轴、维度进行数据过滤、缩放，以及在更多的图中采用这些组件。

特性五：大数据量的展现

现在的时代是大数据时代，越来越多的数据堆积，如何才能使这些数据发挥它应有的价值是一件值得我们深思的事情。echarts对大数据的处理能力非常好，借助 Canvas 的能力，ECharts 在散点图中能够轻松展现上万甚至上十万的数据。

特性六：多维数据的支持以及丰富的视觉编码手段

echarts 3 加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色，大小，透明度，明暗度等不同的视觉通道。

特性七：动态数据

echarts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，echarts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。

特性八：绚丽的特效

这个特性是从视觉效果上最吸引人的一个特性，echarts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效如模拟迁徙等特效。

或许有人会说那为什么不选择highcharts了？highcharts在某些方面比echarts更好啊，是的，不可否认highcharts可能的确在某些方面比echarts好，但是，echarts是开源的、免费的的而highcharts是要收费的，，，所以基于这个层面，很多人可能也会选择echarts。更加重要的一点是echarts是国产的，它是国内百度公司的一个技术团队维护开的开源工具项目，所以，体现爱国主义精神的时候到了。。。

highcharts与echarts在性能方面的比较

highcharts是基于SVG的，SVG的节点可以向dom节点一样控制，所以在自主创作图形方面非常方便，但是SVG是2D矢量图，不能画3D图形，而且SVG的节点都是对象，会非常占用内存。
同样虽然canvas也只支持2D绘图，不支持3D绘图。但是canvas绘图不会给每个点生成对象，因此绘制图形可以非常快，占用内存特别少，兼容性也比较好，除了IE6，其他浏览器都可以支持。