ECharts学习

上面例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts图表显示出来的文字，都可以通过option来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。上面的例子中，可以在echarts/build/build.js的参数中指定语言：

nodenode_modules/echarts/build/build.js--min-iecharts.custom.js-olib/echarts.custom.min.js--langen表示使用内置的英文。此外还可以是--langfi

nodenode_modules/echarts/build/build.js--min-iecharts.custom.js-olib/echarts.custom.min.js--langmy/langXX.js表示在构建时使用myProject/my/langXX.js文件来替换myProject/node_modules/echarts/lib/lang.js文件。这样可以在myProject/my/langXX.js文件中自定义语言。注意这种方式中，必须指定-o或者--output。另外，上面的rollup插件echarts/build/rollup-plugin-ec-lang也可以传入同样的参数，实现同样的功能

在3.1.1版本之前ECharts在npm上的package是非官方维护的，从3.1.1开始由官方EFE维护npm上ECharts和zrender的package。可以使用如下命令通过npm安装ECharts

npminstallecharts--save引入ECharts通过npm上安装的ECharts和zrender会放在node_modules目录下。可以直接在项目代码中require('echarts')得到ECharts

varecharts=require('echarts');varmyChart=echarts.init(document.getElementById('main'));//基于准备好的dom，初始化echarts实例myChart.setOption({//绘制图表title:{text:'ECharts入门示例'},tooltip:{},xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]});按需引入ECharts图表和组件默认使用require('echarts')得到的是已经加载了所有图表和组件的ECharts包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。例如上面代码只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从400多KB减小到170多KB

varecharts=require('echarts/lib/echarts');//引入ECharts主模块require('echarts/lib/chart/bar');//引入柱状图require('echarts/lib/component/tooltip');//引入提示框和标题组件require('echarts/lib/component/title');个性化图表的样式ECharts提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用ECharts实现南丁格尔图：

这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis

roseType:'angle'南丁格尔图会通过半径表示数据的大小

ECharts中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的itemStyle里设置。例如阴影的样式可以通过下面几个配置项设置：

