近年来，可视化越来越流行，许多门户网站、新闻、媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解。有一句谚语“一张图片价值于一千个字”，的确如此。各种数据可视化工具也如井喷式地发展，ECharts正是其中的佼佼者。

ECharts是基于Canvas技术进行图表绘制的，准确地说，ECharts的底层依赖于轻量级的Canvas类库ZRender。ZRender是百度团队开发的，它通过Canvas绘图时会调用Canvas的一些接口。通常情况下，使用ECharts开发图表时，并不会直接涉及类库ZRender。ECharts基础架构如图6-1所示。

在ECharts基础架构中，基础库的上层有3个模块： 组件、图类和接口。

组件模块包含坐标轴(axis)、网格(grid)、极坐标(polar)、标题(title)、提示(tooltip)、图例(legend)、数据区域缩放(dataZoom)、值域漫游(dataRange)、工具箱(toolbox)、时间轴(timeline)。

ECharts的图类模块近30种，常用的图类有柱状图(bar)、折线图(line)、散点图(scatter)、K线图(k)、饼图(pie)、雷达图(radar)、地图(map)、仪表盘(gauge)、漏斗图(funnel)。图类与组件共同组成了一个图表，如果只是制作图表的话，只需掌握好图类与组件即可完成80%左右的功能。

另外，20%左右的功能涉及更高级的特性。例如，当单击某个图表上的某个区域的时候，能跳转到另外一个图表上； 或当单击图表上的某个区域时，将展示另外一个区域中的数据，即图表组件的联动效果。此时，需要用到ECharts接口和事件编程。

这里使用ECharts绘制一个简单的柱状图图表。

第一步，创建HTML页面。

在保存echarts.js的文件夹新建一个index1.html文件，代码如下：

第二步，为ECharts准备一个具备高宽的DOM容器。

在绘图前需要为ECharts准备一个定义了高宽的DOM容器。在</head>之后添加，代码如下：

实例中，id为main的div，用于包含ECharts绘制的图表。

第三步，初始化echarts实例对象。

通过echarts.init()方法初始化一个echarts实例对象。代码如下：

ECharts从初始一直使用 Canvas 绘制图表。而ECharts v4.0以后发布了 SVG 渲染器，从而提供了一种新的选择。只需在初始化一个echarts图表实例对象时，设置renderer 参数为'canvas'或'svg'即可指定渲染器。

至于选择哪种渲染器，一般来说，Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等)，也利于实现某些视觉特效。但是，在不少场景中，SVG 具有重要的优势： 它的内存占用更低(这对移动端尤其重要)，并且用户使用浏览器内置的缩放功能时不会模糊。

第四步，设置配置信息。

ECharts使用json格式来指定图表的配置项和数据。

第五步，生成显示图表。

通过echarts实例对象调用setOption(option)方法，使用option指定的配置项和数据，显示一个图表，如简单的柱状图。

下面是完整代码。

【例6-1】制作ECharts的商品销售情况柱状图。

代码如下：

运行效果如图6-2所示。

这里对图形中的各种组件进行简单注解，如图6-1所示。一张图表一般包含用于显示数据的网格区域、x坐标轴、y坐标轴(包括坐标轴标签、坐标轴刻度、坐标轴分隔线、坐标轴箭头)、标题、图例、数据系列等组件。

这些组件都在图表中扮演着特定的角色，表达了特定的信息。但这些组件并不都是必备的，当信息足够清晰时，可以精简部分组件，使得图表更加简洁。6.2节将会对各种组件进行详细的介绍。

1. echarts实例

一个网页中可以创建多个 echarts 实例。每个echarts实例中可以创建多个图表和坐标系等。DOM节点作为echarts的渲染容器，每个echarts独占一个DOM。

2. 系列(series)

系列是一组数值以及将数值映射成的图表。

一个系列包含的要素： 一组数值、图表类型(series.type)以及其他的关于这些数据如何映射成图表的参数等。

(1) 图表类型(series.type)包括： line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树状图)等。

(2) 数据(series.data)： 图表使用的数值。

ECharts 4以前，数据只能声明在各个“系列(series)”中，ECharts 4开始支持dataset组件，用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。

关于数据我们会在后面进行学习，这里不展开详细叙述。

(3) 通用的样式(series.itemStyle)。

通用的样式包括阴影、透明度、颜色、边框颜色、边框宽度等。

3. option配置项

option配置项表述了数据、数据如何映射成图形、交互行为。

例如，使用option配置项来描述对图表的各种需求，包括有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等。

option是个JavaScript对象，它的内部有大量的属性，每个属性是一类组件； 而多个同类组件可以组成数组。

4. 坐标系

很多系列需要运行在“坐标系”上。例如，line(折线图)、bar(柱状图)等需要在“坐标系”上才能运行。

一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中包括xAxis(直角坐标系X轴)、yAxis(直角坐标系Y轴)和grid(网格)三种组件。

一个系列往往能运行在不同的坐标系中。例如，一个scatter(散点图)能运行在直角坐标系、极坐标系、地理坐标系(GEO)等各种坐标系中。同样，一个坐标系也能承载不同的系列。