1.ECharts简介

    ECharts是一种前端图形组件，与highchart、d3js等类似，用于将数据转化成各种图形进行展示。如下图所示，在Smartbi中，可以使用Smartbi的数据集等资源作为数据来源，通过简单的配置，即可自动将数据以可视化图形的方式展现，使得数据变得更加直观、生动。

接下我们就来学习ECharts的基本使用方法，以及如何在Smartbi中，使用ECharts灵活绘制各种图形效果。

注意：学习此文档前，强烈建议先花费1小时，访问ECharts官网（echarts.apache.org），查看其官方教程。

2 ECharts图形绘制流程

    首先了解ECharts图形绘制的基本流程：引入ECharts组件类，调用echarts.init方法初始化一个echarts图形实例对象（instance），然后根据ECharts规定的格式构建图形配置对象（option），最后调用instance.setOption(option)方法设置图形配置对象，即可完成ECharts图形展现。

    分析以上描述的ECharts图形绘制过程，整体过程非常简单，除构建图形配置对象（option）的步骤外，其余步骤为固定操作，即不同的图形效果，只与option对象所配置的信息有关。因此，学习ECharts，主要以熟悉ECharts提供的option配置对象为主；再加以了解ECharts提供的API接口，即可达到熟练使用ECharts的目的。 

3 ECharts基础知识

学习ECharts，我们还需要先了解几个基本知识。

3.1 数组与JSON

上面提到，学习ECharts，主要是熟悉ECharts的option配置对象，而option的配置对象的结构，采用的是数组或JSON对象，因此需要先了解数组和JSON的基本知识。此处主要介绍数组和JSON的基本概念，不会详细展开讲解。

• 数组

数组为使用 [ ] 括号包围起来的数据集合，数据由英文逗号(,)分隔，数组中的数据可以为：数字、字符串、逻辑值（true/false）、数组（此时为二维数组）、对象、null。

示例：字符串：[ "25%", "100%" ]          数字：[ 1, 2, 3 ]

           逻辑值：[ true, false ]                二维数组：[ [1, 2 ], [ 3, 4 ] ]

           对象：[ { ‘value’ : 335, ‘name’ : '直接访问' },  { ‘value’ : null, ‘name’ : '邮件营销' } ]   

• JSON

1. 数据为“名称 : 值”也就是key : value的形式："name" : "Tom" (其中，value可以为：数字、字符串、逻辑值、数组、对象、null)
2. 数据之间由英文逗号(,)分隔："name" : "Tom", "age" : 25
3. 使用花括号（ { } ）括起来就组成了JSON对象：{ "name" : "Tom", "age" : 25 }
4. 使用英文方括号（ [ ] ）括起来的JSON对象就是JSON数组：[ {"name" : "Tom", "age" : 25 }, {"name" : "Bill", "age" : 24 }]

3.2 了解ECharts图形结构

ECharts图形结构包括：图形标题、画布、坐标轴、绘图区、数据系列、图例、鼠标提示等元素。这些基本的图形元素就可以组成一个完整的图形，如下图所示。

3.3 了解Option对象结构

Option对象决定了图形展示效果，而Option配置属性的结构基本上是与图形结构一一对应的。当要配置某个图形元素的效果时，只需找到元素对应的配置属性进行调整即可。

Option配置属性请访问ECharts官网的配置项手册，如下图所示。

3.4 了解ECharts的API接口

ECharts提供的API较为简单，这里不再赘述，建议花半小时时间浏览一遍即可。

4 调试ECharts图形效果

ECharts提供了非常丰富的图形组件，并且图形的各个要素均支持自定义的配置，可以非常灵活地绘制出我们需要的图形效果。而ECharts官网的demo示例，支持实时调试，我们可以直接在demo示例上快速调出我们需要的图形效果。下面介绍具体的调试步骤：

• 访问ECharts官网，进入实例界面。

• 随意选择自己需要调试的图形类型。如打开一个普通的柱图，就可以在左侧调整option配置属性，右侧即可即时看到图形效果。

• 然后到ECharts的option配置手册中，找相关的配置项，放到上图中查看效果。下面以设置上图的图形标题为例，尝试将标题设置为“演示柱图”，并将图形标题的颜色设置为红色。

• 首先找到option配置项中的title属性，展开后在里面的属性中查找到设置标题名称的属性text，以及设置字体颜色的textStyle属性下的color属性。

• 将找到的属性放到demo实例中。注意保持属性的结构不变，如text属性位于title属性下，而title属性是option的直接属性。

5 视频教学

    视频教学点击下载：Echarts简介、ECharts开发技术基础、ECharts基本原理、Echarts的Option对象介绍