ECharts的简单入门

前言：

如果我们开发的项目中涉及到大量的数据分析，干巴巴的数据展示肯定不是用户想看到的，怎么把数据更加形象生动的展示给用户，就变得十分重要了。那么就不得不说今天的主角ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。这篇文章通过一个简单的demo,带你初步认识ECharts。

正文：

一、浏览器画图的原理

基于HTML和JavaScript的浏览器绘图方式，依赖于各个浏览器内部所提供的图形引擎。所以针对不同浏览器就诞生了不同的网络图形标准。

目前主流的网络图形标准包括两种：

1.SVG：SVG 是由 W3C 制定的同样基于 XML 的矢量图形描述语言，SVG 元素是指示如何绘制图像的一些指令，由图形引擎解释这些指令，把 SVG 图像在浏览器上显示出来。使用 SVG 可以在网页上显示出各种各样的高质量的矢量图形，其最明显的特征是灵活的文件格式，矢量图形、位图和文字三部分共同组成一个 SVG 图形，并具备对运行中的 Web 页面图像进行实时修改的能力。

2.Canvas: Canvas 是指 HTML 5 中新加入的 canvas 元素，最初由 Apple 的 Safari 浏览器引入，而后受到 Firefox 和 Opera 的广泛支持。Canvas 元素相对 SVG 的一个重要不同在于，canvas 提供了通过 JavaScript 绘制图形的方法，每一个 c