eChars 学习
图表容器及大小
在 HTML 中定义有宽度和高度的父容器（推荐）
通常来说，需要在 HTML 中先定义一个 <div> 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。
<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); </script>
需要注意的是，使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。
指定图表的大小
如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。
<div id="main"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'), null, { width: 600, height: 400 }); </script>
监听图表容器的大小并改变图表大小
在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。
这种情况下，可以监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。
<style> #main, html, body { width: 100%; } #main { height: 400px; } </style> <div id="main"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); window.onresize = function() { myChart.resize(); }; </script>
为图表设置特定的大小
除了直接调用 resize() 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。
myChart.resize({
width: 800,
height: 400
});
容器节点被销毁以及被重建时
假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。
本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。
正确的做法是，在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化。
ECharts 中的样式简介
本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。
- 颜色主题（Theme）
- 调色盘
- 直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
- 视觉映射（visualMap）
颜色主题（Theme）
最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 示例集合 中，可以通过切换深色模式，直接看到采用主题的效果。
ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：
var chart = echarts.init(dom, 'dark');
其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 主题编辑器 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：
如果主题保存为 JSON 文件，则需要自行加载和注册，例如：
// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
echarts.registerTheme('vintage', JSON.parse(themeJSON));
var chart = echarts.init(dom, 'vintage');
});
如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可：
// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = 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 等可能出现在不同的地方。
在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：
var data = [ [ [28604, 77, 17096869, 'Australia', 1990], [31163, 77.4, 27662440, 'Canada', 1990], [1516, 68, 1154605773, 'China', 1990], [13670, 74.7, 10582082, 'Cuba', 1990], [28599, 75, 4986705, 'Finland', 1990], [29476, 77.1, 56943299, 'France', 1990], [31476, 75.4, 78958237, 'Germany', 1990], [28666, 78.1, 254830, 'Iceland', 1990], [1777, 57.7, 870601776, 'India', 1990], [29550, 79.1, 122249285, 'Japan', 1990], [2076, 67.9, 20194354, 'North Korea', 1990], [12087, 72, 42972254, 'South Korea', 1990], [24021, 75.4, 3397534, 'New Zealand', 1990], [43296, 76.8, 4240375, 'Norway', 1990], [10088, 70.8, 38195258, 'Poland', 1990], [19349, 69.6, 147568552, 'Russia', 1990], [10670, 67.3, 53994605, 'Turkey', 1990], [26424, 75.7, 57110117, 'United Kingdom', 1990], [37062, 75.4, 252847810, 'United States', 1990] ], [ [44056, 81.8, 23968973, 'Australia', 2015], [43294, 81.7, 35939927, 'Canada', 2015], [13334, 76.9, 1376048943, 'China', 2015], [21291, 78.5, 11389562, 'Cuba', 2015], [38923, 80.8, 5503457, 'Finland', 2015], [37599, 81.9, 64395345, 'France', 2015], [44053, 81.1, 80688545, 'Germany', 2015], [42182, 82.8, 329425, 'Iceland', 2015], [5903, 66.8, 1311050527, 'India', 2015], [36162, 83.5, 126573481, 'Japan', 2015], [1390, 71.4, 25155317, 'North Korea', 2015], [34644, 80.7, 50293439, 'South Korea', 2015], [34186, 80.6, 4528526, 'New Zealand', 2015], [64304, 81.6, 5210967, 'Norway', 2015], [24787, 77.3, 38611794, 'Poland', 2015], [23038, 73.13, 143456918, 'Russia', 2015], [19360, 76.5, 78665830, 'Turkey', 2015], [38225, 81.4, 64715810, 'United Kingdom', 2015], [53354, 79.1, 321773631, 'United States', 2015] ] ]; option = { backgroundColor: { type: 'radial', x: 0.3, y: 0.3, r: 0.8, colorStops: [ { offset: 0, color: '#f7f8fa' }, { offset: 1, color: '#cdd0d5' } ] }, grid: { left: 10, containLabel: true, bottom: 10, top: 10, right: 30 }, xAxis: { splitLine: { show: false } }, yAxis: { splitLine: { show: false }, scale: true }, series: [ { name: '1990', data: data[0], type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, emphasis: { focus: 'series', label: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { shadowBlur: 10, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 5, color: { type: 'radial', x: 0.4, y: 0.3, r: 1, colorStops: [ { offset: 0, color: 'rgb(251, 118, 123)' }, { offset: 1, color: 'rgb(204, 46, 72)' } ] } } }, { name: '2015', data: data[1], type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, emphasis: { focus: 'series', label: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: { type: 'radial', x: 0.4, y: 0.3, r: 1, colorStops: [ { offset: 0, color: 'rgb(129, 227, 238)' }, { offset: 1, color: 'rgb(25, 183, 207)' } ] } } } ] };
高亮的样式：emphasis
在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。emphsis 中的结构，和普通样式的结构相同，例如：
option = { series: { type: 'scatter', // 普通样式。 itemStyle: { // 点的颜色。 color: 'red' }, label: { show: true, // 标签的文字。 formatter: 'This is a normal label.' }, // 高亮样式。 emphasis: { itemStyle: { // 高亮时点的颜色。 color: 'blue' }, label: { show: true, // 高亮时标签的文字。 formatter: 'This is a emphasis label.' } } } };
坐标轴
x 轴、y 轴
x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据
普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：
option = { xAxis: { // ... }, yAxis: { // ... } };
x 轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。
option = { xAxis: { type: 'time', name: '销售时间' // ... }, yAxis: { type: 'value', name: '销售数量' // ... } // ... };
当 x 轴（水平坐标轴）跨度很大，可以采用区域缩放方式灵活显示数据内容。
option = { xAxis: { type: 'time', name: '销售时间' // ... }, yAxis: { type: 'value', name: '销售数量' // ... }, dataZoom: [ // ... ] // ... };
在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 offset 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下，两个 y 轴显示在左右两侧。
option = { xAxis: { type: 'time', name: '销售时间' // ... }, yAxis: [ { type: 'value', name: '销售数量' // ... }, { type: 'value', name: '销售金额' // ... } ] // ... };
轴线
ECharts 提供了轴线 axisLine 相关的配置，我们可以根据实际情况调整，例如轴线两端的箭头，轴线的样式等。
option = { xAxis: { axisLine: { symbol: 'arrow', lineStyle: { type: 'dashed' // ... } } // ... }, yAxis: { axisLine: { symbol: 'arrow', lineStyle: { type: 'dashed' // ... } } } // ... };
刻度
ECharts 提供了轴线 axisTick 相关的配置，我们可以根据实际情况调整，例如刻度线的长度，样式等。
option = { xAxis: { axisTick: { length: 6, lineStyle: { type: 'dashed' // ... } } // ... }, yAxis: { axisTick: { length: 6, lineStyle: { type: 'dashed' // ... } } } // ... };
刻度标签
ECharts 提供了轴线 axisLabel 相关的配置，我们可以根据实际情况调整，例如文字对齐方式，自定义刻度标签内容等。
option = { xAxis: { axisLabel: { formatter: '{value} kg', align: 'center' // ... } // ... }, yAxis: { axisLabel: { formatter: '{value} 元', align: 'center' // ... } } // ... };
示例
图左侧的 y 轴代表东京月平均气温，右侧的 y 轴表示东京降水量，x 轴表示时间。两组 y 轴在一起，反映了平均气温和降水量间的趋势关系。
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, legend: {}, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ] } ], yAxis: [ { type: 'value', name: '降水量', min: 0, max: 250, position: 'right', axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '温度', min: 0, max: 25, position: 'left', axisLabel: { formatter: '{value} °C' } } ], series: [ { name: '降水量', type: 'bar', yAxisIndex: 0, data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3] }, { name: '温度', type: 'line', smooth: true, yAxisIndex: 1, data: [ 6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0, 5.2 ] } ] };
数据的视觉映射
数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。
ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到“线”，柱状图把数据映射到“长度”。一些更复杂的图表，如关系图、事件河流图、树图也都会做出各自内置的映射。
此外，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 组件，通过 visualMap.type 来区分。
其定义结构例如：
option = { visualMap: [ // 可以同时定义多个 visualMap 组件。 { // 第一个 visualMap 组件 type: 'continuous' // 定义为连续型 visualMap // ... }, { // 第二个 visualMap 组件 type: 'piecewise' // 定义为分段型 visualMap // ... } ] // ... };
连续型与分段型视觉映射组件
ECharts 的视觉映射组件分为连续型（visualMapContinuous）与分段型（visualMapPiecewise）。
连续型的意思是，进行视觉映射的数据维度是连续的数值；而分段型则是数据被分成了多段或者是离散型的数据。
连续型视觉映射
连续型视觉映射通过指定最大值、最小值，就可以确定视觉映射的范围。
option = { visualMap: [ { type: 'continuous', 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] } } // ... ] };
其中，visualMap.inRange 表示在数据映射范围内的数据采用的样式；而 visualMap.outOfRange 则指定了超出映射范围外的数据的样式。
visualMap.dimension 则指定了将数据的哪个维度做视觉映射。
分段型视觉映射
分段型视觉映射组件有三种模式：
- 连续型数据平均分段：依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
- 连续型数据自定义分段：依据 visualMap-piecewise.pieces 来定义每块范围。
- 离散数据（类别性数据）：类别定义在 visualMap-piecewise.categories 中。
使用分段型视觉映射时，需要将 type 设为 'piecewise'，并且将上面的三个配置项选其一配置即可，其他配置项类似连续型视觉映射。
数据集
数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持 数据集 开始，更推荐使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。
在series中设置数据
如果数据设置在 series 中，例如：
option = { xAxis: { type: 'category', data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'] }, yAxis: {}, series: [ { type: 'bar', name: '2015', data: [89.3, 92.1, 94.4, 85.4] }, { type: 'bar', name: '2016', data: [95.8, 89.4, 91.2, 76.9] }, { type: 'bar', name: '2017', data: [97.7, 83.1, 92.5, 78.1] } ] };
这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。 但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。
在数据集中设置数据
而数据设置在 数据集（dataset）中，会有这些好处：
- 能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。
- 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
- 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
- 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
下面是一个最简单的 dataset 的例子：
option = { legend: {}, tooltip: {}, dataset: { // 提供一份数据。 source: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ] }, // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。 xAxis: { type: 'category' }, // 声明一个 Y 轴，数值轴。 yAxis: {}, // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。 series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] };
或者也可以使用常见的“对象数组”的格式：
option = { legend: {}, tooltip: {}, dataset: { // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category， // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。 // 如果不指定 dimensions，也可以通过指定 series.encode // 完成映射，参见后文。 dimensions: ['product', '2015', '2016', '2017'], source: [ { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 }, { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 }, { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 }, { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 } ] }, xAxis: { type: 'category' }, yAxis: {}, series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] };
数据到图形的映射
如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。
简而言之，可以进行这些映射的设定：
- 指定
数据集的列（column）还是行（row）映射为系列（series）。这件事可以使用 series.seriesLayoutBy 属性来配置。默认是按照列（column）来映射。 - 指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 series.encode 属性，以及 visualMap 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到
dataset.source中的第一列；三个柱图系列，一一对应到dataset.source中后面每一列。
下面详细解释这些映射的设定。
把数据集（ dataset ）的行或列映射为系列（series）
有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。
用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：
- 'column': 默认值。系列被安放到
dataset的列上面。 - 'row': 系列被安放到
dataset的行上面。
看这个例子： （在这个表中： dataset 定义了数据内容，包括产品名称<Matcha Latte、Milk Tea、Cheese Cocoa>、年份<2012、2013、2014、2015>，及产品在每年的销量. series定义了图表显示的方法，第一个type：'bar' 表示用柱状图展示，seriesLayoutBy:'row' 表示以行作为维度；）
option = { legend: {}, tooltip: {}, dataset: { source: [ ['product', '2012', '2013', '2014', '2015'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3], ['Milk Tea', 86.5, 92.1, 85.7, 83.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4] ] }, xAxis: [ { type: 'category', gridIndex: 0 }, { type: 'category', gridIndex: 1 } ], yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }], grid: [{ bottom: '55%' }, { top: '55%' }], series: [ // 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。 { type: 'bar', seriesLayoutBy: 'row' }, { type: 'bar', seriesLayoutBy: 'row' }, { type: 'bar', seriesLayoutBy: 'row' }, // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。 { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 } ] };
维度（ dimension ）
常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（ series ）对应到“列”的时候，那么每一列就称为一个“维度（ dimension ）”，而每一行称为数据项（ item ）。反之，如果我们把系列（ series ）对应到表行，那么每一行就是“维度（ dimension ）”，每一列就是数据项（ item ）。
维度可以有单独的名字，便于在图表中显示。维度名（ dimension name ）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，'score'、'amount'、'product' 就是维度名。从第二行开始，才是正式的数据。dataset.source 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行（列）就是维度，或者 dataset.sourceHeader: false 表明第一行（列）开始就直接是数据。
维度的定义，也可以使用单独的 dataset.dimensions 或者 series.dimensions 来定义，这样可以同时指定维度名，和维度的类型（ dimension type ）：
var option1 = { dataset: { dimensions: [ { name: 'score' }, // 可以简写为 string ，表示 dimension name 。 'amount', // 可以在 type 中指定维度类型。 { name: 'product', type: 'ordinal' } ], source: [ //... ] } // ... }; var option2 = { dataset: { source: [ // ... ] }, series: { type: 'line', // series.dimensions 会更优先于 dataset.dimension 采纳。 dimensions: [ null, // 可以设置为 null 表示不想设置维度名 'amount', { name: 'product', type: 'ordinal' } ] } // ... };
大多数情况下，我们并不需要去设置维度类型，因为 ECharts 会自动尝试判断。但是如果不足够准确时，可以手动设置维度类型。
维度类型（ dimension type ）可以取这些值：
'number': 默认，表示普通数据。'ordinal': 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确，所以使用者也可以手动强制指定。'time': 表示时间数据。设置成'time'则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（axis.type 为'time'）上，那么会被自动设置为'time'类型。时间类型的支持参见 data。'float': 如果设置成'float'，在存储时候会使用TypedArray，对性能优化有好处。'int': 如果设置成'int'，在存储时候会使用TypedArray，对性能优化有好处。
数据到图形的映射（ series.encode ）
了解了维度的概念后，我们就可以使用 series.encode 来做映射。总体是这样的感觉：
var option = { dataset: { source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, 'Cheese Cocoa'], [50.1, 12755, 'Cheese Brownie'], [89.7, 20145, 'Matcha Cocoa'], [68.1, 79146, 'Tea'], [19.6, 91852, 'Orange Juice'], [10.6, 101852, 'Lemon Juice'], [32.7, 20112, 'Walnut Brownie'] ] }, xAxis: {}, yAxis: { type: 'category' }, series: [ { type: 'bar', encode: { // 将 "amount" 列映射到 X 轴。 x: 'amount', // 将 "product" 列映射到 Y 轴。 y: 'product' } } ] };
series.encode 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称，如 'x', 'y', 'tooltip' 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。
下面是 series.encode 支持的属性：
// 在任何坐标系和系列中，都支持： encode: { // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示 tooltip: ['product', 'score'] // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字） seriesName: [1, 3], // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。 itemId: 2, // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。 itemName: 3 } // 直角坐标系（grid/cartesian）特有的属性： encode: { // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴： x: [1, 5, 'score'], // 把“维度0”映射到 Y 轴。 y: 0 } // 单轴（singleAxis）特有的属性： encode: { single: 3 } // 极坐标系（polar）特有的属性： encode: { radius: 3, angle: 2 } // 地理坐标系（geo）特有的属性： encode: { lng: 3, lat: 2 } // 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是： encode: { value: 3 }
默认的 series.encode
值得一提的是，当 series.encode 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K 线图等）、饼图、漏斗图，会采用一些默认的映射规则。默认的映射规则比较简单，大体是：
- 在坐标系中（如直角坐标系、极坐标系等）
- 如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。
- 如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。
- 如果没有坐标系（如饼图）
- 取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。
默认的规则不能满足要求时，就可以自己来配置 encode，也并不复杂。这是一个 例子。
几个常见的 series.encode 设置方式举例
//第三列设置为 X 轴，第五列设置为 Y 轴 option = { series: { // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。 encode: { x: 2, y: 4 } // ... } }; //第三行设置为 X 轴，第五行设置为 Y 轴 option = { series: { encode: { x: 2, y: 4 }, seriesLayoutBy: 'row' // ... } }; //把第二列设置为标签 series: { label: { // `'{@score}'` 表示 “名为 score” 的维度里的值。 // `'{@[4]}'` 表示引用序号为 4 的维度里的值。 formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'; } } //第 2 列和第 3 列显示在提示框（tooltip）中 option = { series: { encode: { tooltip: [1, 2] // ... } // ... } }; // 数据里没有维度名，给出维度名 var option = { dataset: { dimensions: ['score', 'amount'], source: [ [89.3, 3371], [92.1, 8123], [94.4, 1954], [85.4, 829] ] } }; //第三列映射为气泡图的点的大小 var option = { dataset: { source: [ [12, 323, 11.2], [23, 167, 8.3], [81, 284, 12], [91, 413, 4.1], [13, 287, 13.5] ] }, visualMap: { show: false, dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。 min: 2, // 需要给出数值范围，最小数值。 max: 15, // 需要给出数值范围，最大数值。 inRange: { // 气泡尺寸：5 像素到 60 像素。 symbolSize: [5, 60] } }, xAxis: {}, yAxis: {}, series: { type: 'scatter' } };
视觉通道（颜色、尺寸等）的映射
我们可以使用 visualMap 组件进行视觉通道的映射。
数据的各种格式
多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 dataset.source 中，在不少情况下可以免去一些数据处理的步骤。
在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。
除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 seriesLayoutBy 参数。
dataset: [ { // 按行的 key-value 形式（对象数组），这是个比较常见的格式。 source: [ { product: 'Matcha Latte', count: 823, score: 95.8 }, { product: 'Milk Tea', count: 235, score: 81.4 }, { product: 'Cheese Cocoa', count: 1042, score: 91.2 }, { product: 'Walnut Brownie', count: 988, score: 76.9 } ] }, { // 按列的 key-value 形式。 source: { product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'], count: [823, 235, 1042, 988], score: [95.8, 81.4, 91.2, 76.9] } } ];
多个 dataset 以及如何引用他们
可以同时定义多个 dataset。系列可以通过 series.datasetIndex 来指定引用哪个 dataset。例如：
var option = { dataset: [ { // 序号为 0 的 dataset。 source: [] }, { // 序号为 1 的 dataset。 source: [] }, { // 序号为 2 的 dataset。 source: [] } ], series: [ { // 使用序号为 2 的 dataset。 datasetIndex: 2 }, { // 使用序号为 1 的 dataset。 datasetIndex: 1 } ] };
目前并非所有图表都支持 dataset。支持 dataset 的图表有： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。 后续会有更多的图表进行支持。
图例
图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。
布局
图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：
option = { legend: { // Try 'horizontal' orient: 'vertical', right: 10, top: 'center' }, dataset: { source: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ] }, xAxis: { type: 'category' }, yAxis: {}, series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] };
对于图例较多时，可以使用可滚动翻页的图例
option = { legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: ['图例一', '图例二', '图例三' /* ... */, , '图例n'] // ... } // ... };
样式
在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。
legend: { data: ['图例一', '图例二', '图例三'], backgroundColor: '#ccc', textStyle: { color: '#ccc' // ... } // ... } // ... };
图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。
option = { legend: { data: ['图例一', '图例二', '图例三'], icon: 'rect' // ... } // ... };
交互
根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；
option = { legend: { data: ['图例一', '图例二', '图例三'], selected: { 图例一: true, 图例二: true, 图例三: false } // ... } // ... };
图例注意事项
图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。
option = { legend: { data: [ { name: '图例一', icon: 'rect' }, { name: '图例二', icon: 'circle' }, { name: '图例三', icon: 'pin' } ] // ... }, series: [ { name: '图例一' // ... }, { name: '图例二' // ... }, { name: '图例三' // ... } ] // ... };
当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。
事件与行为
在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。
ECharts 中的事件名称对应 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' 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。
// 基于准备好的dom，初始化ECharts实例 // var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 处理点击事件并且跳转到相应的百度搜索页面 myChart.on('click', function(params) { window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); });
所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，如下格式：
type EventParams = { // 当前点击的图形元素所属的组件名称， // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。 componentType: string; // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。 seriesType: string; // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。 seriesIndex: number; // 系列名称。当 componentType 为 'series' 时有意义。 seriesName: string; // 数据名，类目名 name: string; // 数据在传入的 data 数组中的 index dataIndex: number; // 传入的原始数据项 data: Object; // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data， // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。 // 其他大部分图表中只有一种 data，dataType 无意义。 dataType: string; // 传入的数据值 value: number | Array; // 数据图形的颜色。当 componentType 为 'series' 时有意义。 color: string; };
如何区分鼠标点击到了哪里：
myChart.on('click', function(params) {
if (params.componentType === 'markPoint') {
// 点击到了 markPoint 上
if (params.seriesIndex === 5) {
// 点击到了 index 为 5 的 series 的 markPoint 上。
}
} else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// 点击到了 graph 的 edge（边）上。
} else {
// 点击到了 graph 的 node（节点）上。
}
}
}
});
使用 query 只对指定的组件的图形元素的触发回调：
chart.on(eventName, query, handler);
如果为 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，可以包含以下一个或多个属性，每个属性都是可选的：
{ ${mainType}Index: number // 组件 index ${mainType}Name: string // 组件 name ${mainType}Id: string // 组件 id dataIndex: number // 数据项 index name: string // 数据项 name dataType: string // 数据项 type，如关系图中的 'node', 'edge' element: string // 自定义系列中的 el 的 name }
例如：
chart.setOption({ // ... series: [ { name: 'uuu' // ... } ] }); chart.on('mouseover', { seriesName: 'uuu' }, function() { // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。 }); chart.setOption({ // ... series: [ { // ... }, { // ... data: [ { name: 'xx', value: 121 }, { name: 'yy', value: 33 } ] } ] }); chart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() { // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。 });
chart.setOption({ // ... series: [ { type: 'graph', nodes: [ { name: 'a', value: 10 }, { name: 'b', value: 20 } ], edges: [{ source: 0, target: 1 }] } ] }); chart.on('click', { dataType: 'node' }, function() { // 关系图的节点被点击时此方法被回调。 }); chart.on('click', { dataType: 'edge' }, function() { // 关系图的边被点击时此方法被回调。 });
chart.setOption({ // ... series: { // ... type: 'custom', renderItem: function(params, api) { return { type: 'group', children: [ { type: 'circle', name: 'my_el' // ... }, { // ... } ] }; }, data: [[12, 33]] } }); chart.on('mouseup', { element: 'my_el' }, function() { // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。 });
你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表，显示浮层等等，如下示例代码：
myChart.on('click', function(parmas) {
$.get('detail?q=' + params.name, function(detail) {
myChart.setOption({
series: [
{
name: 'pie',
// 通过饼图表现单个柱子中的数据分布
data: [detail.data]
}
]
});
});
});
组件交互的行为事件
在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。
下面是监听一个图例开关的示例：
// 图例开关的行为只会触发 legendselectchanged 事件 myChart.on('legendselectchanged', function(params) { // 获取点击图例的选中状态 var isSelected = params.selected[params.name]; // 在控制台中打印 console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name); // 打印所有图例的状态 console.log(params.selected); });
代码触发 ECharts 中组件的行为
上面提到诸如 'legendselectchanged' 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。
在 ECharts 通过调用 myChart.dispatchAction({ type: '' }) 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。
常用的动作和动作对应参数在 action 文档中有列出。
下面示例演示了如何通过 dispatchAction 去轮流高亮饼图的每个扇形。
option = { title: { text: '饼图程序调用高亮示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; let currentIndex = -1; setInterval(function() { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000);
监听“空白处”的事件
有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。
在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。
myChart.getZr().on('click', function(event) {
// 该监听器正在监听一个`zrender 事件`。
});
myChart.on('click', function(event) {
// 该监听器正在监听一个`echarts 事件`。
});
zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，echarts 事件是在 zrender 事件的基础上实现的，也就是说，当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者。
有了 zrender 事件，我们就可以实现监听空白处的事件，具体如下：
myChart.getZr().on('click', function(event) {
// 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
if (!event.target) {
// 点击在了空白处，做些什么。
}
});
