Echarts各属性详解
Echarts配置项⼿册⽬录
1. title
标题组件，包含主标题和副标题。
2. legend
图例组件。
图例组件展现了不同系列的标记(symbol)，颜⾊和名字。可以通过点击图例控制哪些系列不显⽰。
3. grid
直⾓坐标系内绘图⽹格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在⽹格上绘制，，。
4. xAxis
直⾓坐标系 grid 中的 x 轴，⼀般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 属性防⽌同个位置多个 x 轴的重叠。
5. yAxis
直⾓坐标系 grid 中的 y 轴，⼀般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 属性防⽌同个位置多个 Y 轴的重叠。
6. polar
极坐标系，可以⽤于散点图和折线图。每个极坐标系拥有⼀个和⼀个。
7. radiusAxis
极坐标系的径向轴。
8. angleAxis
极坐标系的⾓度轴。
9. radar
雷达图坐标系组件，只适⽤于。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件，为避免混淆，雷达图使⽤ radar 组件作为其坐标系。
雷达图坐标系与极坐标系不同的是它的每⼀个轴（indicator 指⽰器）都是⼀个单独的维度，可以通过 、、、、、 ⼏个配置项配置指⽰器坐标轴线的样式。
10. dataZoom
dataZoom 组件 ⽤于区域缩放，从⽽能⾃由关注细节的数据信息，或者概览数据整体，或者去除离点的影响。
现在⽀持这⼏种类型的 dataZoom 组件：
[内置型数据区域缩放组件（dataZoomInside）](/zh/option.html#dataZoom-inside)：内置于坐标系中，使⽤户可以在坐标系上通过⿏标拖拽、⿏标滚轮、⼿指滑动（触屏上）来缩放或漫游坐标系。
[滑动条型数据区域缩放组件（dataZoomSlider）](/zh/option.html#dataZoom-slider)：有单独的滑动条，⽤户在滑动条上进⾏缩放或漫游。
[框选型数据区域缩放组件（dataZoomSelect）](/zh/option.html#toolbox.feature.dataZoom)：提供⼀个选框进⾏数据区域缩放。即 [toolbox.feature.dataZoom](/zh/option.html#toolbox.feature.dataZoom)，配置项在 toolbox 中。
11. visualMap
visualMap 是视觉映射组件，⽤于进⾏『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
视觉元素可以是：
symbol: 图元的图形类别。
symbolSize: 图元的⼤⼩。
color: 图元的颜⾊。
colorAlpha: 图元的颜⾊的透明度。
opacity: 图元以及其附属物（如⽂字标签）的透明度。
colorLightness: 颜⾊的明暗度，参见 [HSL](/wiki/HSL_and_HSV)。
colorSaturation: 颜⾊的饱和度，参见 [HSL](/wiki/HSL_and_HSV)。
colorHue: 颜⾊的⾊调，参见 [HSL](/wiki/HSL_and_HSV)。
visualMap 组件可以定义多个，从⽽可以同时对数据中的多个维度进⾏视觉映射。
visualMap 组件可以定义为 或 ，通过 type 来区分。
12. tooltip
提⽰框组件。
提⽰框组件的通⽤介绍：
提⽰框组件可以设置在多种地⽅：
可以设置在全局，即 [tooltip](/zh/option.html#tooltip)
可以设置在坐标系中，即 [ltip](/zh/option.ltip)、[polar.t
ooltip](/zh/option.ht ltip)、[ltip](/zh/option.ltip)
可以设置在系列中，即 [ltip](/zh/option.ltip)
可以设置在系列的每个数据项中，即 [ltip](/zh/option.html#ltip)
13. axisPointer
这是坐标轴指⽰器（axisPointer）的全局公⽤设置。
14. toolbox
⼯具栏。内置有，，，，五个⼯具。
15. brush
brush 是区域选择组件，⽤户可以选择图中⼀部分数据，从⽽便于向⽤户展⽰被选中数据，或者他们的⼀些统计计算结果。
文根英金范
16. geo
地理坐标系组件。
地理坐标系组件⽤于地图的绘制，⽀持在地理坐标系上绘制，。
17. parallel
平⾏坐标系介绍
是⼀种常⽤的可视化⾼维数据的图表。
18. parallelAxis
这个组件是平⾏坐标系中的坐标轴。
平⾏坐标系介绍
是⼀种常⽤的可视化⾼维数据的图表。
19. singleAxis
单轴。可以被应⽤到散点图中展现⼀维数据
20. timeline
timeline 组件，提供了在多个 ECharts option 间进⾏切换、播放等操作的功能。
21. graphic
graphic 是原⽣图形元素组件。可以⽀持的图形元素包括：
, , , , , , , , , , , ,
22. calendar
⽇历坐标系组件。
在ECharts中，我们⾮常有创意地实现了⽇历图，是通过使⽤⽇历坐标系组件来达到⽇历图效果的，如下⽅的⼏个⽰例图所⽰，我们可以在热⼒图、散点图、关系图中使⽤⽇历坐标系。
23. dateset
ECharts 4 开始⽀持了 数据集（dataset）组件⽤于单独的数据集声明，从⽽数据可以单独管理，被多个组件复⽤，并且可以⾃由指定数据到视觉的映射。这在不少场景下能带来使⽤上的⽅便。
关于 dataset 的详情，请参见。
24. aria
W3C 制定了⽆障碍富互联⽹应⽤规范集（，the Accessible Rich Internet Applications Suite），致⼒于使得⽹页内容和⽹页应⽤能够被更多残障⼈⼠访问。Apache ECharts 4 遵从这⼀规范，⽀持⾃动根据图表配置项智能⽣成描述，使得盲⼈可以在朗读设备的帮助下了解图表内容，让图表可以被更多⼈访问。除此之外，Apache ECharts 5 新增⽀持贴花纹理，作为颜⾊的辅助表达，进⼀步⽤以区分数据。
默认关闭，需要通过将 设置为 true 开启。
25. series
26. darkMode
是否是暗⿊模式，默认会根据背景⾊ 的亮度⾃动设置。 如果是设置了容器的背景⾊⽽⽆法判断到，就可以使⽤该配置⼿动指
定，echarts 会根据是否是暗⿊模式调整⽂本等的颜⾊。
该配置通常会被⽤于主题中。
27. color
调⾊盘颜⾊列表。如果系列没有设置颜⾊，则会依次循环从该列表中取颜⾊作为系列颜⾊。 默认为：
[’#5470c6’, ‘#91cc75’, ‘#fac858’, ‘#ee6666’, ‘#73c0de’, ‘#3ba272’, ‘#fc8452’, ‘#9a60b4’,‘#ea7ccc’]
⽀持的颜⾊格式：
使⽤ RGB 表⽰纯颜⾊，⽐如 ‘rgb(128, 128, 128)’，如果想要加上 alpha 通道表⽰不透明度，可以使⽤
RGBA，⽐如 ‘rgba(128, 128, 128, 0.5)’，也可以使⽤⼗六进制格式，⽐如 ‘#ccc’。
渐变⾊或者纹理填充
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分⽐，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
{
type:'linear',
x:0,
y:0,
x2:0,
y2:1,
colorStops:[{
offset:0, color:'red'// 0% 处的颜⾊
},{
offset:1, color:'blue'// 100% 处的颜⾊
}],
火焰之纹章烈火之剑攻略
global:false// 缺省为 false
}
// 径向渐变，前三个参数分别是圆⼼ x, y 和半径，取值同线性渐变
{
type:'radial',
x:0.5,
y:0.5,
r:0.5,
colorStops:[{
colorStops:[{
offset:0, color:'red'// 0% 处的颜⾊
},{
王彦霖女友被扒offset:1, color:'blue'// 100% 处的颜⾊
}],
global:false// 缺省为 false
}
// 纹理填充
{
image: imageDom,// ⽀持为 HTMLImageElement, HTMLCanvasElement，不⽀持路径字符串
repeat:'repeat'// 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
28. backgroundColor
背景⾊，默认⽆背景。
⽀持使⽤rgb(255,255,255)，rgba(255,255,255,1)，#fff等⽅式设置为纯⾊，也⽀持设置为渐变⾊和纹理填充，具体见
29. textStyle
全局的字体样式。
30. animation
最好的轮胎品牌是否开启动画。
31. animationThreshold
是否开启动画的阈值，当单个系列显⽰的图形数量⼤于这个阈值时会关闭动画。
32. animationDuration
初始动画的时长，⽀持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:
animationDuration:function(idx){
// 越往后的数据时长越⼤
return idx *100;
}
33. animationEasing
初始动画的缓动效果。不同的缓动效果可以参考 。
34. animationDelay
初始动画的延迟，⽀持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下⽰例：
animationDelay:function(idx){
// 越往后的数据延迟越⼤
return idx *100;
}
也可以看
35. animationDurationUpdate
数据更新动画的时长。世界各地的母亲节都是同一天吗
⽀持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
animationDurationUpdate:function(idx){
// 越往后的数据时长越⼤
return idx *100;
}
36. animationEasingUpdate
数据更新动画的缓动效果。
37. animationDelayUpdate
数据更新动画的延迟，⽀持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下⽰例：
animationDelayUpdate:function(idx){
// 越往后的数据延迟越⼤
return idx *100;
}
也可以看
38. stateAnimation
状态切换的动画配置，⽀持在每个系列⾥设置单独针对该系列的配置。
所有属性
stateAnimation. duration =300
number
状态切换的动画时长，设为 0 则关闭状态动画。
stateAnimation. easing = cubicOut
string
状态切换的动画缓动。
39. 默认为 ‘source-over’。 ⽀持每个系列单独设置。
‘lighter’ 也是⽐较常见的⼀种混合模式，该模式下图形数量集中的区域会颜⾊叠加成⾼亮度的颜⾊（⽩⾊）。常常能起到突出该区域的效果。见⽰例
40. hoverLayerThreshold
图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量⼤于该阈值时开启单独的 hover 层。
单独的 hover 层主要是为了在⾼亮图形的时候不需要重绘整个图表，只需要把⾼亮的图形放⼊单独的⼀个 canvas 层进⾏绘制，防⽌在图形数量很多的时候因为⾼亮重绘所有图形导致卡顿。
ECharts 2 ⾥是底层强制使⽤单独的层绘制⾼亮图形，但是会带来很多问题，⽐如⾼亮的图形可能会不正确的遮挡所有其它图形，还有图形有透明度因为⾼亮和正常图形叠加导致不正确的透明度显⽰，还有移动端上因为每个图表都要多⼀个 canvas 带来的额外内存开销。因此 3 ⾥默认不会开启该优化，只有在图形数量特别多，有必要做该优化时才会⾃动开启。
41. useUTC
是否使⽤ UTC 时间。
true: 表⽰ pe 为 'time' 时，依据 UTC 时间确定 tick 位置，并且 axisLabel 和 tooltip 默认展⽰的是 UTC 时间。
false: 表⽰ pe 为 'time' 时，依据本地时间确定 tick 位置，并且 axisLabel 和 tooltip 默认展⽰的是本地时间。
默认取值为false，即使⽤本地时间。因为考虑到：
很多情况下，需要展⽰为本地时间（⽆论服务器存储的是否为 UTC 时间）。寻秦记演员表
如果 data 中的时间为 '2012-01-02' 这样的没有指定时区的时间表达式，往往意为本地时间。默认情况下，时间被展⽰时需要和输⼊⼀致⽽⾮有时差。
注意，这个参数实际影响的是『展⽰』，⽽⾮⽤户输⼊的时间值的解析。 关于⽤户输⼊的时间值（例如 1491339540396,‘2013-01-04’ 等）的解析，参见 。
42. options
⽤于 的 option 数组。数组的每⼀项是⼀个 echarts option (ECUnitOption)。
43. media
请参见 。
所有属性
media. query
Object
同时写两个属性，表⽰ “且”。