itemStyle:{shadowBlur:200,//阴影的大小shadowOffsetX:0,//阴影水平方向上的偏移shadowOffsetY:0,//阴影垂直方向上的偏移shadowColor:'rgba(0,0,0,0.5)'//阴影颜色}深色背景和浅色标签现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。背景色是全局的，所以直接在option下设置backgroundColor

setOption({backgroundColor:'#2c343c'})文本的样式可以设置全局的textStyle

setOption({textStyle:{color:'rgba(255,255,255,0.3)'}})也可以每个系列分别设置，每个系列的文本设置在label.textStyle

label:{textStyle:{color:'rgba(255,255,255,0.3)'}}饼图的话还要将标签的视觉引导线的颜色设为浅色

labelLine:{lineStyle:{color:'rgba(255,255,255,0.3)'}}跟itemStyle一样，label和labelLine的样式也有emphasis状态

扇形的颜色也是在itemStyle中设置：

itemStyle:{color:'#c23531',//设置扇形的颜色shadowBlur:200,shadowColor:'rgba(0,0,0,0.5)'}跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。ECharts中每个扇形的颜色可以通过分别设置data下的数据项实现

data:[{value:400,name:'搜索引擎',itemStyle:{color:'#c23531'}},...]如果只有明暗度的变化，有种更快捷的方式是通过visualMap组件将数值的大小映射到明暗度

visualMap:{show:false,//不显示visualMap组件，只用于明暗度的映射min:80,//映射的最小值为80max:600,//映射的最大值为600inRange:{colorLightness:[0,1]//明暗度的范围是0到1}}ECharts中的样式简介这里主要是大略概述，用哪些方法可以设置样式，改变图形元素或者文字的颜色、明暗、大小等；之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂；这里介绍的几种方式，功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好

1.颜色主题（Theme）

2.调色盘

3.直接样式设置（itemStyle、lineStyle、areaStyle、label、...）

4.视觉映射（visualMap）

最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在示例集合中，可以选择“Theme”，直接看到采用主题的效果。ECharts4开始，除了一贯的默认主题外，新内置了两套主题，分别为'light'和'dark'。可以这么来使用它们：

varchart=echarts.init(dom,'light');或varchart=echarts.init(dom,'dark');其他的主题，没有内置在ECharts中，需要自己加载；这些主题可以在主题编辑器里访问到，也可以使用这个主题编辑器自己编辑主题；下载下来的主题可以这样使用；如果主题保存为JSON文件，那么可以自行加载和注册，例如：

//假设主题名称是"vintage"$.getJSON('xxx/xxx/vintage.json',function(themeJSON){echarts.registerTheme('vintage',JSON.parse(themeJSON))varchart=echarts.init(dom,'vintage');});如果保存为UMD格式的JS文件，那么支持了自注册，直接引入JS文件即可：

//HTML引入vintage.js文件后（假设主题名称是"vintage"）varchart=echarts.init(dom,'vintage');//...调色盘调色盘可以在option中设置，它给定了一组颜色，图形、系列会自动从其中选择颜色；可以设置全局的调色盘，也可以设置系列自己专属的调色盘

option={color:['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'],//全局调色盘series:[{type:'bar',color:['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab','#91ca8c','#f49f42'],//此系列自己的调色盘...},{type:'pie',color:['#37A2DA','#32C5E9','#67E0E3','#9FE6B8','#FFDB5C','#ff9f7f','#fb7293','#E062AE','#E690D1','#e7bcf3','#9d96f5','#8378EA','#96BFFF'],//此系列自己的调色盘...}]}直接的样式设置itemStyle,lineStyle,areaStyle,label,...直接的样式设置是比较常用设置方式；纵观ECharts的option中，很多地方可以设置itemStyle、lineStyle、areaStyle、label等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等。一般来说，ECharts的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label等可能出现在不同的地方

在鼠标悬浮到图形元素上时，一般会出现高亮的样式；默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过emphasis属性来定制。emphsis中的结构，和普通样式的结构相同，例如：

option={series:{type:'scatter',//分散点itemStyle:{//普通样式color:'red'//点的颜色},label:{show:true,formatter:'Thisisanormallabel.'//标签的文字},emphasis:{//高亮样式itemStyle:{color:'blue'//高亮时点的颜色},label:{show:true,formatter:'Thisisaemphasislabel.'//高亮时标签的文字}}}}注意：在ECharts4以前，高亮和普通样式的写法，是这样的

option={series:{type:'scatter',itemStyle:{//普通样式normal:{color:'red'//点的颜色},emphasis:{//高亮样式color:'blue'//高亮时点的颜色}},label:{normal:{//普通样式show:true,formatter:'Thisisanormallabel.'//标签的文字},emphasis:{//高亮样式show:true,formatter:'Thisisaemphasislabel.'//高亮时标签的文字}}}}这种写法仍然被兼容，但是不推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在ECharts4中，支持不写normal的配置方法（即本文开头的那种写法），使得配置项更扁平简单

visualMap组件能指定数据到颜色、图形尺寸的映射规则

之前章节数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入；ECharts中实现异步数据的更新非常简单，在图表初始化后不管何时只要通过jQuery等工具异步获取数据后通过setOption填入数据和配置项就行

varmyChart=echarts.init(document.getElementById('main'));$.get('data.json').done(function(data){myChart.setOption({title:{text:'异步数据加载示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]});});或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据

varmyChart=echarts.init(document.getElementById('main'));myChart.setOption({//显示标题，图例和空的坐标轴title:{text:'异步数据加载示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:[]},yAxis:{},series:[{name:'销量',type:'bar',data:[]}]});$.get('data.json').done(function(data){//异步加载数据myChart.setOption({//填入数据xAxis:{data:data.categories},series:[{name:'销量',//根据名字对应到相应的系列data:data.data}]});});ECharts中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据

myChart.showLoading();$.get('data.json').done(function(data){myChart.hideLoading();myChart.setOption(...);});数据的动态更新ECharts由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过setOption实现，你只需要定时获取数据，setOption填入数据，而不用考虑数据到底产生了那些变化，ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化；ECharts3中移除了ECharts2中的addData方法。如果只需要加入单个数据，可以先data.push(value)后setOption

1.能够贴近这样的数据可视化常见思维方式：基于数据（dataset组件来提供数据），指定数据到视觉的映射（由encode属性来指定映射），形成图表

2.数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤

3.数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份

4.支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换

本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。概略而言，可以进行这些映射：

1.指定dataset的列（column）还是行（row）映射为图形系列（series）。这件事可以使用series.seriesLayoutBy属性来配置。默认是按照列（column）来映射。

有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。用户可以使用seriesLayoutBy配置项，改变图表对于行列的理解。seriesLayoutBy可取值：

1.'column':默认值。系列被安放到dataset的列上面。

2.'row':系列被安放到dataset的行上面。

介绍encode之前，首先要介绍“维度（dimension）”的概念。

varoption={dataset:{dimensions:[{name:'score'},'amount',//可以简写为string，表示维度名{name:'product',type:'ordinal'}//可以在type中指定维度类型],source:[...]},series:{type:'line',dimensions:[//在系列中设置的dimensions会更优先采纳null,//可以设置为null表示不想设置维度名'amount',{name:'product',type:'ordinal'}]},...};大多数情况下，我们并不需要去设置维度类型，因为会自动判断；但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。维度类型（dimensiontype）可以取这些值：

'number':默认，表示普通数据

'ordinal':对于类目、文本这些string类型的数据，如果需要能在数轴上使用，须是'ordinal'类型。ECharts默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定

'float':如果设置成'float'，在存储时候会使用TypedArray，对性能优化有好处

'int':如果设置成'int'，在存储时候会使用TypedArray，对性能优化有好处

了解了维度的概念后，我们就可以使用encode来做映射

1.dataZoom组件是对数轴（axis）进行『数据窗口缩放』『数据窗口平移』操作；可以通过dataZoom.xAxisIndex或dataZoom.yAxisIndex来指定dataZoom控制哪个或哪些数轴

2.dataZoom组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动

3.dataZoom的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果；数据过滤模式的设置不同，效果也不同

4.dataZoom的数据窗口范围的设置，目前支持两种形式：百分比形式/绝对数值形式

dataZoom组件现在支持几种子组件：

1.内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中

2.滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作

3.框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在toolbox中

ECharts工作在用户指定高宽的DOM节点（容器）中，ECharts的『组件』和『系列』都在这个DOM节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现DOM文档流布局，因此采用类似绝对布局的简单容易理解的布局方式；但是容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要ECharts内部组件随着容器尺寸变化而变化的能力。为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似CSSMediaQuery的自适应能力

大部分『组件』和『系列』会遵循两种定位方式：

这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』

1.绝对值：单位是浏览器像素（px），用number形式书写（不写单位）；例如{left:23,height:400}

2.百分比：表示占DOM容器高宽的百分之多少，用string形式书写。例如{right:'30%',bottom:'40%'}

3.位置描述:可以设置left:'center'/top:'middle'，表示水平居中/垂直居中。

这六个量的概念，和CSS中六个量的概念类似：

left：距离DOM容器左边界的距离；right：距离DOM容器右边界的距离；top：距离DOM容器上边界的距离；bottom：距离DOM容器下边界的距离；width：宽度；height：高度

在横向，left、right、width三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如left和right或者right和width都可以决定组件的位置和大小。纵向，top、bottom、height三个量，和横向类同不赘述

center：是一个数组，表示[x,y]，其中，x、y可以是『绝对值』或者『百分比』，含义和前述相同

radius：是一个数组，表示[内半径,外半径]，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同

在自适应容器大小时，百分比设置是很有用的

ECharts的『外观狭长』型的组件（如legend、visualMap、dataZoom、timeline等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。横纵向布局的设置，一般在『组件』或者『系列』的orient或者layout配置项上，设置为'horizontal'或者'vertical'

ECharts2中的x/x2/y/y2的命名方式仍被兼容，对应于left/right/top/bottom，但是建议写left/right/top/bottom

位置描述中，为兼容ECharts2，可以支持一些看起来略奇怪的设置：left:'right'、left:'left'、top:'bottom'、top:'top'；这些语句分别等效于：right:0、left:0、bottom:0、top:0，写成后者就不奇怪了

MediaQuery提供了『随着容器尺寸改变而改变』的能力；随着尺寸变化，legend和系列会自动改变布局位置和方式

要在option中设置MediaQuery须遵循如下格式：

option={baseOption:{//这里是基本的『原子option』。title:{...},legend:{...},series:[{...},{...},...],...},media:[//这里定义了mediaquery的逐条规则。{query:{...},//这里写规则。option:{//这里写此规则满足下的option。legend:{...},...}},{query:{...},//第二个规则。option:{//第二个规则对应的option。legend:{...},...}},{//这条里没有写规则，表示『默认』，option:{//即所有规则都不满足时，采纳这个option。legend:{...},...}}]};上面格式中，baseOption、以及media每个option都是『原子option』，即普通的含有各组件、系列定义的option。而由原子option』组合成的整个option，我们称为『复合option』。baseOption是必然被使用的，此外，满足了某个query条件时，对应的option会被使用chart.mergeOption()来merge进去

每个query类似于这样

{minWidth:200,maxHeight:300,minAspectRatio:1.3}现在支持三个属性：width、height、aspectRatio（长宽比）。每个属性都可以加上min或max前缀。比如，minWidth:200表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：{minWidth:200,maxHeight:300}表示『大于等于200px宽度，并且小于等于300px高度』

media:[...,{query:{maxAspectRatio:1//当长宽比小于1时。},option:{legend:{//legend放在底部中间。right:'center',bottom:0,orient:'horizontal'//legend横向布局。},series:[//两个饼图左右布局。{radius:[20,'50%'],center:['50%','30%']},{radius:[30,'50%'],center:['50%','70%']}]}},{query:{maxWidth:500//当容器宽度小于500时。},option:{legend:{right:10,//legend放置在右侧中间。top:'15%',orient:'vertical'//纵向布局。},series:[//两个饼图上下布局。{radius:[20,'50%'],center:['50%','30%']},{radius:[30,'50%'],center:['50%','75%']}]}},...]多个query被满足时的优先级注意，可以有多个query同时被满足，会都被mergeOption，定义在后的后被merge（即优先级更高）

如果media中有某项不写query，则表示『默认值』，即所有规则都不满足时，采纳这个option

在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸；但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个queryoption中出现，那么在其他queryoption中也必须出现，否则不能够回归到原来的状态。（left/right/top/bottom/width/height不受这个限制。）

也就是说，当第二（或三、四、五...）次chart.setOption(rawOption)时，如果rawOption是复合option（即包含media列表），那么新的rawOption.media列表不会和老的media列表进行merge，而是简单替代。当然，rawOption.baseOption仍然会正常和老的option进行merge。

其实，很少有场景需要使用『复合option』来多次setOption，而我们推荐的做法是，使用mediaQuery时，第一次setOption使用『复合option』，后面setOption时仅使用『原子option』，也就是仅仅用setOption来改变baseOption

数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）；ECharts的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如graph、事件河流图、treemap也都会做出他们内置的映射；此外，ECharts还提供了visualMap组件来提供通用的视觉映射。visualMap组件中可以使用的视觉元素有：

图形类别（symbol）、图形大小（symbolSize）

颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、

颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）

下面对visualMap组件的使用方式进行简要的介绍

ECharts中的数据，一般存放于series.data中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）

例如，series.data最常见的形式，是『线性表』，即一个普通数组：

series:{data:[{//这里每一个项就是数据项（dataItem）value:2323,//这是数据项的数据值（value）itemStyle:{...}},1212,//也可以直接是dataItem的value，这更常见2323,//每个value都是『一维』的4343,3434]}series:{data:[{//这里每一个项就是数据项（dataItem）value:[3434,129,'圣马力诺'],//这是数据项的数据值（value）itemStyle:{...}},[1212,5454,'梵蒂冈'],//也可以直接是dataItem的value，这更常见[2323,3223,'瑙鲁'],//每个value都是『三维』的，每列是一个维度[4343,23,'图瓦卢']//假如是『气泡图』，常见第一维度映射到x轴，第二维度映射到y轴，第三维度映射到气泡半径（symbolSize）]}在图表中，往往默认把value的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助visualMap。最常见的情况，气泡图（scatter）使用半径展现了第三个维度

visualMap组件定义了把数据的『哪个维度』映射到『什么视觉元素上』，现在提供如下两种类型的visualMap组件，通过visualMap.type来区分；其定义结构例如：

option={visualMap:[//可以同时定义多个visualMap组件。{//第一个visualMap组件type:'continuous',//定义为连续型viusalMap...},{//第二个visualMap组件type:'piecewise',//定义为分段型visualMap...}],...};分段型视觉映射组件（visualMapPiecewise），有三种模式：

1.连续型数据平均分段:依据visualMap-piecewise.splitNumber来自动平均分割成若干块

2.连续型数据自定义分段:依据visualMap-piecewise.pieces来定义每块范围

3.离散数据（类别性数据）:类别定义在visualMap-piecewise.categories中

既然是『数据』到『视觉元素』的映射，visualMap中可以指定数据的『哪个维度』映射到哪些『视觉元素』

例一：

option={visualMap:[{type:'piecewise'min:0,max:5000,dimension:3,//series.data的第四个维度（即value[3]）被映射seriesIndex:4,//对第四个系列进行映射。inRange:{//选中范围中的视觉配置color:['blue','#121122','red'],//定义了图形颜色映射的颜色列表，数据最小值映射到'blue'上，最大值映射到'red'上，其余自动线性计算symbolSize:[30,100]//定义了图形尺寸的映射范围，数据最小值映射到30上，最大值映射到100上，其余自动线性计算},outOfRange:{//选中范围外的视觉配置symbolSize:[30,100]}},...]};例二：

option={visualMap:[{...,inRange:{//选中范围中的视觉配置colorLightness:[0.2,1],//映射到明暗度上。也就是对本来的颜色进行明暗度处理。本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心symbolSize:[30,100]},...},...]};ECharts中的事件和行为在ECharts的图表中用户的操作将会触发相应的事件；开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。在ECharts3中绑定事件跟2一样都是通过on方法，但是事件名称比2更加简单了。ECharts3中，事件名称对应DOM事件名称，均为小写的字符串，如下是一个绑定点击操作的示例

myChart.on('click',function(params){console.log(params.name);//控制台打印数据的名称});在ECharts中事件分为两种类型，一种是用户鼠标操作点击，或者hover图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的'legendselectchanged'事件（这里需要注意切换图例开关是不会触发'legendselected'事件的），数据区域缩放时触发的'datazoom'事件等等

ECharts支持常规的鼠标事件类型，包括'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'事件；所有的鼠标事件包含参数params，这是一个包含点击图形的数据信息的对象，如下格式：

{componentType:string,//当前点击的图形元素所属的组件名称，其值如'series'、'markLine'、'markPoint'、'timeLine'等seriesType:string,//系列类型。值可能为：'line'、'bar'、'pie'等。当componentType为'series'时有意义seriesIndex:number,//系列在传入的option.series中的index。当componentType为'series'时有意义seriesName:string,//系列名称。当componentType为'series'时有意义name:string,//数据名，类目名dataIndex:number,//数据在传入的data数组中的indexdata:Object,//传入的原始数据项dataType:string,//sankey、graph等图表同时含有nodeData和edgeData两种data，dataType的值会是'node'或者'edge'，表示当前点击在node还是edge上；其他大部分图表中只有一种data，dataType无意义value:number|Array//传入的数据值color:string//数据图形的颜色。当componentType为'series'时有意义}如何区分鼠标点击到了哪里：

myChart.on('click',function(params){if(params.componentType==='markPoint'){//点击到了markPoint上if(params.seriesIndex===5){}//点击到了index为5的series的markPoint上}elseif(params.componentType==='series'){if(params.seriesType==='graph'){if(params.dataType==='edge'){}//点击到了graph的edge（边）上else{}//点击到了graph的node（节点）上}}});使用query只对指定的组件的图形元素的触发回调：

chart.on(eventName,query,handler);query可为string或者Object。如果为string表示组件类型。格式可以是'mainType'或者'mainType.subType'。例如：

chart.on('click','series',function(){...});chart.on('click','series.line',function(){...});chart.on('click','dataZoom',function(){...});chart.on('click','xAxis.category',function(){...});如果为Object，可以包含以下一个或多个属性，每个属性都是可选的：

{Index:number//组件indexName:string//组件nameId:string//组件iddataIndex:number//数据项indexname:string//数据项namedataType:string//数据项type，如关系图中的'node','edge'element:string//自定义系列中的el的name}可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等

myChart.on('click',function(parmas){$.get('detailq='+params.name,function(detail){myChart.setOption({series:[{name:'pie',data:[detail.data]//通过饼图表现单个柱子中的数据分布}]});});});组件交互的行为事件在ECharts中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在events文档中有列出。下面是监听一个图例开关的示例：

myChart.on('legendselectchanged',function(params){//图例开关的行为只会触发legendselectchanged事件varisSelected=params.selected[params.name];//获取点击图例的选中状态console.log((isSelected'选中了':'取消选中了')+'图例'+params.name);//在控制台中打印console.log(params.selected);//打印所有图例的状态});代码触发ECharts中组件的行为上面提到诸如'legendselectchanged'事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示tooltip，选中图例。在ECharts2.x是通过myChart.component.tooltip.showTip这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在ECharts3里改为通过调用myChart.dispatchAction({type:''})触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。

旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系

默认情况下会使用全局调色盘color分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：

在series.data.itemStyle中设置每个扇形块的样式/在series.levels.itemStyle中设置每一层的样式/在series.itemStyle中设置整个旭日图的样式。

上述三者的优先级是从高到低的，也就是说，配置了series.data.itemStyle的扇形块将会覆盖series.levels.itemStyle和series.itemStyle的设置

旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了levels配置项。它是一个数组，其中的第0项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级

旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节;当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过levels[0]配置;如果不需要数据下钻功能，可以通过将nodeClick设置为false关闭；或者将其设为'link'，并将data.link设为点击扇形块对应打开的链接

'descendant'（默认值）：高亮鼠标移动所在扇形块与其后代元素

'ancestor'：高亮鼠标所在扇形块与其祖先元素

'self'：仅高亮鼠标所在扇形块

'none'：不会淡化（downplay）其他元素

自定义系列（customseries），是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。echarts为什么会要支持自定义系列呢？echarts内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求echarts并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、数据区域缩放（dataZoom）、视觉映射（visualMap）等功能，尽量在echarts中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了自定义系列（customseries）

开发者自定义的图形元素渲染逻辑，是通过书写renderItem函数实现的

myChart.on('legendselectchanged',function(params){//图例开关的行为只会触发legendselectchanged事件varisSelected=params.selected[params.name];//获取点击图例的选中状态console.log((isSelected'选中了':'取消选中了')+'图例'+params.name);//在控制台中打印console.log(params.selected);//打印所有图例的状态});在渲染阶段，对于series.data中的每个数据项（为方便描述，这里称为dataItem)，会调用此renderItem函数。这个renderItem函数的职责，就是返回一个（或者一组）图形元素定义，图形元素定义中包括图形元素的类型、位置、尺寸、样式等。echarts会根据这些图形元素定义来渲染出图形元素

1.params：包含了当前数据信息（如seriesIndex、dataIndex等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）

2.api：是一些开发者可调用的方法集合（如api.value()、api.coord()）

renderItem函数须返回根据此dataItem绘制出的图形元素的定义信息；一般来说，renderItem函数的主要逻辑，是将dataItem里的值映射到坐标系上的图形元素。这一般需要用到renderItem.arguments.api中的两个函数：

1.api.value(...)，意思是取出dataItem中的数值。例如api.value(0)表示取出当前dataItem中第一个维度的数值

2.api.coord(...)，意思是进行坐标转换计算。例如varpoint=api.coord([api.value(0),api.value(1)])表示dataItem中的数值转换成坐标系上的点

有时候还需要用到api.size(...)函数，表示得到坐标系上一段数值范围对应的长度；返回值中样式的设置可以使用api.style(...)函数，他能得到series.itemStyle中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：api.style({fill:'green',stroke:'yellow'})；书写完renderItem方法后，自定义系列的90%工作就做完了。剩下的是一些精化工作

在直角坐标系（grid）、极坐标系（polar）中都有坐标轴；坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如在直角坐标系（grid）中使用自定义系列的开发者，需要设定data中的哪些维度会对应到x轴上，哪些维度会对应到y轴上。这件事通过encode来设定

option={series:[{type:'custom',renderItem:function(){...},encode:{x:[1,2],//data中『维度1』和『维度2』对应到X轴y:0//data中『维度0』对应到Y轴},data:[//维度0维度1维度2维度3[12,44,55,60],//这是第一个dataItem[53,31,21,56],//这是第二个dataItem[71,33,10,20],//这是第三个dataItem...]}]};设定tooltip当然，使用tooltip.formatter可以任意定制tooltip中的内容。但是还有更简单的方法，通过encode和dimensions来设定：

option={series:[{encode:{tooltip:[2,3]//表示『维度2』和『维度3』要显示到tooltip中（其他同上）},}]};超出坐标系范围的截取与dataZoom结合使用的时候，常常使用会设置dataZoom.filterMode为'weakFilter'。这个设置的意思是：当dataItem部分超出坐标系边界的时候，dataItem不会整体被过滤掉。例如：

option={dataZoom:{xAxisIndex:0,filterMode:'weakFilter'},series:[{...}]//(此处内容同上)};在这个例子中，『维度1』和『维度2』对应到X轴，dataZoom组件控制X轴的缩放。假如在缩放的过程中，某个dataItem的『维度1』超出了X轴的范围，『维度2』还在X轴的范围中，那么只要设置dataZoom.filterMode='weakFilter'，这个dataItem就不会被过滤掉，从而还能够使用renderItem绘制图形（可以使用上面提到过的echarts.graphic.clipRectByRect把图形绘制成被坐标系剪裁过的样子）

开发者如果使用到的话应注意，renderItem.arguments.params中的dataIndex和dataIndexInside是有区别的：

1.dataIndex指的dataItem在原始数据中的index

2.dataIndexInside指的是dataItem在当前数据窗口中的index。

chart.setOption({//...series:{type:'custom',renderItem:function(){//...return{type:'group',children:[{type:'circle'//...},{type:'circle',name:'aaa',info:12345,//用户指定的信息，可以在eventhandler访问到//...}]};}}});chart.on('click',{element:'aaa'},function(params){//当name为'aaa'的图形元素被点击时，此回调被触发console.log(params.info);});自定义矢量图形自定义系列能支持使用SVGPathData定义矢量路径。从而可以使用矢量图工具中做出的图形

原先echarts中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息；echartsv3.7以后，支持了富文本标签，能够：

1.定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等

2.对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等

3.在文本中使用图片做小图标或者背景

4.特定组合以上的规则，可以做出简单表格、分割线等效果

开始下面的介绍之前，先说明下面会使用的两个名词的含义：

1.文本块（TextBlock）：文本标签块整体

2.文本片段（TextFregment）：文本标签块中的部分文本

echarts提供了丰富的文本标签配置项，包括：

1.字体基本样式设置：fontStyle、fontWeight、fontSize、fontFamily

2.文字颜色：color

3.文字描边：textBorderColor、textBorderWidth

4.文字阴影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY

5.文本块或文本片段大小：lineHeight、width、height、padding

6.文本块或文本片段的对齐：align、verticalAlign

7.文本块或文本片段的边框、背景（颜色或图片）：backgroundColor、borderColor、borderWidth、borderRadius

8.文本块或文本片段的阴影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY

9.文本块的位置和旋转：position、distance、rotate

可以在各处的rich属性中定义文本片段样式。例如series-bar.label.rich

label:{//在文本中，可以对部分文本采用rich中定义样式；这里需要在文本中使用标记符号：`{styleName|textcontenttextcontent}`标记样式名；注意，换行仍是使用'\n'。formatter:['{a|这段文本采用样式a}','{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'].join('\n'),//这里是文本块的样式设置：color:'#333',fontSize:5,fontFamily:'Arial',borderWidth:3,backgroundColor:'#984455',padding:[3,10,10,5],lineHeight:20,rich:{//rich里是文本片段的样式设置a:{color:'red',lineHeight:10},b:{backgroundColor:{image:'xxx/xxx.jpg'},height:40},x:{fontSize:18,fontFamily:'MicrosoftYaHei',borderColor:'#449933',borderRadius:4},...}}注意：如果不定义rich，不能指定文字块的width和height

每个文本可以设置基本的字体样式：fontStyle、fontWeight、fontSize、fontFamily

可以设置文字的颜色color和边框的颜色textBorderColor、textBorderWidth

文本框可以设置边框和背景的样式：borderColor、borderWidth、backgroundColor、padding

文本片段也可以设置边框和背景的样式：borderColor、borderWidth、backgroundColor、padding

对于折线图、柱状图、散点图等，均可以使用label来设置标签。标签的相对于图形元素的位置，一般使用label.position、label.distance来配置

注意：position在不同的图中可取值有所不同。distance并不是在每个图中都支持

某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转；这种场景下，可以结合align和verticalAlign来调整标签位置

注意，逻辑是，先使用align和verticalAlign定位，再旋转

关于排版方式，每个文本片段，可以想象成CSS中的inline-block，在文档流中按行放置；每个文本片段的内容盒尺寸（contentboxsize），默认是根据文字大小决定的；但也可以设置width、height来强制指定。文本片段的边框盒尺寸（borderboxsize），由上述本身尺寸，加上文本片段的padding来得到；只有'n'是换行符，能导致换行。一行内，会有多个文本片段，每行的实际高度由lineHeight最大的文本片段决定，文本片段的lineHeight可直接在rich中指定，也可以在rich的父层级中统一指定而采用到rich的所有项中，如果都不指定，则取文本片段的边框盒尺寸（borderboxsize）；在一行的lineHeight被决定后，一行内，文本片段的竖直位置，由文本片段的verticalAlign来指定（这里和CSS中的规则稍有不同）：

'bottom'：文本片段的盒的底边贴住行底/'top'：文本片段的盒的顶边贴住行顶/'middle'：居行中

文本块的宽度，可以直接由文本块的width指定，否则由最长的行决定；宽度决定后，在一行中进行文本片段的放置；文本片段的align决定了文本片段在行中的水平位置：

首先，从左向右连续紧靠放置align为'left'的文本片段盒

然后，从右向左连续紧靠放置align为'right'的文本片段盒

最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置

关于文字在文本片段盒中的位置：

如果align为'center'，则文字在文本片段盒中是居中的

如果align为'left'，则文字在文本片段盒中是居左的

如果align为'right'，则文字在文本片段盒中是居右的

文本片段的backgroundColor可以指定为图片后，就可以在文本中使用图标了：

rich:{Sunny:{backgroundColor:{//这样设定backgroundColor就可以是图片了image:'./data/asset/img/weather/sunny_128.png'},height:30//可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到}}分割线实际是用border实现的：

//标题文字居左formatter:'{titleBg|LeftTitle}',rich:{titleBg:{backgroundColor:'#000',height:30,borderRadius:[5,5,0,0],padding:[0,10,0,10],width:'100%',color:'#eee'}}//标题文字居中；这个实现有些tricky，但是能够不引入更复杂的排版规则而实现这个效果formatter:'{tc|CenterTitle}{titleBg|}',rich:{titleBg:{align:'right',backgroundColor:'#000',height:30,borderRadius:[5,5,0,0],padding:[0,10,0,10],width:'100%',color:'#eee'}}简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了

ECharts可以在服务端进行渲染；服务端渲染可以使用流行的headless环境，例如puppeteer、headlesschrome、node-canvas、jsdom、PhantomJS等

浏览器端图表库大多会选择SVG或者Canvas进行渲染；对于绘制图表来说，这两种技术往往是可替换的，效果相近；但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。ECharts从初始一直使用Canvas绘制图表（除了对IE8-使用VML）。而EChartsv4.0发布了SVG渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置renderer参数为'canvas'或'svg'即可指定渲染器，比较方便

SVG和Canvas这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于ECharts底层库ZRender的抽象和实现，形成可互换的SVG渲染器和Canvas渲染器

一般来说，Canvas更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效；但是，在不少场景中，SVG具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊；例如，我们在一些硬件环境中分别使用Canvas渲染器和SVG渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到性能对比结果：SVG渲染器相比Canvas渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前SVG渲染器的性能还比不过Canvas渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间

选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。

1.在软硬件环境较好，数据量不大的场景下（例如PC端做商务报表），两种渲染器都可以适用，并不需要太多纠结

2.在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：

（1）在须要创建很多ECharts实例且浏览器易崩溃的情况下（可能是因为Canvas数量多导致内存占用超出手机承受能力），可以使用SVG渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如水球图等，SVG渲染器可能效果更好。

（2）数据量很大、较多交互时，可以选用Canvas渲染器

注：除了某些特殊的渲染可能依赖Canvas：如炫光尾迹特效、带有混合效果的热力图等，绝大部分功能SVG都是支持的。此外，目前的SVG版中，富文本、材质功能尚未实现

ECharts默认使用Canvas渲染；如果想使用SVG渲染，ECharts代码中须包括有SVG渲染器模块

1.ECharts的预构建文件中，常用版和完整版已经包含了SVG渲染器，可直接使用。而精简版没有包括

2.如果在线自定义构建ECharts，则需要勾上页面下方的“SVG渲染”

3.如果线下自定义构建ECharts，则须引入SVG渲染器模块，即：

import'zrender/lib/svg/svg';然后，我们就可以在代码中，初始化图表实例时，传入参数选择渲染器类型：

//使用Canvas渲染器（默认）varchart=echarts.init(containerDom,null,{renderer:'canvas'});//等价于：varchart=echarts.init(containerDom);//使用SVG渲染器varchart=echarts.init(containerDom,null,{renderer:'svg'});在图表中支持无障碍访问W3C制定了无障碍富互联网应用规范集（WAI-ARIA，theAccessibleRichInternetApplicationsSuite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts4.0遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。默认关闭，需要通过将aria.show设置为true开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述

对于配置项：

对于有些图表，默认生成的数据点的描述并不足以表现整体的信息；比如散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息；这时候，用户可以通过aria.description配置项指定图表的整体描述

除了整体性修改描述外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改；生成描述的基本流程为，如果aria.show设置为true，则生成无障碍访问描述，否则不生成。如果定义了aria.description，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用aria.description完全覆盖。

使用模板拼接时，先根据是否存在标题title.text决定使用aria.general.withTitle还是aria.general.withoutTitle作为整体性描述。其中，aria.general.withTitle配置项包括模板变量'{title}'，将会被替换成图表标题。也就是说，如果aria.general.withTitle被设置为'图表的标题是：{title}。'，则如果包含标题'价格分布图'，这部分的描述为'图表的标题是：价格分布图。'。

拼接完标题之后，会依次拼接系列的描述（aria.series），和每个系列的数据的描述（aria.data）。同样，每个模板都有可能包括模板变量，用以替换实际的值

EChartsGL（后面统一简称GL）为ECharts补充了丰富的三维可视化组件，这里我们会简单介绍如何基于GL实现一些常见的三维可视化作品。实际上如果你对ECharts有一定了解的话，也可以很快的上手GL，GL的配置项完全是按照ECharts的标准和上手难度来设计的

为了不再增加已经很大了的ECharts完整版的体积，我们将GL作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用GL里的各种组件，只需要在引入echarts.min.js的基础上再引入一个echarts-gl.min.js。你可以从官网下载最新版的GL，然后在页面中通过标签引入：

如果你的项目使用webpack或者rollup来打包代码的话，也可以通过npm安装后引入

小提示：在GL中我们对除了globe之外所有的三维组件和系列都加了3D的后缀用以区分，例如三维的散点图就是scatter3D，三维的地图就是map3D等

varoption={grid3D:{},//需要注意的是我们不能跟grid一样省略grid3DxAxis3D:{},//默认情况下,x,y,z分别是从0到1的数值轴yAxis3D:{},zAxis3D:{}}跟二维的笛卡尔坐标系一样，每个轴都会有多种类型，默认是数值轴，如果需要是类目轴的话，简单的设置为type:'category'就行了

下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份三维的正态分布数据放在data数组中

functionmakeGaussian(amplitude,x0,y0,sigmaX,sigmaY){returnfunction(amplitude,x0,y0,sigmaX,sigmaY,x,y){varexponent=-((Math.pow(x-x0,2)/(2*Math.pow(sigmaX,2)))+(Math.pow(y-y0,2)/(2*Math.pow(sigmaY,2))));returnamplitude*Math.pow(Math.E,exponent);}.bind(null,amplitude,x0,y0,sigmaX,sigmaY);}vargaussian=makeGaussian(50,0,0,20,20);//创建一个高斯分布函数vardata=[];for(vari=0;i<1000;i++){//x,y随机分布varx=Math.random()*100-50;vary=Math.random()*100-50;varz=gaussian(x,y);data.push([x,y,z]);}生成的正态分布的数据大概长这样：

[[46.74395071259907,-33.88391024738553,0.7754030099768191],[-18.45302873809771,16.88114775416834,22.87772504105404],[2.9908128281121336,-0.027699444453467947,49.44400635911886],...]每一项都包含了x,y,z三个值，这三个值会分别被映射到笛卡尔坐标系的x轴，y轴和z轴上。然后我们可以使用GL提供的scatter3D系列类型把这些数据画成三维空间中正态分布的点

option={grid3D:{},xAxis3D:{},yAxis3D:{},zAxis3D:{max:100},series:[{type:'scatter3D',data:data}]}使用真实数据的三维散点图接下来我们来看一个使用真实多维数据的三维散点图例子；格式化一下可以看到这份数据是很传统转成JSON后的表格格式；第一行是每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份

[["Income","LifeExpectancy","Population","Country","Year"],[815,34.05,351014,"Australia",1800],[1314,39,645526,"Canada",1800],[985,32,321675013,"China",1800],[864,32.2,345043,"Cuba",1800],[1244,36.5731262,977662,"Finland",1800],...]在ECharts4中我们可以使用dataset组件非常方便地引入这份数据

$.get('data/asset/data/life-expectancy-table.json',function(data){myChart.setOption({grid3D:{},xAxis3D:{},yAxis3D:{},zAxis3D:{},dataset:{source:data},series:[{type:'scatter3D',symbolSize:2.5}]})});默认会把前三列，也就是收入（Income），人均寿命（LifeExpectancy），人口（Population）分别放到x、y、z轴上；使用encode属性我们还可以将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码；例如我们将x轴换成是国家（Country），y轴换成年份（Year），z轴换成收入（Income），可以看到不同国家不同年份的人均收入分布

myChart.setOption({grid3D:{},xAxis3D:{type:'category'},//因为x轴和y轴都是类目数据，所以需要设置type:'category'保证正确显示数据yAxis3D:{type:'category'},zAxis3D:{},dataset:{source:data},series:[{type:'scatter3D',symbolSize:2.5,encode:{//维度的名字默认就是表头的属性名x:'Country',y:'Year',z:'Income',tooltip:[0,1,2,3,4]}}]});利用visualMap组件对三维散点图进行视觉编码刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用ECharts内置的visualMap组件我们可以继续将第四个维度编码成颜色

myChart.setOption({grid3D:{viewControl:{projection:'orthographic'}//使用正交投影},xAxis3D:{type:'category'},//因为x轴和y轴都是类目数据，所以需要设置type:'category'保证正确显示数据yAxis3D:{type:'log'},zAxis3D:{},visualMap:{calculable:true,max:100,dimension:'LifeExpectancy',//维度的名字默认就是表头的属性名inRange:{color:['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},dataset:{source:data},series:[{type:'scatter3D',symbolSize:5,encode:{x:'Country',y:'Population',z:'Income',tooltip:[0,1,2,3,4]}//维度的名字默认就是表头的属性名}]})这段代码中我们又在刚才的例子基础上加入了visualMap组件，将LifeExpectancy这一列数据映射到了不同的颜色；除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误

当然，除了visualMap组件，还可以利用其它的ECharts内置组件并且充分利用这些组件的交互效果，比如legend。也可以像三维散点图和散点矩阵结合使用这个例子一样实现二维和三维的系列混搭；在实现GL的时候我们尽可能地把WebGL和Canvas之间的差异屏蔽了到最小，从而让GL的使用可以更加方便自然

除了散点图，我们也可以通过GL在三维的笛卡尔坐标系上绘制其它类型的三维图表；比如刚才例子中将scatter3D类型改成bar3D就可以变成一个三维的柱状图；机器学习中会用到的三维曲面图surface，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图

为了兼容小程序Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用ECharts

首先，下载GitHub上的ecomfe/echarts-for-weixin项目；其中，ec-canvas是我们提供的组件，其他文件是如何使用该组件的示例；ec-canvas目录下有一个echarts.js，默认我们会在每次echarts-for-weixin项目发版的时候替换成最新版的ECharts。如有必要，可以自行从ECharts项目中下载最新发布版，或者从官网自定义构建以减小文件大小

在创建项目后，可以将下载的ecomfe/echarts-for-weixin项目完全替换新建的项目，然后将修改代码；或者仅拷贝ec-canvas目录到新建的项目下，然后做相应的调整。如果采用完全替换的方式，需要将project.config.json中的appid替换成在公众平台申请的项目id。pages目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在app.json中删除对应页面。如果仅拷贝ec-canvas目录，则可以参考pages/bar目录下的几个文件的写法。下面，我们具体地说明

首先，在pages/bar目录下新建以下几个文件：index.js、index.json、index.wxml、index.wxss。并且在app.json的pages中增加'pages/bar/index'

index.json配置如下：

{"usingComponents":{"ec-canvas":"../../ec-canvas/ec-canvas"}}这一配置的作用是，允许我们在pages/bar/index.wxml中使用组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。

index.wxml中，我们创建了一个组件，内容如下：

其中ec是一个我们在index.js中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js的结构如下：

functioninitChart(canvas,width,height){constchart=echarts.init(canvas,null,{width:width,height:height});canvas.setChart(chart);varoption={...};chart.setOption(option);returnchart;}Page({data:{ec:{onInit:initChart}}});这对于所有ECharts图表都是通用的，用户只需要修改上面option的内容，即可改变图表

ECharts中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。

1.Tooltip

2.图片

3.多个zlevel分层

此外，目前还有一些bug尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的bug包括：

1.安卓平台：transform的问题（会影响关系图边两端的标记位置、旭日图文字位置等）

2.iOS平台：半透明略有变深的问题

3.iOS平台：渐变色出现在定义区域之外的地方

全局echarts对象，在script标签引入echarts.js文件后获得，或者在AMD环境中通过require('echarts')获得；不能在单个容器上初始化多个ECharts实例

创建一个ECharts实例，返回echartsInstance，不能在单个容器上初始化多个ECharts实例

1.dom：实例容器，一般是一个具有高宽的div元素。

注：如果div是隐藏的，ECharts可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用echartsInstance.resize调整尺寸

ECharts3中支持直接使用canvas元素作为容器，这样绘制完图表可以直接将canvas作为图片应用到其它地方，例如在WebGL中作为贴图，这跟使用echartsInstance.getDataURL生成图片链接相比可以支持图表的实时刷新

2.theme

应用的主题。可以是一个主题的配置对象，也可以是使用已经通过echarts.registerTheme注册的主题名称

3.opts

附加参数。有下面几个可选项：

devicePixelRatio：设备像素比，默认取浏览器的值window.devicePixelRatio

renderer：渲染器，支持'canvas'或者'svg'

width：可显式指定实例宽度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取dom（实例容器）的宽度

height：可显式指定实例高度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取dom（实例容器）的高度

多个图表实例实现联动

group：group的id，或者图表实例的数组

//分别设置每个实例的groupidchart1.group='group1';chart2.group='group1';echarts.connect('group1');//或者可以直接传入需要联动的实例数组echarts.connect([chart1,chart2]);echarts.disconnect解除图表实例的联动，如果只需要移除单个实例，可以将通过将该图表实例group设为空

销毁实例，实例销毁后无法再被使用

获取dom容器上的实例

注册可用的地图，必须在包括geo组件或者map图表类型的时候才能使用

1.mapName:地图名称，在geo组件或者map图表类型中设置的map对应的就是该值

2.geoJson:GeoJson格式的数据

3.specialAreas:可选；将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看

echarts.registerMap('USA',usaJson,{Alaska:{//把阿拉斯加移到美国主大陆左下方left:-131,//左上角经度top:25,//左上角纬度width:15//经度横跨的范围},Hawaii:{left:-110,top:28,width:5},//夏威夷'PuertoRico':{left:-76,top:26,width:2}//波多黎各});echarts.getMap获取已注册的地图，返回的对象类型如下

{geoJson:Object,//地图的geoJson数据specialAreas:Object//地图的特殊区域，见registerMap}echarts.registerTheme注册主题，用于初始化实例的时候指定

输入一组点，和一个矩形，返回被矩形截取过的点

(points:Array.>,//要被截取的点列表，如[[23,44],[12,15],...]rect:{//用于截取点的矩形x:number,y:number,width:number,height:number})=>Array.>//截取结果echarts.graphic.clipRectByRect输入两个矩形，返回第二个矩形截取第一个矩形的结果

(targetRect:{//要被截取的矩形x:number,y:number,width:number,height:number},rect:{//用于截取点的矩形x:number,y:number,width:number,height:number})=>{//截取结果x:number,y:number,width:number,height:number}注意：如果矩形完全被截干净，会返回undefined

通过echarts.init创建的实例

图表的分组，用于联动

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts找到两组数据之间的差异然后通过合适的动画去表现数据的变化

注：ECharts2.x中的通过addData,setSeries方法设置配置项的方式将不再支持，在ECharts3中统一使用setOption

调用方式：

chart.setOption(option,notMerge,lazyUpdate);或者chart.setOption(option,{notMerge:...,lazyUpdate:...,silent:...});1.option：图表的配置项和数据

2.notMerge：可选，是否不跟之前设置的option进行合并，默认为false，即合并

3.lazyUpdate：可选，在设置完option后是否不立即更新图表，默认为false，即立即更新

4.silent：可选，阻止调用setOption时抛出事件，默认为false，即抛出事件

获取ECharts实例容器的宽度

获取ECharts实例容器的高度

获取ECharts实例容器的dom节点

获取当前实例中维护的option对象，返回的option对象中包含了用户多次setOption合并得到的配置项和数据，也记录了用户交互的状态，例如图例的开关，数据区域缩放选择的范围等等。所以从这份option可以恢复或者得到一个新的一模一样的实例

注意：返回的option每个组件的属性值都统一是一个数组，不管setOption传进来的时候是单个组件的对象还是多个组件的数组。如下形式：

{title:[{...}],legend:[{...}],grid:[{...}]}另外不推荐下面这种写法：

varoption=myChart.getOption();option.visualMap[0].inRange.color=...;myChart.setOption(option);因为getOption获取的是已经合并过默认值了的，所以在修改了某些配置项后会导致原本是根据这些配置项值去设置的默认值失效；因此我们更推荐通过setOption去修改部分配置

myChart.setOption({visualMap:{inRange:{color:...}}})echartsInstance.resize改变图表尺寸，在容器大小发生改变时需要手动调用

opts：可缺省。有下面几个可选项：

1.width：可显式指定实例宽度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取dom（实例容器）的宽度

2.height：可显式指定实例高度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取dom（实例容器）的高度

silent：是否禁止抛出事件。默认为false

Tip:有时图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用resize方法获取正确的高宽并且刷新画布，或者在opts中显示指定图表高宽。

触发图表行为，例如图例开关legendToggleSelect,数据区域缩放dataZoom，显示提示框showTip等等，payload参数可以通过batch属性同时触发多个行为

注：在ECharts2.x是通过myChart.component.tooltip.showTip这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。因此在ECharts3里统一改为dispatchAction的形式

myChart.dispatchAction({type:'dataZoom',start:20,end:30});myChart.dispatchAction({//可以通过batch参数批量分发多个actiontype:'dataZoom',batch:[{//第一个dataZoom组件start:20,end:30},{//第二个dataZoom组件dataZoomIndex:1,start:10,end:20}]})echartsInstance.on绑定事件处理函数；ECharts中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是调用dispatchAction后触发的事件。每个action都会有对应的事件；如果事件是外部dispatchAction后触发，并且action中有batch属性触发批量的行为，则相应的响应事件参数里也会把属性都放在batch属性中

1.eventName：事件名称，全小写，例如'click'，'mousemove','legendselected'

注：ECharts2.x中会使用config对象中的CLICK等属性作为事件名称。在ECharts3中统一使用跟dom事件一样的全小写字符串作为事件名

2.query：可选的过滤条件，能够只在指定的组件或元素上进行响应。可为string或Object；如果为string表示组件类型，格式可以是'mainType'或者'mainType.subType'。例如：

{Index:number//组件indexName:string//组件nameId:string//组件iddataIndex:number//数据项indexname:string//数据项namedataType:string//数据项type，如关系图中的'node','edge'element:string//自定义系列中的el的name}例如：

4.context：可选。回调函数内部的context，即this的指向

解绑事件处理函数

eventName：事件名称

handler：可选，可以传入需要解绑的处理函数，不传的话解绑所有该类型的事件函数

转换坐标系上的点到像素坐标值

(finder:{//finder用于指示『使用哪个坐标系进行转换』；通常地，可以使用index或者id或者name来定位seriesIndex:number,seriesId:string,seriesName:string,geoIndex:number,geoId:string,geoName:string,xAxisIndex:number,xAxisId:string,xAxisName:string,yAxisIndex:number,yAxisId:string,yAxisName:string,gridIndex:number,gridId:stringgridName:string},value:Array|string//要被转换的值)=>Array|string//转换的结果为像素坐标值，以echarts实例的dom节点的左上角为坐标[0,0]点例1：在地理坐标系（geo）上，把某个点的经纬度坐标转换成为像素坐标

//[128.3324,89.5344]表示[经度，纬度]，使用第一个geo坐标系进行转换：chart.convertToPixel('geo',[128.3324,89.5344]);//参数'geo'等同于{geoIndex:0}//使用第二个geo坐标系进行转换：chart.convertToPixel({geoIndex:1},[128.3324,89.5344]);//使用id为'bb'的geo坐标系进行转换：chart.convertToPixel({geoId:'bb'},[128.3324,89.5344]);例2：在直角坐标系（cartesian，grid）上，把某个点的坐标转换成为像素坐标

//[300,900]表示该点x轴上对应刻度值300，y轴上对应刻度值900；一个grid可能含有多个xAxis和多个yAxis，任何一对xAxis-yAxis形成一个cartesian；使用第三个xAxis和id为'y1'的yAxis形成的cartesian进行转换：chart.convertToPixel({xAxisIndex:2,yAxisId:'y1'},[300,900]);//使用id为'g1'的grid的第一个cartesian进行转换：chart.convertToPixel({gridId:'g1'},[300,900]);例3：把某个坐标轴的点转换成像素坐标：

//id为'x0'的xAxis的刻度3000位置所对应的横向像素位置：chart.convertToPixel({xAxisId:'x0'},3000);//返回一个number//第二个yAxis的刻度600位置所对应的纵向像素位置：chart.convertToPixel({yAxisIndex:1},600);//返回一个number例4：把关系图（graph）的点转换成像素坐标：

//因为每个graphseries自己持有一个坐标系，所以我们直接在finder中指定series：chart.convertToPixel({seriesIndex:0},[2000,3500]);chart.convertToPixel({seriesId:'k2'},[100,500]);例5：在某个系列所在的坐标系（无论是cartesian、geo、graph等）中，转换某点成像素坐标：

//使用第一个系列对应的坐标系：chart.convertToPixel({seriesIndex:0},[128.3324,89.5344]);//使用id为'k2'的系列所对应的坐标系：chart.convertToPixel({seriesId:'k2'},[128.3324,89.5344]);echartsInstance.convertFromPixel转换像素坐标值到逻辑坐标系上的点。是convertToPixel的逆运算

(finder:{//finder用于指示『使用哪个坐标系进行转换』；通常地，可以使用index或id或name来定位seriesIndex:number,seriesId:string,seriesName:string,geoIndex:number,geoId:string,geoName:string,xAxisIndex:number,xAxisId:string,xAxisName:string,yAxisIndex:number,yAxisId:string,yAxisName:string,gridIndex:number,gridId:stringgridName:string},value:Array|string//要被转换的值，为像素坐标值，以echarts实例的dom节点的左上角为坐标[0,0]点)=>Array|string//转换的结果，为逻辑坐标值echartsInstance.containPixel判断给定的点是否在指定的坐标系或者系列上；目前支持在这些坐标系和系列上进行判断：grid,polar,geo,series-map,series-graph,series-pie

//判断[23,44]点是否在geoIndex为0的geo坐标系上chart.containPixel('geo',[23,44]);//'geo'等同于{geoIndex:0}//判断[23,44]点是否在gridId为'z'的grid上chart.containPixel({gridId:'z'},[23,44]);//判断[23,44]点是否在index为1，4，5的系列上chart.containPixel({seriesIndex:[1,4,5]},[23,44]);//判断[23,44]点是否在index为1，4，5的系列或者gridName为'a'的grid上chart.containPixel({seriesIndex:[1,4,5],gridName:'a'},[23,44]);echartsInstance.showLoading显示加载动画效果；可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用hideLoading隐藏加载动画

1.type：可选，加载动画类型，目前只有一种'default'

2.opts：可选，加载动画配置项，跟type有关，下面是默认配置项：

default:{text:'loading',color:'#c23531',textColor:'#000',maskColor:'rgba(255,255,255,0.8)',zlevel:0}echartsInstance.hideLoading隐藏动画加载效果

(opts:{type:string,//导出的格式，可选png,jpegpixelRatio:number,//导出的图片分辨率比例，默认为1backgroundColor:string,//导出的图片背景色，默认使用option里的backgroundColorexcludeComponents:Array.//忽略组件的列表，例如要忽略toolbox就是['toolbox']})=>string导出图表图片，返回一个base64的URL，可以设置为Image的src

varimg=newImage();img.src=myChart.getDataURL({pixelRatio:2,backgroundColor:'#fff'});echartsInstance.getConnectedDataURL导出联动的图表图片，返回一个base64的url，可以设置为Image的src。导出图片中每个图表的相对位置跟容器的相对位置有关

(opts:{type:string,//导出的格式，可选png,jpegpixelRatio:number,//导出的图片分辨率比例，默认为1backgroundColor:string,//导出的图片背景色，默认使用option里的backgroundColorexcludeComponents:Array.//忽略组件的列表，例如要忽略toolbox就是['toolbox']})=>stringechartsInstance.appendData此接口用于在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。appendData接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分

(opts:{seriesIndex:string,//要增加数据的系列序号data:Array|TypedArray,//增加的数据})=>string注意：

1.现在不支持系列（series）使用dataset同时使用appendData，只支持系列使用自己的series.data时使用appendData

2.目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有：ECharts基础版本的散点图（scatter）和线图（lines）。EChartsGL的散点图（scatterGL）、线图（linesGL）和可视化建筑群（polygons3D）

清空当前实例，会移除实例中所有的组件和图表。清空后调用getOption方法返回一个{}空对象

当前实例是否已经被释放

销毁实例，销毁后实例无法再被使用

ECharts中支持的图表行为，通过dispatchAction触发。

注：代码中的:表示该属性是可选的。EVENT:是action对应触发的事件

高亮指定的数据图形；通过seriesName或者seriesIndex指定系列，如果要再指定某个数据可以再指定dataIndex或者name

选中图例

dispatchAction({type:'legendSelect',name:string//图例名称})action.legend.legendUnSelect取消选中图例

dispatchAction({type:'legendUnSelect',name:string//图例名称})action.legend.legendToggleSelect切换图例的选中状态

dispatchAction({type:'legendToggleSelect',name:string//图例名称})action.legend.legendScroll控制图例的滚动。当legend.type为'scroll'时有效

显示提示框；有下面两种使用方式：

1指定在相对容器的位置处显示提示框，如果指定的位置无法显示则无效

dispatchAction({type:'showTip',x:number,//屏幕上的x坐标y:number,//屏幕上的y坐标position:Array.|string|Function//本次显示tooltip的位置，只在本次action中生效，缺省则使用option中定义的tooltip位置})2指定数据图形，根据tooltip的配置项显示提示框。

dispatchAction({type:'showTip',seriesIndex:number,//系列的index，在tooltip的trigger为axis的时候可选dataIndex:number,//数据的index，如果不指定也可以通过name属性根据名称指定数据name:string,//可选，数据名称，在有dataIndex的时候忽略position:Array.|string|Function,//本次显示tooltip的位置，只在本次action中生效，缺省则使用option中定义的tooltip位置})参数position同tooltip.position相同

隐藏提示框

数据区域缩放

dispatchAction({type:'dataZoom',dataZoomIndex:number,//可选，dataZoom组件的index，多个dataZoom组件时有用，默认为0start:number,//开始位置的百分比，0-100end:number,//结束位置的百分比，0-100startValue:number,//开始位置的数值endValue:number//结束位置的数值})action.dataZoom.takeGlobalCursor启动或关闭toolbox中dataZoom的刷选状态

选取映射的数值范围

重置option

选中指定的饼图扇形

dispatchAction({type:'pieSelect',seriesIndex:number|Array,//可选，系列index，可以是一个数组指定多个系列seriesName:string|Array,//可选，系列名称，可以是一个数组指定多个系列dataIndex:number,//数据的index，如果不指定也可以通过name属性根据名称指定数据name:string//可选，数据名称，在有dataIndex的时候忽略})action.pie.pieUnSelect取消选中指定的饼图扇形

dispatchAction({type:'pieUnSelect',seriesIndex:number|Array,//可选，系列index，可以是一个数组指定多个系列seriesName:string|Array,//可选，系列名称，可以是一个数组指定多个系列dataIndex:number,//数据的index，如果不指定也可以通过name属性根据名称指定数据name:string//可选，数据名称，在有dataIndex的时候忽略})action.pie.pieToggleSelect切换指定的饼图扇形选中状态

选中指定的地图区域

dispatchAction({type:'geoSelect',seriesIndex:number|Array,//可选，系列index，可以是一个数组指定多个系列seriesName:string|Array,//可选，系列名称，可以是一个数组指定多个系列dataIndex:number,//数据的index，如果不指定也可以通过name属性根据名称指定数据name:string//可选，数据名称，在有dataIndex的时候忽略})action.geo.geoUnSelect取消选中指定的地图区域

dispatchAction({type:'geoUnSelect',seriesIndex:number|Array,//可选，系列index，可以是一个数组指定多个系列seriesName:string|Array,//可选，系列名称，可以是一个数组指定多个系列dataIndex:number,//数据的index，如果不指定也可以通过name属性根据名称指定数据name:string//可选，数据名称，在有dataIndex的时候忽略})action.geo.geoToggleSelect切换指定的地图区域选中状态

dispatchAction({type:'mapSelect',seriesIndex:number|Array,//可选，系列index，可以是一个数组指定多个系列seriesName:string|Array,//可选，系列名称，可以是一个数组指定多个系列dataIndex:number,//数据的index，如果不指定也可以通过name属性根据名称指定数据name:string//可选，数据名称，在有dataIndex的时候忽略})action.map.mapUnSelect取消选中指定的地图区域

dispatchAction({type:'mapUnSelect',seriesIndex:number|Array,//可选，系列index，可以是一个数组指定多个系列seriesName:string|Array,//可选，系列名称，可以是一个数组指定多个系列dataIndex:number,//数据的index，如果不指定也可以通过name属性根据名称指定数据name:string//可选，数据名称，在有dataIndex的时候忽略})action.map.mapToggleSelect切换指定的地图区域选中状态

将指定的节点以及其所有邻接节点高亮

dispatchAction({type:'focusNodeAdjacency',//使用seriesId或seriesIndex或seriesName来定位seriesseriesId:'xxx',seriesIndex:0,seriesName:'nnn',//使用dataIndex来定位节点dataIndex:12})最后会抛出focusNodeAdjacency事件

dispatchAction({type:'unfocusNodeAdjacency',//使用seriesId或seriesIndex或seriesName来定位series.seriesId:'xxx',seriesIndex:0,seriesName:'nnn'})最后会抛出unfocusNodeAdjacency事件

触发此action可设置或删除chart中的选框，例如：

myChart.dispatchAction({type:'brush',areas:[//areas表示选框的集合，可以指定多个选框；如果areas为空，则删除所有选框；注意这并非增量接口而是全量接口，所以应包括所有的选框{//选框一：指定此选框是“坐标系选框”，属于index为0的geo坐标系；也可以通过xAxisIndex或yAxisIndex来指定此选框属于直角坐标系；如果没有指定，则此选框属于“全局选框”，不属于任何坐标系；属于『坐标系选框』，可以随坐标系一起缩放平移。属于全局的选框不行geoIndex:0,//xAxisIndex:0,//yAxisIndex:0,brushType:'polygon',//指定选框的类型。可以为'polygon','rect','lineX','lineY'range:[//如果是“全局选框”，则使用range来描述选框的范围（里面是像素坐标）...],coordRange:[//如果是“坐标系选框”，则使用coordRange来指定选框的范围（里面是坐标系坐标）[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]//这个例子中，因为指定了geoIndex，所以coordRange里单位是经纬度]},...//选框二、三、四、...]});其中，areas中的range和coordRange的格式，根据brushType不同而不同：

1.brushType为'rect'range和coordRange的格式为：[[minX,maxX],[minY,maxY]]

2.brushType为'lineX'或'lineY'range和coordRange的格式为：[min,maxX]

3.brushType为'polygon'range和coordRange的格式为：[[point1X,point1X],[point2X,point2X],...]

range和coordRange的区别是：

1.当此选框为『全局选框』时，使用range。

2.当此选框为『坐标系选框』时（即指定了geoIndex或xAxisIndex或yAxisIndex时），使用coordRange。

3.range的单位为像素，coordRange的单位为坐标系单位，比如geo中，coordRange单位为经纬度，直角坐标系中，coordRange单位为对应轴的数据的单位

刷选模式的开关。使用此action可将当前鼠标变为可刷选状态；事实上，点击toolbox中的brush按钮时，就是通过这个action，将当前普通鼠标变为刷选器的

此action对应的事件为globalCursorTaken

api.dispatchAction({type:'takeGlobalCursor',key:'brush',//如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”brushOption:{brushType:string,//参见brush组件的brushType。如果设置为false则关闭“可刷选状态”brushMode:string//参见brush组件的brushMode。如果不设置，则取brush组件的brushMode设置}});events在ECharts中主要通过on方法添加事件处理函数，该文档描述了所有ECharts的事件列表；ECharts中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是调用dispatchAction后触发的事件

myChart.on('click',function(params){console.log(params);});myChart.on('legendselectchanged',function(params){console.log(params);});chart.on('click','series.line',function(params){console.log(params);});chart.on('mouseover',{seriesIndex:1,name:'xx'},function(params){console.log(params);});events.鼠标事件鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下，其它图表诸如饼图可能会有部分附加参数。例如饼图会有percent属性表示百分比，具体见各个图表类型的labelformatter回调函数的params

ACTION:legendToggleSelect切换图例选中状态后的事件；图例组件用户切换图例开关会触发该事件

{type:'legendselectchanged',name:string//切换的图例名称selected:Object//所有图例的选中状态表}events.legendselectedACTION:legendSelect图例选中后的事件

{type:'legendselected',name:string//切换的图例名称selected:Object//所有图例的选中状态表}注：ECharts2.x中用户开关图例对应的事件从legendselected改为legendselectchanged

ACTION:legendUnSelect图例取消选中后的事件

{type:'legendunselected',name:string//切换的图例名称selected:Object//所有图例的选中状态表}events.legendscrollACTION:legendscroll图例滚动事件

{type:'legendscroll',scrollDataIndex:numberlegendId:string}events.datazoomACTION:dataZoom

数据区域缩放后的事件

{type:'datazoom',start:number//缩放的开始位置的百分比，0-100end:number//缩放的结束位置的百分比，0-100startValue:number//缩放的开始位置的数值，只有在工具栏缩放行为的事件中存在endValue:number//缩放的结束位置的数值，只有在工具栏缩放行为的事件中存在}events.datarangeselectedACTION:selectDataRange视觉映射组件中，range值改变后触发的事件

{type:'timelineplaychanged',playState:boolean//播放状态，true为自动播放}events.restoreACTION:restore重置option事件

{type:'restore'}events.dataviewchanged工具栏中数据视图的修改事件

{type:'dataviewchanged'}events.magictypechanged工具栏中动态类型切换的切换事件

{type:'magictypechanged',currentType:string//点击切换的当前类型，同echarts2.x中的type属性}events.geoselectchangedACTION:geoToggleSelect；geo中地图区域切换选中状态的事件，用户点击选中会触发该事件

{type:'geoselectchanged',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}events.geoselectedACTION:geoSelect；geo中地图区域选中后的事件；使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用geoselectchanged）

{type:'geoselected',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}events.geounselectedACTION:geoUnSelect；geo中地图区域取消选中后的事件；使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用geoselectchanged）

{type:'geounselected',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}events.pieselectchangedACTION:pieToggleSelect；series-pie中饼图扇形切换选中状态的事件；用户点击选中会触发该事件

{type:'pieselectchanged',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}注：该事件同ECharts2中的pieSelected事件相同

ACTION:pieSelect；series-pie中饼图扇形选中后的事件；使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用pieselectchanged）

{type:'pieselected',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}注：ECharts2.x中用户开关图例对应的事件从pieselected改为pieselectchanged

ACTION:pieUnSelect；series-pie中饼图扇形取消选中后的事件；使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用pieselectchanged）

{type:'pieunselected',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}events.mapselectchangedACTION:mapToggleSelect；series-map中地图区域切换选中状态的事件；用户点击选中会触发该事件

{type:'mapselectchanged',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}注：该事件同ECharts2中的mapSelected事件相同

ACTION:mapSelect；series-map中地图区域选中后的事件；使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用mapselectchanged）

{type:'mapselected',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}注：ECharts2.x中用户开关图例对应的事件从mapselected改为mapselectchanged

ACTION:mapUnSelect；series-map中地图区域取消选中后的事件；使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用mapselectchanged）

{type:'mapunselected',seriesId:string//系列ID，可以在option中传入name:name,//数据名称selected:Object//所有数据的选中状态表}events.axisareaselected平行坐标轴(Parallel)范围选取事件；当进行坐标轴范围选取时，可以用如下方式获取当前高亮的线所对应的dataindices（即series的data中的序号列表）

chart.on('axisareaselected',function(){varseries0=chart.getModel().getSeries()[0];varseries1=chart.getModel().getSeries()[1];varindices0=series0.getRawIndicesByActiveState('active');varindices1=series1.getRawIndicesByActiveState('active');console.log(indices0,indices1);});events.focusnodeadjacencygraph的邻接节点高亮事件

graph的邻接节点取消高亮事件

选框添加事件。即发出brushaction得到的事件

对外通知当前选中了什么；这个事件在setOption时不会发出，在其他的dispatchAction时，或者用户在界面中创建、删除、修改选框时会发出

事件参数内容为：

vardataBySeries=[[12,23,54,6],//series0的数据[34,34433,2223,21122,1232,34]//series1的数据];chart.setOption({...,brush:{...},series:[{//series0data:dataBySeries[0]},{//series1data:dataBySeries[1]}]});chart.on('brushSelected',function(params){varbrushComponent=params.batch[0];varsum=0;//统计选中项的数据值的和for(varsIdx=0;sIdx