图形数量阈值,决定是否开启单独的 hover 层,在整个图表的图形数量大于该阈值时开启单独的 hover 层。
单独的 hover 层主要是为了在高亮图形的时候不需要重绘整个图表,只需要把高亮的图形放入单独的一个 canvas 层进行绘制,防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿。
ECharts 2 里是底层强制使用单独的层绘制高亮图形,但是会带来很多问题,比如高亮的图形可能会不正确的遮挡所有其它图形,还有图形有透明度因为高亮和正常图形叠加导致不正确的透明度显示,还有移动端上因为每个图表都要多一个 canvas 带来的额外内存开销。因此 3 里默认不会开启该优化,只有在图形数量特别多,有必要做该优化时才会自动开启。
图形的混合模式,不同的混合模式见 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation 。
默认为 'source-over'
。 支持每个系列单独设置。
'lighter'
也是比较常见的一种混合模式,该模式下图形数量集中的区域会颜色叠加成高亮度的颜色(白色)。常常能起到突出该区域的效果。见示例 全球飞行航线
启用渐进式渲染的图形数量阈值,在单个系列的图形数量超过该阈值时启用渐进式渲染。
渐进式渲染时每一帧绘制图形数量,设为 0 时不启用渐进式渲染,支持每个系列单独配置。
在图中有数千图形甚至好几万图形的时候,一下子把图形绘制出来,或者交互重绘的时候可能会造成界面的卡顿甚至假死,因此 ECharts 从 3.2.0 开始支持大量图形的渐进式渲染(progressive rendering),渲染的时候会把创建好的图形分到数帧中渲染,每一帧渲染只渲染指定数量的图形。
该配置项就是用于配置该系列每一帧渲染的图形数,默认是 400 个,可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢,这个数字就可以设置小一点,而线宽小于等于 1 的 polyline 绘制非常快,该配置项就可以相对调得比较大。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
全局的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
背景色,默认无背景。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
默认为:
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
系列列表。每个系列通过 type
决定自己的图表类型
仪表盘
示例:
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
仪表盘详情,用于显示数据。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文本颜色,默认取数值所在的区间的颜色
格式化函数或者字符串
formatter: function (value) {
return value.toFixed(0);
}
相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
详情边框颜色。
详情边框宽度。
详情背景色。
详情高度。
详情宽度。
是否显示详情。
仪表盘标题。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
是否显示标题。
仪表盘指针样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
指针颜色,默认取数值所在的区间的颜色
仪表盘指针。
指针宽度。
指针长度,可以是绝对数值,也可以是相对于半径的半分比。
是否显示指针。
刻度标签。
刻度颜色
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值
formatter: function (value) {
return value + 'km/h';
}
标签与刻度线的距离。
是否显示标签。
刻度样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
刻度线长。支持相对半径的百分比。
分隔线之间分割的刻度数。
是否显示刻度。
分隔线样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
分隔线线长。支持相对半径的百分比。
是否显示分隔线。
仪表盘轴线相关配置。
仪表盘轴线样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
轴线宽度。
仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。
默认取值:
[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
是否显示仪表盘轴线。
仪表盘刻度的分割段数。
最大的数据值,映射到 maxAngle。
最小的数据值,映射到 minAngle。
仪表盘刻度是否是顺时针增长。
仪表盘结束角度。
仪表盘起始角度。圆心 正右手侧为0
度,正上方为90
度,正左手侧为180
度。
仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
{{ use partial-legend-hover-link }}
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
漏斗图
示例:
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
系列中的数据内容数组。数组项可以为单个数值,如:
[12, 34, 56, 10, 23]
如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组,如:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
这时候可以将每项数组中的第二个值指定给 visualMap 组件。
更多时候我们需要指定每个数据项的名称,这时候需要每个项为一个对象:
[{
// 数据项的名称
name: '数据1',
// 数据项值8
value: 10
}, {
name: '数据2',
value: 20
}]
需要对个别内容指定进行个性化定义时:
[{
name: '数据1',
value: 10
}, {
// 数据项名称
name: '数据2',
value : 56,
//自定义特殊 tooltip,仅对该数据项有效
tooltip:{},
//自定义特殊itemStyle,仅对该item有效
itemStyle:{}
}]
图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
标签的视觉引导线样式,在 label 位置 设置为'left'
或者'right'
的时候会显示视觉引导线。
高亮状态下视觉引导线的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示视觉引导线。
普通状态下视觉引导线的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
视觉引导线第一段的长度。
是否显示视觉引导线。
漏斗图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 百分比
percent: number,
}
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 百分比
percent: number,
}
标签的位置。
可选:
'left'
漏斗图左侧,通过视觉引导线连到相应的梯形。
'right'
漏斗图右侧,通过视觉引导线连到相应的梯形。
'inside'
漏斗图梯形内部。
'inner'
同 'inside'
。
'center'
同 'inside'
。水平方向对齐布局类型,默认居中对齐,可用选项还有:'left' | 'right' | 'center'
是否启用图例 hover 时的联动高亮。
数据图形间距。
数据排序, 可以取 'ascending'
, 'descending'
。
数据最大值 max 映射的宽度。
可以是绝对的像素大小,也可以是相对布局宽度的百分比。
数据最小值 min 映射的宽度。
可以是绝对的像素大小,也可以是相对布局宽度的百分比,如果需要最小值的图形并不是尖端三角,可通过设置该属性实现。
指定的数据最大值。
指定的数据最小值。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
桑基图
是一种特殊的流图, 它主要用来表示原材料、能量等如何从初始形式经过中间过程的加工、转化到达最终形式。
示例:
可视编码:
桑基图将原数据中的每个node
编码成一个小矩形,不同的节点尽量用不同的颜色展示,小矩形旁边的label
编码的是节点的名称。
此外,图中每两个小矩形之间的边编码的是原数据中的link
,边的粗细编码的是link
中的value
。
排序:
如果想指定结果的纵向顺序,那么可以把 layoutIterations 设为 0
,此时纵向的顺序依照数据在 links 中出现的顺序。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
同 links
节点间的关系数据。示例:
links: [{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}]
同 data
系列中的数据内容数组。数组项可以为单个数值,如:
[12, 34, 56, 10, 23]
如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组,如:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
这时候可以将每项数组中的第二个值指定给 visualMap 组件。
更多时候我们需要指定每个数据项的名称,这时候需要每个项为一个对象:
[{
// 数据项的名称
name: '数据1',
// 数据项值8
value: 10
}, {
name: '数据2',
value: 20
}]
需要对个别内容指定进行个性化定义时:
[{
name: '数据1',
value: 10
}, {
// 数据项名称
name: '数据2',
value : 56,
//自定义特殊 tooltip,仅对该数据项有效
tooltip:{},
//自定义特殊itemStyle,仅对该item有效
itemStyle:{}
}]
桑基图边的样式,其中 lineStyle.normal.color 支持设置为'source'
或者'target'
特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
桑基图边的曲度。
桑基图边的透明度。
桑基图边的颜色。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
桑基图边的曲度。
桑基图边的透明度。
桑基图边的颜色。
桑基图节点矩形的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
label
描述了每个矩形节点中文本标签的样式。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
布局的迭代次数,用来不断优化图中节点的位置,以减少节点和边之间的相互遮盖。
默认布局迭代次数:32
。
经测试,布局迭代次数不要低于默认值。
图中每一列任意两个矩形节点之间的间隔。
图中每个矩形节点的宽度。
sankey组件的高度。
sankey组件的宽度。
sankey组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
sankey组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
sankey组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
sankey组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
关系图
用于展现节点以及节点之间的关系数据。
注意: ECharts 2.x 中 force
类型的图表不再在 ECharts 3 中提供支持,转为统一使用 graph
去展现关系数据。如果要使用力引导布局,可以将 layout 配置项设为'force'
。
示例:
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
组件的高度。
组件的宽度。
组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '平均值到最大值',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type
设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex
指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
别名,同 links
节点间的关系数据。示例:
links: [{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}]
别名,同 data
系列中的数据内容数组。数组项可以为单个数值,如:
[12, 34, 56, 10, 23]
如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组,如:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
这时候可以将每项数组中的第二个值指定给 visualMap 组件。
更多时候我们需要指定每个数据项的名称,这时候需要每个项为一个对象:
[{
// 数据项的名称
name: '数据1',
// 数据项值8
value: 10
}, {
name: '数据2',
value: 20
}]
需要对个别内容指定进行个性化定义时:
[{
name: '数据1',
value: 10
}, {
// 数据项名称
name: '数据2',
value : 56,
//自定义特殊 tooltip,仅对该数据项有效
tooltip:{},
//自定义特殊itemStyle,仅对该item有效
itemStyle:{}
}]
节点分类的类目,可选。
如果节点有分类的话可以通过 data[i].category 指定每个节点的类目,类目的样式会被应用到节点样式上。图例也可以基于categories
名字展现和筛选。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
关系边的公用线条样式。其中 lineStyle.normal.color 支持设置为'source'
或者'target'
特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头,如下:
edgeSymbol: ['circle', 'arrow']
关系图节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
关系图节点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
关系图节点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
关系图节点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
节点是否可拖拽,只在使用力引导布局的时候有用。
鼠标漫游缩放时节点的相应缩放比例,当设为0
时节点不随着鼠标的缩放而缩放
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale'
或者 'move'
。设置成 true
为都开启
力引导布局相关的配置项,力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力,每条边的两个节点之间添加一个引力,每次迭代节点会在各个斥力和引力的作用下移动位置,多次迭代后节点会静止在一个受力平衡的位置,达到整个模型的能量最小化。
力引导布局的结果有良好的对称性和局部聚合性,也比较美观。
因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。
边的两个节点之间的距离,这个距离也会受 repulsion。
支持设置成数组表达边长的范围,此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例
// 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
edgeLength: [10, 50]
节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
节点之间的斥力因子。
支持设置成数组表达斥力的范围,此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
进行力引导布局前的初始化布局,初始化布局会影响到力引导的效果。
默认不进行任何布局,使用节点中提供的 x, y 作为节点的位置。如果不存在的话会随机生成一个位置。
也可以选择使用环形布局 'circular'
。
环形布局相关配置
是否旋转标签,默认不旋转
图的布局。
可选:
'circular'
采用环形布局,见示例 Les Miserables,布局相关的配置项见 graph.circular
'force'
采用力引导布局,见示例 Force,布局相关的配置项见 graph.force
是否开启鼠标 hover 节点的提示动画效果。
使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
null
无坐标系。
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
是否启用图例 hover 时的联动高亮。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
线图
用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。
ECharts 2.x 里会用地图上的 markLine
去绘制迁徙效果,在 ECharts 3 里建议使用单独的 lines
类型图表。
迁徙示例:
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
线图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
线图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
线数据集。
注: 为了更好点支持多段线的配置,线数据的格式在 3.2.0 做了一定调整,如下:
// 3.2.0 之前
// [{
// // 起点坐标
// coord: [120, 66],
// lineStyle: { normal: {} }
// }, {
// // 终点坐标
// coord: [122, 67]
// }]
// 从 3.2.0 起改为如下配置
{
coords: [
[120, 66], // 起点
[122, 67] // 终点
... // 如果 polyline 为 true 还可以设置更多的点
],
// 统一的样式设置
lineStyle: {
normal: {}
}
}
标签相关配置。在 polyline 设置为 true
时无效。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。 默认从option.color 调色盘 获取颜色
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
开启绘制优化的阈值。
是否启用大规模线图的优化,在数据图形特别多的时候(>=5k)可以开启。
开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。
缺点:优化后不能自定义设置单个数据项的样式,不能启用 effect。
注意: 所有带有尾迹特效的图表需要单独放在一个层,也就是需要单独设置 zlevel,同时建议关闭该层的动画(animation: false)。不然位于同个层的其它系列的图形,和动画的标签也会产生不必要的残影。
是否循环显示特效。
特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。
特效标记的颜色,默认取 lineStyle.normal.color。
特效标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示高和宽,例如 [20, 10]
表示标记宽为20
,高为10
。
特效图形的标记。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
上面示例中就是使用自定义 path 的 symbol 表现飞机的图形。
Tip: symbol 的角度会随着轨迹的切线变化,如果使用自定义 path 的 symbol,需要保证 path 图形的朝向是朝上的,这样在 symbol 沿着轨迹运动的时候可以保证图形始终朝着运动的方向。
配置特效图形的移动动画是否是固定速度,单位像素/秒
,设置为大于 0 的值后会忽略 period 配置项。
特效动画的时间,单位为 s。
是否显示特效。
是否是多段线。
默认为 false
,只能用于绘制只有两个端点的线段,线段可以通过 lineStyle.normal.curveness 配置为曲线。
如果该配置项为 true
,则可以在 data.coords 中设置多于 2 个的顶点用来绘制多段线,在绘制路线轨迹的时候比较有用,见示例 北京公交路线,设置为多段线后 lineStyle.normal.curveness 无效。
使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
平行坐标系的系列。
平行坐标系介绍
平行坐标系(Parallel Coordinates) 是一种常用的可视化高维数据的图表。
例如 series-parallel.data 中有如下数据:
[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object,从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。
平行坐标系适用于对这种多维数据进行可视化分析。每一个维度(每一列)对应一个坐标轴,每一个『数据项』是一条线,贯穿多个坐标轴。在坐标轴上,可以进行数据选取等操作。如下:
配置方式概要
『平行坐标系』的 option
基本配置如下例:
option = {
parallelAxis: [ // 这是一个个『坐标轴』的定义
{dim: 0, name: schema[0].text}, // 每个『坐标轴』有个 'dim' 属性,表示坐标轴的维度号。
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // 坐标轴也可以支持类别型数据
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
}
],
parallel: { // 这是『坐标系』的定义
left: '5%', // 平行坐标系的位置设置
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // 『坐标轴』的公有属性可以配置在这里避免重复书写
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // 这里三个系列共用一个平行坐标系
{
name: '北京',
type: 'parallel', // 这个系列类型是 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
...
]
},
{
name: '上海',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
...
]
},
{
name: '广州',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
...
]
}
]
};
需要涉及到三个组件:parallel、parallelAxis、series-parallel
这个配置项是平行坐标系的『坐标系』本身。一个系列(series
)或多个系列(如上图中的『北京』、『上海』、『广州』分别各是一个系列)可以共用这个『坐标系』。
和其他坐标系一样,坐标系也可以创建多个。
位置设置,也是放在这里进行。
这个是『坐标系』中的坐标轴的配置。自然,需要有多个坐标轴。
其中有 parallelAxis.parallelIndex 属性,指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。
这个是『系列』的定义。系列被画到『坐标系』上。
其中有 series-parallel.parallelIndex 属性,指定使用哪个『坐标系』。默认使用第一个『坐标系』。
配置注意和最佳实践
配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。
如果数据量很大并且发生卡顿
建议把 series-parallel.lineStyle.normal.width 设为 0.5
(或更小),
可能显著改善性能。
高维数据的显示
维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。
可以通过 parallel.axisExpandable 来改善显示效果,如下例子:
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
平行坐标组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
平行坐标所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
例如 series-parallel.data 中有如下数据:
[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object,从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。
是否实时刷新。
框选时,选中的条线会设置成这个『透明度』(从而可以达到高亮的效果)。
框选时,未被选中的条线会设置成这个『透明度』(从而可以达到变暗的效果)。
线条样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
使用的平行坐标系的 index,在单个图表实例中存在多个平行坐标系的时候有用。
该系列使用的坐标系,可选:
'parallel'
使用平行坐标系,通过 parallelIndex 指定相应的平行坐标系组件
地图。
地图主要用于地理区域数据的可视化,配合 visualMap 组件用于展示不同区域的人口分布密度等数据。
多个地图类型相同的系列会在同一地图上显示,这时候使用第一个系列的配置项作为地图绘制的配置。
Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine
和 markPoint
。如果要实现点数据或者线数据的可视化,可以使用在地理坐标系组件上的散点图和线图。
示例:
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
地图系列中的数据内容数组。数组项可以为单个数值,如:
[12, 34, 56, 10, 23]
如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组,如:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
这时候可以将每项数组中的第二个值指定给 visualMap 组件。
更多时候我们需要指定每个数据项的名称,这时候需要每个项为一个对象:
[{
// 数据项的名称
name: '数据1',
// 数据项值8
value: 10
}, {
name: '数据2',
value: 20
}]
需要对个别内容指定进行个性化定义时:
[{
name: '数据1',
value: 10
}, {
// 数据项名称
name: '数据2',
value : 56,
//自定义特殊 tooltip,仅对该数据项有效
tooltip:{},
//自定义特殊itemStyle,仅对该item有效
itemStyle:{}
}]
在图例相应区域显示图例的颜色标识(系列标识的小圆点),存在 legend 组件时生效。
多个拥有相同地图类型的系列会使用同一个地图展现,如果多个系列都在同一个区域有值,ECharts 会对这些值统计得到一个数据。这个配置项就是用于配置统计的方式,目前有:
'sum'
取和。'average'
取平均值。'max'
取最大值。'min'
取最小值。地图的大小,见 layoutCenter
。支持相对于屏幕宽高的百分比或者绝对的像素大小。
layoutCenter
和 layoutSize
提供了除了 left/right/top/bottom/width/height
之外的布局手段。
在使用 left/right/top/bottom/width/height
的时候,可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间,并且保证不超出盒形的范围。此时可以通过 layoutCenter
属性定义地图中心在屏幕中的位置,layoutSize
定义地图的大小。如下示例
layoutCenter: ['30%', '30%'],
// 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域
layoutSize: 100
设置这两个值后 left/right/top/bottom/width/height
无效。
组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
地图区域的多边形 图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
高亮状态下的多边形样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
地图区域的颜色。
普通状态下的多边形样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
地图区域的颜色。
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
高亮状态下的标签文本样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
是否在高亮状态下显示标签。
普通状态下的标签文本样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
是否在普通状态下显示标签。
选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'
表示单选,或者'multiple'
表示多选。
自定义地区的名称映射,如:
{
'China' : '中国'
}
滚轮缩放的极限控制,通过min
, max
最小和最大的缩放值,默认的缩放为1
。
最大的缩放值
最小的缩放值
当前视角的缩放比例。
当前视角的中心点,用经纬度表示
例如:
center: [115.97, 29.71]
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale'
或者 'move'
。设置成 true
为都开启
地图类型。
ECharts 3 中因为地图精度的提高,不再内置地图数据增大代码体积,你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。
ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
下面是两种类型的使用示例:
JavaScript 引入示例
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
</script>
JSON 引入示例
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
ECharts 使用 geoJSON 格式的数据作为地图的轮廓,除了上述数据,你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中。参见示例 USA Population Estimates
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
热力图
热力图主要通过颜色去表现数值的大小,必须要配合 visualMap 组件使用。
可以应用在直角坐标系以及地理坐标系上,这两个坐标系上的表现形式相差很大,直角坐标系上必须要使用两个类目轴。
下面分别是直角坐标系和地理坐标系上应用的例子:
直角坐标系:
地理坐标系:
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
热力图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
热力图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况
在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:
[12, 34, 56, 10, 23]
在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 x
、y
或者极坐标系上的 radius
、angle
,如下:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:
[[0, 0, 2], ['星期一', 2, 1], [2, 1, 2], [3, 3, 5]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
双类目轴的示例可以参考 Github Punchcard 示例。
当需要对个别数据标志进行个性化定义时,数组项可用对象,其中的 value
像表示具体的数值,如:
[
12, 34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10, 23
]
Tip: 当某类目对应数据不存在时(ps:不存在不代表值为 0),可用-
表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。
最大的透明度,在地理坐标系(coordinateSystem: 'geo')上有效。
最小的透明度,在地理坐标系(coordinateSystem: 'geo')上有效。
每个点模糊的大小,在地理坐标系(coordinateSystem: 'geo')上有效。
使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
Candlestick 即我们常说的 K线图
。
在 ECharts3 中,同时支持 'candlestick'
和 'k'
这两种 'series.type'
('k'
会被自动转为 'candlestick'
)。
示例如下:
关于『涨』『跌』的颜色:
不同国家或地区对于 K线图 的颜色定义不一样,可能是『红涨绿跌』或『红涨蓝跌』(如大陆、台湾、日本、韩国等),可能是『绿涨红跌』(如西方国家、香港、新加坡等)。K线图也不一定要用红蓝、红绿来表示涨跌,也可以是『有色/无色』等表示方法。
默认配置项,采用的是『红涨蓝跌』。如果想更改这个颜色配置,在这些配置项中更改即可:
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
K线图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
K线图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '平均值到最大值',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type
设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex
指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
数据格式是如下的二维数组。
[
[2320.26, 2320.26, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
{ // 数据项也可以是 Object,从而里面能含有对此数据项的特殊设置。
value: [2300, 2291.3, 2288.26, 2308.38],
itemStyle: {...}
},
...
]
二维数组的每一数组项(上例中的每行)是渲染一个box,它含有四个量值,依次是:
[open, close, lowest, highest] (即:[开盘值, 收盘值, 最低值, 最高值])
candlestick 图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
candlestick 描边线宽。为 0 时无描边。
阴线
图形的描边颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
阳线
图形的描边颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
阴线
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
阳线
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
candlestick 描边线宽。为 0 时无描边。
阴线
图形的描边颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
阳线
图形的描边颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
阴线
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
阳线
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
布局方式,可选值:
'horizontal'
:水平排布各个 box。
'vertical'
:竖直排布各个 box。
默认值根据当前坐标系状况决定:如果 category
轴为横轴,则水平排布;否则竖直排布;如果没有 category
轴则水平排布。
是否开启 hover 在 box 上的动画效果。
是否启用图例 hover 时的联动高亮。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
Boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』。使用者知道概念,不需介绍。
示例如下:
也支持多个 series
在同一个坐标系中,参见 例子。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
盒须图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
盒须图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '平均值到最大值',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type
设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex
指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
数据格式是如下的二维数组。
[
[655, 850, 940, 980, 1175],
[672.5, 800, 845, 885, 1012.5],
[780, 840, 855, 880, 940],
[621.25, 767.5, 815, 865, 1011.25],
{ // 数据项也可以是 Object,从而里面能含有对此数据项的特殊设置。
value: [713.75, 807.5, 810, 870, 963.75],
itemStyle: {...}
},
...
]
二维数组的每一数组项(上例中的每行)是渲染一个box,它含有五个量值,依次是:
[min, Q1, median (or Q2), Q3, max]
数据的处理
ECharts 并不内置对原始数据的处理,输入给 boxplot
的数据须是如上五个统计结果量值。
但是 ECharts 也额外提供了简单的 原始数据处理函数,如这个 例子 使用了echarts.dataTool.prepareBoxplotData
来进行简单的数据统计。
boxplot 图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
boxplot描边线宽。为 0 时无描边。
boxplot图形的描边颜色。支持的格式同 color
。
boxplot图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
boxplot描边线宽。为 0 时无描边。
boxplot图形的描边颜色。支持的格式同 color
。
boxplot图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
box 的宽度的上下限。数组的意思是:[min, max]
。
可以是绝对数值,如 [7, 50]
,也可以是百分比,如 ['40%', '90%']
。百分比的意思是,最大可能宽度(bandWidth)的百分之多少。
布局方式,可选值:
'horizontal'
:水平排布各个 box。
'vertical'
:竖直排布各个 box。
默认值根据当前坐标系状况决定:如果 category
轴为横轴,则水平排布;否则竖直排布;如果没有 category
轴则水平排布。
是否开启 hover 在 box 上的动画效果。
是否启用图例 hover 时的联动高亮。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
Treemap 是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点。
示例:
视觉映射:
treemap 首先是把数值映射到『面积』这种视觉元素上。
此外,也支持对数据的其他维度进行视觉映射,例如映射到颜色、颜色明暗度上。
关于视觉设置,详见 series-treemap.levels。
下钻(drill down):
drill down
功能即点击后才展示子层级。
设置了 leafDepth 后,下钻(drill down
)功能开启。
如下是 drill down 的例子:
注:treemap 的配置项 和 ECharts2 相比有一些变化,一些不太成熟的配置方式不再支持或不再兼容:
center/size
方式的定位不再支持,而是统一使用 left/top/bottom/right/width/height
方式定位。
breadcrumb
的配置被移动到了 itemStyle.normal/itemStyle.emphasis
外部,和 itemStyle
平级。
root
的设置暂时不支持。目前可以使用 zoom
的方式来查看树更下层次的细节,或者使用 leafDepth 开启 "drill down" 功能。
label
的配置被移动到了 itemStyle.normal/itemStyle.emphasis
外部,和 itemStyle
平级。
itemStyle.normal.childBorderWidth
、itemStyle.normal.childBorderColor
不再支持(因为这个配置方式只能定义两层的treemap)。统一使用 series-treemap.levels 来进行各层级的定义。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
series-treemap.data 的数据格式是树状的,例如:
[ // 注意,最外层是一个数组,而非从某个根节点开始。
{
value: 1212,
children: [
{
value: 2323, // value字段的值,对应到面积大小。
// 也可以是数组,如 [2323, 43, 55],则数组第一项对应到面积大小。
// 数组其他项可以用于额外的视觉映射,详情参见 series-treemp.levels。
id: 'someid-1', // id 不是必须设置的。
// 但是如果想使用 API 来改变某个节点,需要用 id 来定位。
name: 'description of this node', // 显示在矩形中的描述文字。
children: [...],
label: { // 此节点特殊的 label 定义(如果需要的话)。
... // label的格式参见 series-treemap.label。
},
itemStyle: { // 此节点特殊的 itemStyle 定义(如果需要的话)。
... // label的格式参见 series-treemap.itemStyle。
}
},
{
value: 4545,
id: 'someid-2',
name: 'description of this node',
children: [
{
value: 5656,
id: 'someid-3',
name: 'description of this node',
children: [...]
},
...
]
}
]
},
{
value: [23, 59, 12]
// 如果没有children,可以不写
},
...
]
面包屑,能够显示当前节点的路径。
图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
boxplot描边线宽。为 0 时无描边。
boxplot图形的描边颜色。支持的格式同 color
。
boxplot图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
boxplot描边线宽。为 0 时无描边。
boxplot图形的描边颜色。支持的格式同 color
。
boxplot图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
当面包屑没有内容时候,设个最小宽度。
面包屑的高度。
asdf 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
asdf 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
asdf 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
asdf 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
是否显示面包屑。
注:treemap中
itemStyle
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
矩形的颜色。默认从全局调色盘 option.color 获取颜色。
矩形边框的颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。
注意:
如果设置此属性,则 borderColor
的设置无效,而是:取当前节点计算出的颜色(比如从父节点遗传而来),在此颜色值上设置 borderColorSaturation
得到最终颜色。这种方式,能够做出『不同区块有不同色调的矩形间隔线』的效果,能够便于区分层级。
矩形边框(border)/缝隙(gap)设置如何避免混淆
如果统一用一种颜色设置矩形的缝隙(gap),那么当不同层级的矩形同时展示时可能会出现混淆。
参见 例子,注意其中红色的区块中的子矩形其实是更深层级,和其他用白色缝隙区分的矩形不是在一个层级。所以,红色区块中矩形的分割线的颜色,我们在 borderColorSaturation
中设置为『加了饱和度变化的红颜色』,以示区别。
矩形边框 和 矩形间隔(gap)的颜色。
矩形内部子矩形(子节点)的间隔距离。
矩形边框线宽。为 0 时无边框。而矩形的内部子矩形(子节点)的间隔距离是由 gapWidth 指定的。
矩形颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。
矩形颜色的透明度。取值范围是 0 ~ 1 之间的浮点数。
矩形的颜色。默认从全局调色盘 option.color 获取颜色。
label
描述了每个矩形中,文本标签的样式。
注:treemap中
label
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
文字竖直对齐方式,可选值 'middle'
、'right
、'left'
文字水平对齐方式,可选值 'center'
、'right
、'left'
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
当文字超出矩形边界的时候,是否超出部分替换为省略号。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示文本标签。
文字竖直对齐方式,可选值 'middle'
、'right
、'left'
文字水平对齐方式,可选值 'center'
、'right
、'left'
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
当文字超出矩形边界的时候,是否超出部分替换为省略号。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示文本标签。
如果某个节点的矩形面积,小于这个数值(单位:px平方),则不显示这个节点的子节点。
这能够在矩形面积不足够大时候,隐藏节点的细节。当用户用鼠标缩放节点时,如果面积大于此阈值,又会显示子节点。
关于视觉设置,详见 series-treemap.levels。
注:treemap中
childrenVisibleMin
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
如果某个节点的矩形的面积,小于这个数值(单位:px平方),这个节点就不显示。
如果不加这个限制,很小的节点会影响显示效果。
关于视觉设置,详见 series-treemap.levels。
注:treemap中
visibleMin
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
表示同一层级节点,在颜色列表中(参见 color
属性)选择时,按照什么来选择。可选值:
'value'
:将节点的值(即 series-treemap.data.value)映射到颜色列表中。
这样得到的颜色,反应了节点值的大小。
可以使用 visualDimension 属性来设置,用 data 中哪个纬度的值来映射。
'index'
:将节点的 index
(序号)映射到颜色列表中。即同一层级中,第一个节点取颜色列表中第一个颜色,第二个节点取第二个。
这样得到的颜色,便于区分相邻节点。
'id'
:将节点的 id
(即 series-treemap.data.id)映射到颜色列表中。id
是用户指定的,这样能够使得,在treemap 通过 setOption 变化数值时,同一 id
映射到同一颜色,保持一致性。参见 例子。
关于视觉设置,详见 series-treemap.levels。
注:treemap中
colorMappingBy
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
本系列默认的 颜色饱和度 选取范围。数值范围 0 ~ 1。
例如, colorSaturation
可以是 [0.3, 1]
.
关于视觉设置,详见 series-treemap.levels。
注:treemap中
colorSaturation
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
本系列默认的 颜色透明度 选取范围。数值范围 0 ~ 1。
例如, colorAlpha
可以是 [0.3, 1]
.
关于视觉设置,详见 series-treemap.levels。
注:treemap中
colorAlpha
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
当前层级的最大 value 值。如果不设置则自动统计。
手动指定 visualMin
、visualMax
,即手动控制了 visual mapping 的值域(当 colorMappingBy 为 'value'
时有意义)。
当前层级的最小 value 值。如果不设置则自动统计。
手动指定 visualMin
、visualMax
,即手动控制了 visual mapping 的值域(当 colorMappingBy 为 'value'
时有意义)。
treemap
中支持对数据其他维度进行视觉映射。
首先,treemap的数据格式(参见 series-treemap.data)中,每个节点的 value
都可以是数组。数组每项是一个『维度』(dimension)。visualDimension
指定了额外的『视觉映射』使用的是数组的哪一项。默认为第 0
项。
关于视觉设置,详见 series-treemap.levels。
注:treemap中
visualDimension
属性可能在多处地方存在:
- 可以存在于 sereis-treemap 根下,表示本系列全局的统一设置。
可以存在于 series-treemap.levels 的每个数组元素中,表示树每个层级的统一设置。
存在于 series-treemap.data 的每个节点中,表示每个节点的特定设置。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
子节点,递归定义,格式同 series-treemap.data。
意义同 html
<a>
标签中的 target
,参见 series-treemap.data.link。可选值为:'blank'
或 'self'
。
点击此节点可跳转的超链接。须 series-treemap.nodeClick 值为 'link'
时才生效。
参见 series-treemap.data.target。
多层配置
treemap 中采用『三级配置』:
『每个节点』->『每个层级』->『每个系列』。
即我们可以对每个节点进行配置,也可以对树的每个层级进行配置,也可以 series 上设置全局配置。节点上的设置,优先级最高。
最常用的是『每个层级进行配置』,levels
配置项就是每个层级的配置。例如:
// Notice that in fact the data structure is not "tree", but is "forest".
// 注意,这个数据结构实际不是『树』而是『森林』
data: [
{
name: 'nodeA',
children: [
{name: 'nodeAA'},
{name: 'nodeAB'},
]
},
{
name: 'nodeB',
children: [
{name: 'nodeBA'}
]
}
],
levels: [
{...}, // 『森林』的顶层配置。即含有 'nodeA', 'nodeB' 的这层。
{...}, // 下一层配置,即含有 'nodeAA', 'nodeAB', 'nodeBA' 的这层。
{...}, // 再下一层配置。
...
]
视觉映射的规则
treemap中首要关注的是如何在视觉上较好得区分『不同层级』、『同层级中不同类别』。这需要合理得设置不同层级的『矩形颜色』、『边界粗细』、『边界颜色』甚至『矩形颜色饱和度』等。
参见这个例子,最顶层级用颜色区分,分成了『红』『绿』『蓝』等大块。每个颜色块中是下一个层级,使用颜色的饱和度来区分(参见 colorSaturation
)。最外层的矩形边界是『白色』,下层级的矩形边界是当前区块颜色加上饱和度处理(参见 borderColorSaturation
)。
treemap
是通过这样的规则来支持这种配置的:每个层级计算用户配置的 color
、colorSaturation
、borderColor
、colorSaturation
等视觉信息(在levels中配置)。如果子节点没有配置,则继承父的配置,否则使用自己的配置)。
这样,可以做到:父层级配置 color
列表,子层级配置 colorSaturation
。父层级的每个节点会从 color
列表中得到一个颜色,子层级的节点会从 colorSaturation
中得到一个值,并且继承父节点得到的颜色,合成得到自己的最终颜色。
维度与『额外的视觉映射』
例子:每一个 value
字段是一个 Array,其中每个项对应一个维度(dimension)。
[
{
value: [434, 6969, 8382],
children: [
{
value: [1212, 4943, 5453],
id: 'someid-1',
name: 'description of this node',
children: [...]
},
{
value: [4545, 192, 439],
id: 'someid-2',
name: 'description of this node',
children: [...]
},
...
]
},
{
value: [23, 59, 12],
children: [...]
},
...
]
treemap 默认把第一个维度(Array 第一项)映射到『面积』上。而如果想表达更多信息,用户可以把其他的某一个维度(series-treemap.visualDimension),映射到其他的『视觉元素』上,比如颜色明暗等。参见例子中,legend选择 Growth
时的状态。
矩形边框(border)/缝隙(gap)设置如何避免混淆
如果统一用一种颜色设置矩形的缝隙(gap),那么当不同层级的矩形同时展示时可能会出现混淆。
参见 例子,注意其中红色的区块中的子矩形其实是更深层级,和其他用白色缝隙区分的矩形不是在一个层级。所以,红色区块中矩形的分割线的颜色,我们在 borderColorSaturation
中设置为『加了饱和度变化的红颜色』,以示区别。
borderWidth, gapWidth, borderColor 的解释
点击某个节点,会自动放大那个节点到合适的比例(节点占可视区域的面积比例),这个配置项就是这个比例。
点击节点后的行为。可取值为:
false
:节点点击无反应。'zoomToNode'
:点击节点后缩放到节点。'link'
:如果节点数据中有 link 点击节点后会进行超链接跳转。是否开启拖拽漫游(移动和缩放)。可取值有:
false
:关闭。'scale'
或 'zoom'
:只能够缩放。'move'
或 'pan'
:只能够平移。true
:缩放和平移均可。设置了 leafDepth
后,下钻(drill down
)功能开启。drill down
功能即点击后才展示子层级。
leafDepth
表示『展示几层』,层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点。
例如,leafDepth
设置为 1
,表示展示一层节点。
默认没有开启 drill down
(即 leafDepth
为 null
或 undefined
)。
drill down 的例子:
期望矩形长宽比率。布局计算时会尽量向这个比率靠近。
默认为黄金比:0.5 * (1 + Math.sqrt(5))
。
treemap 组件的高度。
treemap 组件的宽度。
treemap 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
treemap 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
treemap 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
treemap 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
雷达图
雷达图主要用于表现多变量的数据,例如球员的各个属性分析。依赖 radar 组件。
下面是 AQI 数据用雷达图表现的示例。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
雷达图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
雷达图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
雷达图的数据是多变量(维度)的,如下示例:
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '预算分配(Allocated Budget)'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '实际开销(Actual Spending)'
}
]
其中的value
项数组是具体的数据,每个值跟 radar.indicator 一一对应。
区域填充样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
填充的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
填充的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
线条样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
折线拐点标志的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
雷达图所使用的 radar 组件的 index。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。
Tip: ECharts 2.x 中在地图上通过 markPoint 实现地图特效在 ECharts 3 中建议通过地理坐标系上的 effectScatter 实现。
如下示例:
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '平均值到最大值',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type
设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex
指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况
在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:
[12, 34, 56, 10, 23]
在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 x
、y
或者极坐标系上的 radius
、angle
,如下:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:
[[0, 0, 2], ['星期一', 2, 1], [2, 1, 2], [3, 3, 5]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
双类目轴的示例可以参考 Github Punchcard 示例。
当需要对个别数据标志进行个性化定义时,数组项可用对象,其中的 value
像表示具体的数值,如:
[
12, 34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10, 23
]
Tip: 当某类目对应数据不存在时(ps:不存在不代表值为 0),可用-
表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。
图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
涟漪特效相关配置。
波纹的绘制方式,可选 'stroke'
和 'fill'
。
动画中波纹的最大缩放比例。
动画的时间。
配置何时显示特效。
可选:
'render'
绘制完成后显示特效。'emphasis'
高亮(hover)的时候显示特效。特效类型,目前只支持涟漪特效'ripple'
。
是否启用图例 hover 时的联动高亮。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
散点(气泡)图。直角坐标系上的散点图可以用来展现数据的 x
,y
之间的关系,如果数据项有多个维度,其它维度的值可以通过不同大小的 symbol 展现成气泡图,也可以用颜色来表现。这些可以配合 visualMap 组件完成。
Tip: ECharts 2.x 中在地图上通过 markPoint 标记大量数据点方式在 ECharts 3 中建议通过地理坐标系上的 scatter 实现。下面示例就是在中国地图上用散点图展现了空气质量的分布。并且用 visualMap 组件将 PM2.5 映射到了颜色。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
散点图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
散点图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '平均值到最大值',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type
设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex
指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况
在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:
[12, 34, 56, 10, 23]
在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 x
、y
或者极坐标系上的 radius
、angle
,如下:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:
[[0, 0, 2], ['星期一', 2, 1], [2, 1, 2], [3, 3, 5]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
双类目轴的示例可以参考 Github Punchcard 示例。
当需要对个别数据标志进行个性化定义时,数组项可用对象,其中的 value
像表示具体的数值,如:
[
12, 34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10, 23
]
Tip: 当某类目对应数据不存在时(ps:不存在不代表值为 0),可用-
表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。
图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
开启绘制优化的阈值。
是否开启大规模散点图的优化,在数据图形特别多的时候(>=5k)可以开启。
开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。
缺点:优化后不能自定义设置单个数据项的样式。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
是否启用图例 hover 时的联动高亮。
是否开启鼠标 hover 的提示动画效果。
使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
饼图
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
Tip: 饼图更适合表现数据相对于总数的百分比等关系。如果只是表示不同类目数据间的大小,建议使用 柱状图,人们对于微小的弧度差别相比于微小的长度差别更不敏感,或者也可以通过配置 roseType 显示成南丁格尔图,通过半径大小区分数据的大小。
下面是自定义南丁格尔图的示例:
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
系列中的数据内容数组。数组项可以为单个数值,如:
[12, 34, 56, 10, 23]
如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组,如:
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
这时候可以将每项数组中的第二个值指定给 visualMap 组件。
更多时候我们需要指定每个数据项的名称,这时候需要每个项为一个对象:
[{
// 数据项的名称
name: '数据1',
// 数据项值8
value: 10
}, {
name: '数据2',
value: 20
}]
需要对个别内容指定进行个性化定义时:
[{
name: '数据1',
value: 10
}, {
// 数据项名称
name: '数据2',
value : 56,
//自定义特殊 tooltip,仅对该数据项有效
tooltip:{},
//自定义特殊itemStyle,仅对该item有效
itemStyle:{}
}]
饼图的半径,数组的第一项是内半径,第二项是外半径。
支持设置成百分比,相对于容器高宽中较小的一项的一半。
可以将内半径设大显示成圆环图(Donut chart)。
饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。
使用示例:
// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
标签的视觉引导线样式,在 label 位置 设置为'outside'
的时候会显示视觉引导线。
高亮状态下视觉引导线的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示视觉引导线。
普通状态下视觉引导线的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否平滑视觉引导线,默认不平滑,可以设置成 true
平滑显示,也可以设置为 0 到 1 的值,表示平滑程度。
视觉引导项第二段的长度。
视觉引导线第一段的长度。
是否显示视觉引导线。
饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 百分比
percent: number,
}
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 百分比
percent: number,
}
标签的位置。
可选:
是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。
如果不需要开启该策略,例如圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false
。
是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:
'radius'
面积展现数据的百分比,半径展现数据的大小。'area'
所有扇区面积相同,仅通过半径展现数据大小。最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互。
起始角度,支持范围[0, 360]。
饼图的扇区是否是顺时针排布。
选中扇区的偏移距离。
选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'
,'multiple'
,分别表示单选还是多选。
是否开启 hover 在扇区上的放大动画效果。
是否启用图例 hover 时的联动高亮。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
柱状/条形图
柱状/条形图 通过 柱形的高度/条形的宽度 来表现数据的大小,用于有至少一个类目轴或时间轴的直角坐标系上。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
柱状图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
柱状图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '平均值到最大值',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type
设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex
指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况
在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:
[12, 34, 56, 10, 23]
在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 x
、y
或者极坐标系上的 radius
、angle
,如下:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:
[[0, 0, 2], ['星期一', 2, 1], [2, 1, 2], [3, 3, 5]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
双类目轴的示例可以参考 Github Punchcard 示例。
当需要对个别数据标志进行个性化定义时,数组项可用对象,其中的 value
像表示具体的数值,如:
[
12, 34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10, 23
]
Tip: 当某类目对应数据不存在时(ps:不存在不代表值为 0),可用-
表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。
类目间柱形距离,默认为类目间距的20%,可设固定值
柱间距离,默认为柱形宽度的30%,可设固定值
柱条最小高度,可用于防止某数据项的值过小而影响交互。
柱条的最大宽度,不设时自适应。支持设置成相对于类目宽度的百分比。
柱条的宽度,不设时自适应。支持设置成相对于类目宽度的百分比。
数据堆叠,同个类目轴上系列配置相同的stack
值可以堆叠放置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'dashed'
, 'dotted'
。
柱条的描边宽度,默认不描边。
柱条的描边颜色。
柱条的颜色。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径。 如:
barBorderRadius: 5, // 统一设置四个角的圆角大小
barBorderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)
柱条的描边类型,默认为实线,支持 'dashed'
, 'dotted'
。
柱条的描边宽度,默认不描边。
柱条的描边颜色。
柱条的颜色。 默认从全局调色盘 option.color 获取颜色
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
是否启用图例 hover 时的联动高亮。
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
折线/面积图
折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
Tip: 设置 areaStyle 后可以绘制面积图。
Tip: 配合分段型 visualMap 组件可以将折线/面积图通过不同颜色分区间。如下示例
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
折线图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
折线图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
data: [
[
{
name: '平均值到最大值',
type: 'average'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标域',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
], [
{
name: '所有数据范围区间'
coord: ['min', 'min']
},
{
coord: ['max', 'max']
}
],
[
{
name: '两个屏幕坐标之间的标域',
x: 100,
y: 100
}, {
x: '90%',
y: '10%'
}
]
]
标域右下角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标域左上角的数据
该数据项标签的样式,起点和终点项的label
会合并到一起。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
该数据项区域的样式,起点和终点项的itemStyle
会合并到一起。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域值,可以不设。
相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'
。
相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'
。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。该标域的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标域文本配置。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标线。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
如果是笛卡尔坐标系的话,也可以通过只指定 xAxis
或者 yAxis
来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type
设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex
指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
终点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
终点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
终点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
终点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。起点的数据。
该数据项标签的样式,起点和终点项的 label
会合并到一起。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
该数据项线的样式,起点和终点项的 lineStyle
会合并到一起。
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
起点标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
起点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
起点标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
标注值,可以不设。
相对容器的屏幕 y 坐标,单位像素。
相对容器的屏幕 x 坐标,单位像素。
起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。
注:对于 axis.type 为 'category'
类型的轴
number
,则表示 axis.data 的 index。string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。例如:
{
xAxis: {
type: 'category',
data: ['5', '6', '9', '13', '19', '33']
// 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。
},
series: {
type: 'line',
data: [11, 22, 33, 44, 55, 66],
markPoint: { // markLine 也是同理
data: [{
coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
// 而只能写成 [string, string, ...]
}]
}
}
}
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
特殊的标注类型,用于标注最大值最小值等。
可选:
'min'
最大值。'max'
最大值。'average'
平均值。标线的样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
边的曲度,支持从 0 到 1 的值,值越大曲度越大。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标线的文本。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
、{d}
,分别表示系列名,数据名,数据值,百分比。
示例:
formatter: '{b}: {d}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。是否显示标签。
标线数值的精度,在显示平均值线的时候有用。
标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
图表标注。
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
prefix
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某个坐标',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某个屏幕坐标',
x: 100,
y: 100
}
]
标注的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
标注的文本。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况
在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:
[12, 34, 56, 10, 23]
在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 x
、y
或者极坐标系上的 radius
、angle
,如下:
[[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:
[[0, 0, 2], ['星期一', 2, 1], [2, 1, 2], [3, 3, 5]]
每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。
双类目轴的示例可以参考 Github Punchcard 示例。
当需要对个别数据标志进行个性化定义时,数组项可用对象,其中的 value
像表示具体的数值,如:
[
12, 34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10, 23
]
Tip: 当某类目对应数据不存在时(ps:不存在不代表值为 0),可用-
表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。
折线图在数据量远大于像素点时候的降采样策略,开启后可以有效的优化图表的绘制效率,默认关闭,也就是全部绘制不过滤数据点。
可选:
'average'
取过滤点的平均值'max'
取过滤点的最大值'min'
取过滤点的最小值'sum'
取过滤点的和折线平滑后是否在一个维度上保持单调性,可以设置成'x'
, 'y'
来指明是在 x 轴或者 y 轴上保持单调性。
通常在双数值轴上使用。
下面两张图分别是双数值轴中的折线图smoothMonotone
不设置以及设置为'x'
的区别。
smoothMonotone
:'x'
:是否平滑曲线显示。
区域填充样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
填充的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
线条样式。
注: 修改 lineStyle
中的颜色不会影响图例颜色,如果需要图例颜色和折线图颜色一致,需修改 itemStyle.normal.color,线条颜色默认也会取改颜色。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
折线拐点标志的样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。 默认从全局调色盘 option.color 获取颜色
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
标签的字体样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板
模板变量有 {a}
、{b}
、{c}
,分别表示系列名,数据名,数据值。
示例:
formatter: '{b}: {c}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
。
标签的位置。
可选:
[x, y]
通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
'top'
是否显示标签。
是否是阶梯线图。可以设置为 true
显示成阶梯线图,也支持设置成 'start'
, 'middle'
, 'end'
分别配置在当前点,当前点与下个点的中间点,下个点拐弯。
不同的配置效果如下:
是否对超出部分裁剪,默认裁剪。
是否连接空数据。
数据堆叠,同个类目轴上系列配置相同的stack
值后,后一个系列的值会在前一个系列的值上相加。
下面示例可以通过右上角 toolbox 中的堆叠切换看效果:
是否启用图例 hover 时的联动高亮。
是否开启 hover 在拐点标志上的提示动画效果。
标志图形默认只有主轴显示(随主轴标签间隔隐藏策略),如需全部显示可把 showAllSymbol 设为 true
。
是否显示 symbol, 如果 false
则只有在 tooltip hover 的时候显示。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
该系列使用的坐标系,可选:
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
timeline
组件,提供了在多个 ECharts option
间进行切换、播放等操作的功能。
示例效果如下:
timeline
和其他组件有些不同,它需要操作『多个option』。
假设,我们把 ECharts 的传统的 option 称为原子option,那么使用 timeline
时,传入 ECharts 的 option 就成为了一个集合多个原子option的复合option。如下示例:
// 如下,baseOption 是一个 『原子option』,options 数组中的每一项也是一个 『原子option』。
// 每个『原子option』中就是本文档中描述的各种配置项。
myChart.setOption(
{
baseOption: {
timeline: {
...,
data: ['2002-01-01', '2003-01-01', '2004-01-01']
},
title: {
subtext: '数据来自国家统计局'
},
grid: {...},
xAxis: [...],
yAxis: [...],
series: [
{ // 系列一的一些其他配置
type: 'bar',
...
},
{ // 系列二的一些其他配置
type: 'line',
...
},
{ // 系列三的一些其他配置
type: 'pie',
...
}
]
},
options: [
{ // 这是'2002-01-01' 对应的 option
title: {
text: '2002年统计值'
},
series: [
{data: []}, // 系列一的数据
{data: []}, // 系列二的数据
{data: []} // 系列三的数据
]
},
{ // 这是'2003-01-01' 对应的 option
title: {
text: '2003年统计值'
},
series: [
{data: []},
{data: []},
{data: []}
]
},
{ // 这是'2004-01-01' 对应的 option
title: {
text: '2004年统计值'
},
series: [
{data: []},
{data: []},
{data: []}
]
}
]
}
);
在上例中,timeline.data
中的每一项,对应于 options
数组中的每个 option
。
使用注意与最佳实践:
公有的配置项,推荐配置在 baseOption
中。timeline
播放切换时,会把 options
数组中的对应的 option
,与 baseOption
进行 merge 形成最终的 option
。
options
数组中,如果某一数组项中配置了某个属性,那么其他数组项中也必须配置某个属性,而不能缺省。否则这个属性的执行效果会遗留。
复合 option 中的 options
不支持 merge。
也就是说,当第二(或三、四、五 ...)次 chart.setOption(rawOption)
时,如果 rawOption
是复合 option(即包含 options
列表),那么新的 rawOption.options
列表不会和老的 options
列表进行 merge,而是简单替代。当然,rawOption.baseOption
仍然会正常和老的 option 进行merge。
与 ECharts 2 的兼容性:
ECharts 3 中不再支持 timeline.notMerge 参数,也就是不支持 notMerge 模式。如果遇到这种场景需要使用,可在外部进行option管理,并用 setOption(option, true) 这样的notMerge方式设置。
ECharts 3 和 ECharts 2 相比,timeline 属性的定义位置有所不同,移到了 baseOption
中,统一作为一个普通的组件看待。但是,仍然兼容 ECharts2 的 timeline 定义位置,只是不再推荐这样写。
timeline
数据。Array
的每一项,可以是直接的数值。
如果需要对每个数据项单独进行样式定义,则数据项写成 Object
。Object
中,value
属性为数值。其他属性如下例子,可以覆盖 timeline
中的属性配置。
如下例:
[
'2002-01-01',
'2003-01-01',
'2004-01-01',
{
value: '2005-01-01',
tooltip: { // 让鼠标悬浮到此项时能够显示 `tooltip`。
formatter: '{b} xxxx'
},
symbol: 'diamond', // 此项的图形的特别设置。
symbolSize: 16 // 此项的图形大小的特别设置。
},
'2006-01-01',
'2007-01-01',
'2008-01-01',
'2009-01-01',
'2010-01-01',
{
value: '2011-01-01',
tooltip: { // 让鼠标悬浮到此项时能够显示 `tooltip`。
formatter: function (params) {
return params.name + 'xxxx';
}
},
symbol: 'diamond',
symbolSize: 18
},
]
『控制按钮』的样式。『控制按钮』包括:『播放按钮』、『前进按钮』、『后退按钮』。
控制按钮的『高亮状态』的样式(hover时)。
按钮边框线宽。
按钮边框颜色。
按钮颜色。
控制按钮的『正常状态』的样式。
按钮边框线宽。
按钮边框颜色。
按钮颜色。
『前进按钮』的图形
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
『后退按钮』的图形
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
『播放按钮』的『可停止状态』的图形。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
『播放按钮』的『可播放状态』的图形。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
『控制按钮』的位置。
当 timeline.orient 为 'horizontal'
时,'left'
、'right'
有效。
当 timeline.orient 为 'vertical'
时,'top'
、'bottom'
有效。
『控制按钮』的间隔,单位为像素(px)。
『控制按钮』的尺寸,单位为像素(px)。
是否显示『前进按钮』。
是否显示『后退按钮』。
是否显示『播放按钮』。
是否显示『控制按钮』。设置为 false
则全不显示。
『当前项』(checkpoint
)的图形样式。
timeline
组件中『当前项』(checkpoint
)的动画的缓动效果。不同的缓动效果可以参考 缓动示例。
timeline
组件中『当前项』(checkpoint
)的动画时长。
timeline
组件中『当前项』(checkpoint
)在 timeline
播放切换中的移动,是否有动画。
timeline
组件中『当前项』(checkpoint
)的边框颜色。
timeline
组件中『当前项』(checkpoint
)的边框宽度。
timeline
组件中『当前项』(checkpoint
)的颜色。
timeline.checkpointStyle 标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
timeline.checkpointStyle 标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
timeline.checkpointStyle 标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
timeline.checkpointStyle 标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
timeline 图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
timeline 描边线宽。为 0 时无描边。
timeline 图形的描边颜色。支持的格式同 color
。
timeline 图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
timeline 描边线宽。为 0 时无描边。
timeline 图形的描边颜色。支持的格式同 color
。
timeline 图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
轴的文本标签。有 normal
和 emphasis
两个状态,normal
是文本正常的样式,emphasis
是文本高亮的样式,比如鼠标悬浮或者图例联动高亮的时候会使用 emphasis
作为文本的样式。
timeline.lable.emphasis文字的字体大小
timeline.lable.emphasis文字的字体系列
timeline.lable.emphasis文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
timeline.lable.emphasis文字字体的风格
可选:
'normal'
'italic'
'oblique'
timeline.lable.emphasis文字的颜色。
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
label
的旋转角度。正值表示逆时针旋转。
label
的间隔。当指定为数值时,例如指定为 2
,则每隔两个显示一个 label。
是否显示 label。
timeline.lable.normal文字的字体大小
timeline.lable.normal文字的字体系列
timeline.lable.normal文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
timeline.lable.normal文字字体的风格
可选:
'normal'
'italic'
'oblique'
timeline.lable.normal文字的颜色。
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
label
的旋转角度。正值表示逆时针旋转。
label
的间隔。当指定为数值时,例如指定为 2
,则每隔两个显示一个 label。
是否显示 label。
可选的配置方式:
'auto'
:
完全自动决定。
'left'
:
贴左边界放置。
当 timline.orient 为 'vertical'
时有效。
'right'
:当 timline.orient 为 'vertical'
时有效。
贴右边界放置。
'top'
:
贴上边界放置。
当 timline.orient 为 'horizontal'
时有效。
'bottom'
:
贴下边界放置。
当 timline.orient 为 'horizontal'
时有效。
number
:
指定某个数值时,表示 label
和轴的距离。为 0
时则和坐标轴重合,可以为正负值,决定 label
在坐标轴的哪一边。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
timeline 线的类型。
可选:
'solid'
'dashed'
'dotted'
timeline 线宽。
timeline 线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示轴线。可以设置为 false
不显示轴线,则可以做出不同的样式效果。
timeline标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
timeline标记的旋转角度。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
timeline标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
timeline标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
timeline
,反向则首位颠倒过来。摆放方式,可选值有:
'vertical'
:竖直放置。'horizontal'
:水平放置。timeline内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
timeline组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
timeline组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
timeline组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
timeline组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
表示『播放』按钮的位置。可选值:'left'
、'right'
。
拖动圆点的时候,是否实时更新视图。
表示播放的速度(跳动的间隔),单位毫秒(ms)。
表示是否循环播放。
表示是否反向播放。
表示是否自动播放。
表示当前选中项是哪项。比如,currentIndex
为 0
时,表示当前选中项为 timeline.data[0]
(即使用 options[0]
)。
轴的类型。可选值为:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
这个属性目前只支持为 slider
,不需要更改。
是否显示 timeline
组件。如果设置为false
,不会显示,但是功能还存在。
单轴。可以被应用到散点图中展现一维数据,如下示例
类目数据,在类目轴(type: 'category')中有效。
示例:
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
坐标轴在 grid 区域中的分隔区域,默认不显示。
分隔区域的样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
是否显示分隔区域。
坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
坐标轴在 grid 区域中的分隔线。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔线线的类型。
可选:
'solid'
'dashed'
'dotted'
分隔线线宽。
分隔线颜色,可以设置成单个颜色。
也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
示例
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示分隔线。默认数值轴显示,类目轴不显示。
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
刻度标签是否朝内,默认朝外。
坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
对数轴的底数,只在对数轴中(type: 'log')有效。
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
自动计算的坐标轴最小间隔大小。
例如可以设置成1
保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴中(type: 'value')有效。
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴刻度最大值,在类目轴中无效。
可以设置成特殊值 'dataMax'
,此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
坐标轴刻度最小值,在类目轴中无效。
可以设置成特殊值 'dataMin'
,此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap
可以配置为 true
和 false
。默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。
示例:
boundaryGap: ['20%', '20%']
是否是反向坐标轴。ECharts 3 中新加。
坐标轴名字旋转,角度值。
坐标轴名称与轴线之间的距离。
坐标轴名称的文字样式。
坐标轴名称文字的字体大小
坐标轴名称文字的字体系列
坐标轴名称文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
坐标轴名称文字字体的风格
可选:
'normal'
'italic'
'oblique'
坐标轴名称的颜色,默认取 axisLine.lineStyle.color。
坐标轴名称显示位置。
可选:
'start'
'middle'
'end'
坐标轴名称。
坐标轴类型。
可选:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
轴的朝向,默认水平朝向,可以设置成 'vertical'
垂直朝向。
grid 组件的高度。默认自适应。
grid 组件的宽度。默认自适应。
grid 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
grid 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
grid 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
grid 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
这个组件是平行坐标系中的坐标轴。
平行坐标系介绍
平行坐标系(Parallel Coordinates) 是一种常用的可视化高维数据的图表。
例如 series-parallel.data 中有如下数据:
[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object,从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。
平行坐标系适用于对这种多维数据进行可视化分析。每一个维度(每一列)对应一个坐标轴,每一个『数据项』是一条线,贯穿多个坐标轴。在坐标轴上,可以进行数据选取等操作。如下:
配置方式概要
『平行坐标系』的 option
基本配置如下例:
option = {
parallelAxis: [ // 这是一个个『坐标轴』的定义
{dim: 0, name: schema[0].text}, // 每个『坐标轴』有个 'dim' 属性,表示坐标轴的维度号。
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // 坐标轴也可以支持类别型数据
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
}
],
parallel: { // 这是『坐标系』的定义
left: '5%', // 平行坐标系的位置设置
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // 『坐标轴』的公有属性可以配置在这里避免重复书写
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // 这里三个系列共用一个平行坐标系
{
name: '北京',
type: 'parallel', // 这个系列类型是 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
...
]
},
{
name: '上海',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
...
]
},
{
name: '广州',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
...
]
}
]
};
需要涉及到三个组件:parallel、parallelAxis、series-parallel
这个配置项是平行坐标系的『坐标系』本身。一个系列(series
)或多个系列(如上图中的『北京』、『上海』、『广州』分别各是一个系列)可以共用这个『坐标系』。
和其他坐标系一样,坐标系也可以创建多个。
位置设置,也是放在这里进行。
这个是『坐标系』中的坐标轴的配置。自然,需要有多个坐标轴。
其中有 parallelAxis.parallelIndex 属性,指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。
这个是『系列』的定义。系列被画到『坐标系』上。
其中有 series-parallel.parallelIndex 属性,指定使用哪个『坐标系』。默认使用第一个『坐标系』。
配置注意和最佳实践
配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。
如果数据量很大并且发生卡顿
建议把 series-parallel.lineStyle.normal.width 设为 0.5
(或更小),
可能显著改善性能。
高维数据的显示
维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。
可以通过 parallel.axisExpandable 来改善显示效果,如下例子:
类目数据,在类目轴(type: 'category')中有效。
示例:
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
刻度标签是否朝内,默认朝外。
坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
对数轴的底数,只在对数轴中(type: 'log')有效。
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
自动计算的坐标轴最小间隔大小。
例如可以设置成1
保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴中(type: 'value')有效。
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴刻度最大值,在类目轴中无效。
可以设置成特殊值 'dataMax'
,此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
坐标轴刻度最小值,在类目轴中无效。
可以设置成特殊值 'dataMin'
,此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap
可以配置为 true
和 false
。默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。
示例:
boundaryGap: ['20%', '20%']
是否是反向坐标轴。ECharts 3 中新加。
坐标轴名字旋转,角度值。
坐标轴名称与轴线之间的距离。
坐标轴名称的文字样式。
坐标轴名称文字的字体大小
坐标轴名称文字的字体系列
坐标轴名称文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
坐标轴名称文字字体的风格
可选:
'normal'
'italic'
'oblique'
坐标轴名称的颜色,默认取 axisLine.lineStyle.color。
坐标轴名称显示位置。
可选:
'start'
'middle'
'end'
坐标轴名称。
坐标轴类型。
可选:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
在坐标轴上可以进行框选,这里是一些框选的设置。
选框的透明度。
选框的填充色。
选框的边框颜色。
选框的边框宽度。
框选范围的宽度。
是否坐标轴刷选的时候,实时刷新视图。如果设为 false
,则在刷选动作结束时候,才刷新视图。
大数据量时,建议设置成 false
,从而避免卡顿。
用于定义『坐标轴』对应到哪个『坐标系』中。
比如有如下配置:
myChart.setOption({
parallel: [
{...}, // 第一个平行坐标系
{...} // 第二个平行坐标系
],
parallelAxis: [
{parallelIndex: 1, ...}, // 第一个坐标轴,对应到第二个平行坐标系
{parallelIndex: 0, ...}, // 第二个坐标轴,对应到第一个平行坐标系
{parallelIndex: 1, ...}, // 第三个坐标轴,对应到第二个平行坐标系
{parallelIndex: 0, ...} // 第四个坐标轴,对应到第一个平行坐标系
],
...
});
只有一个平行坐标系时可不用设置,自动取默认值 0
。
坐标轴的维度序号。
例如 series-parallel.data 中有如下数据:
[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object,从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。
dim
定义了数据的哪个维度(即哪个『列』)会对应到此坐标轴上。
从 0
开始计数。例如,假设坐标轴的 dim
为 1
,则表示数据中的第二列会对应到此坐标轴上。
平行坐标系介绍
平行坐标系(Parallel Coordinates) 是一种常用的可视化高维数据的图表。
例如 series-parallel.data 中有如下数据:
[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object,从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。
平行坐标系适用于对这种多维数据进行可视化分析。每一个维度(每一列)对应一个坐标轴,每一个『数据项』是一条线,贯穿多个坐标轴。在坐标轴上,可以进行数据选取等操作。如下:
配置方式概要
『平行坐标系』的 option
基本配置如下例:
option = {
parallelAxis: [ // 这是一个个『坐标轴』的定义
{dim: 0, name: schema[0].text}, // 每个『坐标轴』有个 'dim' 属性,表示坐标轴的维度号。
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // 坐标轴也可以支持类别型数据
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
}
],
parallel: { // 这是『坐标系』的定义
left: '5%', // 平行坐标系的位置设置
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // 『坐标轴』的公有属性可以配置在这里避免重复书写
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // 这里三个系列共用一个平行坐标系
{
name: '北京',
type: 'parallel', // 这个系列类型是 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
...
]
},
{
name: '上海',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
...
]
},
{
name: '广州',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
...
]
}
]
};
需要涉及到三个组件:parallel、parallelAxis、series-parallel
这个配置项是平行坐标系的『坐标系』本身。一个系列(series
)或多个系列(如上图中的『北京』、『上海』、『广州』分别各是一个系列)可以共用这个『坐标系』。
和其他坐标系一样,坐标系也可以创建多个。
位置设置,也是放在这里进行。
这个是『坐标系』中的坐标轴的配置。自然,需要有多个坐标轴。
其中有 parallelAxis.parallelIndex 属性,指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。
这个是『系列』的定义。系列被画到『坐标系』上。
其中有 series-parallel.parallelIndex 属性,指定使用哪个『坐标系』。默认使用第一个『坐标系』。
配置注意和最佳实践
配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。
如果数据量很大并且发生卡顿
建议把 series-parallel.lineStyle.normal.width 设为 0.5
(或更小),
可能显著改善性能。
高维数据的显示
维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。
可以通过 parallel.axisExpandable 来改善显示效果,如下例子:
配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。
类目数据,在类目轴(type: 'category')中有效。
示例:
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
刻度标签是否朝内,默认朝外。
坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
对数轴的底数,只在对数轴中(type: 'log')有效。
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
自动计算的坐标轴最小间隔大小。
例如可以设置成1
保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴中(type: 'value')有效。
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴刻度最大值,在类目轴中无效。
可以设置成特殊值 'dataMax'
,此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
坐标轴刻度最小值,在类目轴中无效。
可以设置成特殊值 'dataMin'
,此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap
可以配置为 true
和 false
。默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。
示例:
boundaryGap: ['20%', '20%']
是否是反向坐标轴。ECharts 3 中新加。
坐标轴名字旋转,角度值。
坐标轴名称与轴线之间的距离。
坐标轴名称的文字样式。
坐标轴名称文字的字体大小
坐标轴名称文字的字体系列
坐标轴名称文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
坐标轴名称文字字体的风格
可选:
'normal'
'italic'
'oblique'
坐标轴名称的颜色,默认取 axisLine.lineStyle.color。
坐标轴名称显示位置。
可选:
'start'
'middle'
'end'
坐标轴名称。
坐标轴类型。
可选:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
在展开状态,轴的间距是多少,单位为像素。
初始时,有多少个轴会处于展开状态。建议根据你的维度个数而手动指定。
参见 parallel.axisExpandCenter 参见 parallel.axisExpandable
初始时,以哪个轴为中心展开,这里给出轴的 index。没有默认值,需要手动指定。
维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。
可以通过 parallel.axisExpandable 来改善显示效果,如下例子:
是否允许点击展开折叠 axis。
布局方式,可选值为:
'horizontal'
:水平排布各个坐标轴。
'vertical'
:竖直排布各个坐标轴。
parallel 组件的高度。默认自适应。
parallel 组件的宽度。默认自适应。
parallel 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
parallel 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
parallel 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
parallel 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
地理坐标系组件。
地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。
在地理坐标系中使用散点图的示例:
3.1.10
开始 geo 组件也支持鼠标事件。事件参数为
{
componentType: 'geo',
// Geo 组件在 option 中的 index
geoIndex: number,
// 点击区域的名称,比如"上海"
name: string,
// 传入的点击区域的 region 对象,见 geo.regions
region: Object
}
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
在地图中对特定的区域配置样式。
例如:
regions: [{
name: '广东',
itemStyle: {
normal: {
color: 'red'
}
}
}]
地图的大小,见 layoutCenter
。支持相对于屏幕宽高的百分比或者绝对的像素大小。
layoutCenter
和 layoutSize
提供了除了 left/right/top/bottom/width/height
之外的布局手段。
在使用 left/right/top/bottom/width/height
的时候,可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间,并且保证不超出盒形的范围。此时可以通过 layoutCenter
属性定义地图中心在屏幕中的位置,layoutSize
定义地图的大小。如下示例
layoutCenter: ['30%', '30%'],
// 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域
layoutSize: 100
设置这两个值后 left/right/top/bottom/width/height
无效。
组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
地图区域的多边形 图形样式,有 normal
和 emphasis
两个状态。normal
是图形在默认状态下的样式;emphasis
是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
高亮状态下的多边形样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
普通状态下的多边形样式。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle.normal
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 normal
, emphasis
两个状态。
高亮状态下的标签文本样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
是否在高亮状态下显示标签。
普通状态下的标签文本样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
是否在普通状态下显示标签。
选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'
表示单选,或者'multiple'
表示多选。
自定义地区的名称映射,如:
{
'China' : '中国'
}
滚轮缩放的极限控制,通过min
, max
最小和最大的缩放值,默认的缩放为1
。
最大的缩放值
最小的缩放值
当前视角的缩放比例。
当前视角的中心点,用经纬度表示
例如:
center: [115.97, 29.71]
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale'
或者 'move'
。设置成 true
为都开启
地图类型。
ECharts 3 中因为地图精度的提高,不再内置地图数据增大代码体积,你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。
ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
下面是两种类型的使用示例:
JavaScript 引入示例
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
</script>
JSON 引入示例
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
ECharts 使用 geoJSON 格式的数据作为地图的轮廓,除了上述数据,你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中。参见示例 USA Population Estimates
是否显示地理坐标系组件。
brush
是区域选择组件,用户可以选择图中一部分数据,从而便于向用户展示被选中数据,或者他们的一些统计计算结果。
示例如下:
刷子的类型和启动按钮
目前 brush
组件支持的图表类型:scatter
、bar
、candlestick
(parallel
本身自带刷选功能,但并非由 brush 组件来提供)。
点击 toolbox
中的按钮,能够进行『区域选择』、『清除选择』等操作。
横向刷子
的示例如下(点击 toolbox
中的按钮启动刷选):
bar
图中的 brush
(点击 toolbox
中的按钮启动刷选):
启动 brush
的按钮既可以在 toolbox
中指定(参见 toolbox.feature.brush.type),也可以在 brush
组件的配置中指定(参见 brush.toolbox)。
支持这几种选框:矩形刷子
,任意形状刷子
,横向刷子
,纵向刷子
。参见 brush.toolbox。
可以使用 保持选择
按钮,切换单选和多选模式。
刷选和坐标系的关系
可以设置 brush
是『全局的』还是『属于坐标系的』。
全局 brush
在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。
坐标系 brush
在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。
坐标系 brush 实际更为常用,尤其是在 geo 中。
通过指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。
这几个配置项的取值可以是:
'all'
,表示所有number
,如 0
,表示这个 index 所对应的坐标系。Array
,如 [0, 4, 2]
,表示指定这些 index 所对应的坐标系。'none'
或 null
或 undefined
,表示不指定。例如:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选,也就是上面定义的 geo 组件中。
...
}
};
例如:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0,属于 grid 1。
{gridIndex: 0, ...} // xAxis 1,属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0,属于 grid 1。
{gridIndex: 0, ...} // yAxis 1,属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
使用 API 控制选框
可以通过调用 dispatchAction
来用程序主动渲染选框,例如:
myChart.dispatchAction({
type: 'brush',
areas: [
{
geoIndex: 0,
// 指定选框的类型。
brushType: 'polygon',
// 指定选框的形状。
coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]
}
]
});
详情参见 action.brush
brushLink
不同系列间,选中的项可以联动。
参见如下效果(刷选一个 scatter
,其他 scatter
以及 parallel
图都会有选中效果):
brushLink
配置项是一个数组,内容是 seriesIndex,指定了哪些 series 可以被联动。例如可以是:
[3, 4, 5]
表示 seriesIndex 为 3
, 4
, 5
的 series 可以被联动。'all'
表示所有 series 都进行 brushLink。'none'
或 null
或 undefined
表示不启用 brushLink 功能。注意
brushLink 是通过 dataIndex 进行映射,所以需要保证,联动的每个系列的 data
都是 index
对应的。*
例如:
option = {
brush: {
brushLink: [0, 1]
},
series: [
{
type: 'bar'
data: [232, 4434, 545, 654] // data 有四个项
},
{
type: 'parallel',
data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同样有四个项,两个系列的 data 是对应的。
}
]
};
参见 brush.brushLink。
throttle / debounce / 事件延迟
默认情况,刷选或者移动选区的时候,会不断得发 brushSelected
事件,从而告诉外界选中的内容。
但是频繁的事件可能导致性能问题,或者动画效果很差。所以 brush 组件提供了 brush.throttleType,brush.throttleDelay 来解决这个问题。
throttleType 取值可以是:
'debounce'
:表示只有停止动作了(即一段时间没有操作了),才会触发事件。时间阈值由 brush.throttleDelay 指定。'fixRate'
:表示按照一定的频率触发时间,时间间隔由 brush.throttleDelay 指定。例如这个 例子,就是使用了 debounce
的效果:只有用户停止动作了,柱状图才更新。不然的话,如果柱状图的频繁更新,那么动画效果很差。
被选中项和未被选中项的视觉设置
参见 brush.inBrush 和 brush.outOfBrush。
下面是详细配置。
定义 在选中范围外 的视觉元素。
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。注意,如果 outOfBrush 没有指定,默认会设置 color: '#ddd'
,如果你不想要这个color,比如可以
换成:
brush: {
...,
outOfBrush: {
colorAlpha: 0.1
}
}
定义 在选中范围中 的视觉元素。
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。大多数情况下,inBrush 可以不指定,维持本来的视觉配置。
在 brush.brushMode 为 'single'
的情况下,是否支持『单击清除所有选框』。
默认为 0
表示不开启 throttle。
默认情况,刷选或者移动选区的时候,会不断得发 brushSelected
事件,从而告诉外界选中的内容。
但是频繁的事件可能导致性能问题,或者动画效果很差。所以 brush 组件提供了 brush.throttleType,brush.throttleDelay 来解决这个问题。
throttleType 取值可以是:
'debounce'
:表示只有停止动作了(即一段时间没有操作了),才会触发事件。时间阈值由 brush.throttleDelay 指定。'fixRate'
:表示按照一定的频率触发时间,时间间隔由 brush.throttleDelay 指定。例如这个 例子,就是使用了 debounce
的效果:只有用户停止动作了,柱状图才更新。不然的话,如果柱状图的频繁更新,那么动画效果很差。
默认情况,刷选或者移动选区的时候,会不断得发 brushSelected
事件,从而告诉外界选中的内容。
但是频繁的事件可能导致性能问题,或者动画效果很差。所以 brush 组件提供了 brush.throttleType,brush.throttleDelay 来解决这个问题。
throttleType 取值可以是:
'debounce'
:表示只有停止动作了(即一段时间没有操作了),才会触发事件。时间阈值由 brush.throttleDelay 指定。'fixRate'
:表示按照一定的频率触发时间,时间间隔由 brush.throttleDelay 指定。例如这个 例子,就是使用了 debounce
的效果:只有用户停止动作了,柱状图才更新。不然的话,如果柱状图的频繁更新,那么动画效果很差。
选框的默认样式,值为:
{
borderWidth: 1,
color: 'rgba(120,140,180,0.3)',
borderColor: 'rgba(120,140,180,0.8)',
width: null
},
已经选好的选框是否可以被调整形状或平移。
默认的刷子的模式。可取值为:
'single'
:单选。'multiple'
:多选。默认的刷子类型。
'rect'
:矩形选框。'polygon'
:任意形状选框。'lineX'
:横向选择。'lineY'
:纵向选择。指定哪些 yAxisIndex 可以被刷选。
可以设置 brush
是『全局的』还是『属于坐标系的』。
全局 brush
在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。
坐标系 brush
在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。
坐标系 brush 实际更为常用,尤其是在 geo 中。
通过指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。
这几个配置项的取值可以是:
'all'
,表示所有number
,如 0
,表示这个 index 所对应的坐标系。Array
,如 [0, 4, 2]
,表示指定这些 index 所对应的坐标系。'none'
或 null
或 undefined
,表示不指定。例如:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选,也就是上面定义的 geo 组件中。
...
}
};
例如:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0,属于 grid 1。
{gridIndex: 0, ...} // xAxis 1,属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0,属于 grid 1。
{gridIndex: 0, ...} // yAxis 1,属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
指定哪些 xAxisIndex 可以被刷选。
可以设置 brush
是『全局的』还是『属于坐标系的』。
全局 brush
在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。
坐标系 brush
在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。
坐标系 brush 实际更为常用,尤其是在 geo 中。
通过指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。
这几个配置项的取值可以是:
'all'
,表示所有number
,如 0
,表示这个 index 所对应的坐标系。Array
,如 [0, 4, 2]
,表示指定这些 index 所对应的坐标系。'none'
或 null
或 undefined
,表示不指定。例如:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选,也就是上面定义的 geo 组件中。
...
}
};
例如:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0,属于 grid 1。
{gridIndex: 0, ...} // xAxis 1,属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0,属于 grid 1。
{gridIndex: 0, ...} // yAxis 1,属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
指定哪些 geo 可以被刷选。
可以设置 brush
是『全局的』还是『属于坐标系的』。
全局 brush
在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。
坐标系 brush
在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。
坐标系 brush 实际更为常用,尤其是在 geo 中。
通过指定 brush.geoIndex 或 brush.xAxisIndex 或 brush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。
这几个配置项的取值可以是:
'all'
,表示所有number
,如 0
,表示这个 index 所对应的坐标系。Array
,如 [0, 4, 2]
,表示指定这些 index 所对应的坐标系。'none'
或 null
或 undefined
,表示不指定。例如:
option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选,也就是上面定义的 geo 组件中。
...
}
};
例如:
option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0,属于 grid 1。
{gridIndex: 0, ...} // xAxis 1,属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0,属于 grid 1。
{gridIndex: 0, ...} // yAxis 1,属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
指定哪些 series 可以被刷选,可取值为:
'all'
: 所有 series'Array'
: series index 列表'number'
: 某个 series index不同系列间,选中的项可以联动。
参见如下效果(刷选一个 scatter
,其他 scatter
以及 parallel
图都会有选中效果):
brushLink
配置项是一个数组,内容是 seriesIndex,指定了哪些 series 可以被联动。例如可以是:
[3, 4, 5]
表示 seriesIndex 为 3
, 4
, 5
的 series 可以被联动。'all'
表示所有 series 都进行 brushLink。'none'
或 null
或 undefined
表示不启用 brushLink 功能。注意
brushLink 是通过 dataIndex 进行映射,所以需要保证,联动的每个系列的 data
都是 index
对应的。*
例如:
option = {
brush: {
brushLink: [0, 1]
},
series: [
{
type: 'bar'
data: [232, 4434, 545, 654] // data 有四个项
},
{
type: 'parallel',
data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同样有四个项,两个系列的 data 是对应的。
}
]
};
使用在 toolbox 中的按钮。
brush 相关的 toolbox 按钮有:
'rect'
:开启矩形选框选择功能。'polygon'
:开启任意形状选框选择功能。'lineX'
:开启横向选择功能。'lineY'
:开启纵向选择功能。'keep'
:切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。'clear'
:清空所有选框。工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
如下示例:
工具栏组件的高度。默认自适应。
工具栏组件的宽度。默认自适应。
工具栏组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
工具栏组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
工具栏组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
工具栏组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
公用的 icon 样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
文本对齐方式,'left'
/ 'right'
。
文本位置,'left'
/ 'right'
/ 'top'
/ 'bottom'
。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
各工具配置项。
除了各个内置的工具按钮外,还可以自定义工具按钮。
注意,自定义的工具名字,只能以 my
开头,例如下例中的 myTool1
,myTool2
:
{
toolbox: {
feature: {
myTool1: {
show: true,
title: '自定义扩展方法1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
alert('myToolHandler1')
}
},
myTool2: {
show: true,
title: '自定义扩展方法',
icon: 'image://http://echarts.baidu.com/images/favicon.png',
onclick: function (){
alert('myToolHandler2')
}
}
}
}
}
选框组件的控制按钮。
也可以不在这里指定,而是在 brush.toolbox 中指定。
标题文本。
每个按钮的 icon path。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
使用的按钮,取值:
'rect'
:开启矩形选框选择功能。'polygon'
:开启任意形状选框选择功能。'lineX'
:开启横向选择功能。'lineY'
:开启纵向选择功能。'keep'
:切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。'clear'
:清空所有选框。动态类型切换 示例:
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
}
}
各个类型对应的系列的列表。
各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项。
动态类型切换 icon 样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
文本对齐方式,'left'
/ 'right'
。
文本位置,'left'
/ 'right'
/ 'top'
/ 'bottom'
。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
各个类型的 icon path,可以分别配置。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
各个类型的标题文本,可以分别配置。
启用的动态类型,包括'line'
(切换为折线图), 'bar'
(切换为柱状图), 'stack'
(切换为堆叠模式), 'tiled'
(切换为平铺模式)。
是否显示该工具。
数据区域缩放。目前只支持直角坐标系的缩放。
指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false
则不控制任何y轴。如果设置成 3
则控制 axisIndex 为 3
的y轴。如果设置为 [0, 3]
则控制 axisIndex 为 0
和 3
的y轴。
指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false
则不控制任何x轴。如果设置成 3
则控制 axisIndex 为 3
的x轴。如果设置为 [0, 3]
则控制 axisIndex 为 0
和 3
的x轴。
数据区域缩放 icon 样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
文本对齐方式,'left'
/ 'right'
。
文本位置,'left'
/ 'right'
/ 'top'
/ 'bottom'
。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
缩放和还原的 icon path。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
缩放和还原的标题文本。
是否显示该工具。
数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
按钮文本颜色。
按钮颜色。
文本颜色。
数据视图浮层文本输入区边框颜色。
数据视图浮层文本输入区背景色。
数据视图浮层背景色。
数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']
。
(container:HTMLDomElement, option:Object) => Object
在使用 optionToContent 的情况下,如果支持数据编辑后的刷新,需要自行通过该函数实现组装 option 的逻辑。
(option:Object) => HTMLDomElement|string
自定义 dataView 展现函数,用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串。
如下示例使用表格展现数据值:
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
是否不可编辑(只读)。
数据视图 icon 样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
文本对齐方式,'left'
/ 'right'
。
文本位置,'left'
/ 'right'
/ 'top'
/ 'bottom'
。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
是否显示该工具。
配置项还原。
还原 icon 样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
文本对齐方式,'left'
/ 'right'
。
文本位置,'left'
/ 'right'
/ 'top'
/ 'bottom'
。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
是否显示该工具。
保存为图片。
保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2。
保存为图片 icon 样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
文本对齐方式,'left'
/ 'right'
。
文本位置,'left'
/ 'right'
/ 'top'
/ 'bottom'
。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
是否显示该工具。
保存为图片时忽略的组件列表,默认忽略工具栏。
保存的图片背景色,默认使用 backgroundColor,如果backgroundColor
不存在的话会取白色。
保存的文件名称,默认使用 title.text 作为名称。
保存的图片格式。支持 'png'
和 'jpeg'
。
是否在鼠标 hover 的时候显示每个工具 icon 的标题。
工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
工具栏 icon 的大小。
工具栏 icon 的布局朝向。
可选:
是否显示工具栏组件。
提示框组件。
坐标轴指示器配置项,在 trigger 为 'axis'
时有效。
axisPointer.type 为 'shadow'
时有效。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
填充的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
axisPointer.type 为 'cross'
时有效。
十字准星准星上的文字样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
axisPointer.type 为 'line'
时有效。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
数据更新动画的缓动效果。
数据更新动画的时长。
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
初始动画的时长。
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
是否开启动画,默认开启。
指示器的坐标轴。可以是 'x'
, 'y'
, 'radius'
, 'angle'
。默认取类目轴或者时间轴。
指示器类型。
可选
'line'
直线指示器
'cross'
十字准星指示器
'shadow'
阴影指示器
额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
提示框浮层的文本样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
提示框浮层的边框宽。
提示框浮层的边框颜色。
提示框浮层的背景颜色。
提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
字符串模板。
模板变量有 {a}
, {b}
,{c}
,{d}
,{e}
,分别表示系列名,数据名,数据值等。
在 trigger 为 'axis'
的时候,会有多个系列的数据,此时可以通过 {a0}
, {a1}
, {a2}
这种后面加索引的方式表示系列的索引。
不同图表类型下的 {a}
,{b}
,{c}
,{d}
含义不一样。
其中变量{a}
, {b}
, {c}
, {d}
在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图、K线图 : {a}
(系列名称),{b}
(类目值),{c}
(数值), {d}
(无)
散点图(气泡)图 : {a}
(系列名称),{b}
(数据名称),{c}
(数值数组), {d}
(无)
地图 : {a}
(系列名称),{b}
(区域名称),{c}
(合并数值), {d}
(无)
饼图、仪表盘、漏斗图: {a}
(系列名称),{b}
(数据项名称),{c}
(数值), {d}
(百分比)
更多其它图表模板变量的含义可以见相应的图表的 label.normal.formatter 配置项。
示例:
formatter: '{b0}: {c0}<br />{b1}: {c1}'
回调函数。
回调函数格式:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一个参数 params
是 formatter 需要的数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
在 trigger 为 'axis'
的时候 params
是多个系列的数据数组。
注: ECharts 2.x 使用数组表示各参数的方式不再支持。
第二个参数 ticket
是异步回调标识,配合第三个参数 callback
使用。
第三个参数 callback
是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 ticket
和 html
更新提示框浮层内容。
示例:
formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}
提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动。
提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。
可选:
Array
通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置。
示例:
// 绝对位置,相对于容器左侧 10px, 上侧 10 px
position: [10, 10]
// 相对位置,放置在容器正中间
position: ['50%', '50%']
Function
回调函数,格式如下
(point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object) => Array
第一个参数是鼠标位置,第二个参数同 formatter 的参数相同,第三个参数是 tooltip 的 dom 对象, 第四个参数只有鼠标在图形上时有效,是一个用x
, y
, width
, height
四个属性表达的图形包围盒。返回值是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相对的百分比。
如下示例:
position: function (point, params, dom) {
// 固定在顶部
return [point[0], '10%'];
}
'inside'
鼠标所在图形的内部中心位置,只在 trigger 为'item'
的时候有效。
'top'
鼠标所在图形上侧,只在 trigger 为'item'
的时候有效。
'left'
鼠标所在图形左侧,只在 trigger 为'item'
的时候有效。
'right'
鼠标所在图形右侧,只在 trigger 为'item'
的时候有效。
'bottom'
鼠标所在图形底侧,只在 trigger 为'item'
的时候有效。
鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true
。
浮层隐藏的延迟,单位为 ms,在 alwaysShowContent 为 true
的时候无效。
浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn 为 'mousemove'
时有效。
是否永远显示提示框内容,默认情况下在移出可触发提示框区域后 一定时间 后隐藏,设置为 true
可以保证一直显示提示框内容。
该属性为 ECharts 3.0 中新加。
提示框触发的条件,可选:
'mousemove'
鼠标移动时触发。
'click'
鼠标点击时触发。
'none'
不触发,用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。
该属性为 ECharts 3.0 中新加。
触发类型。
可选:
'item'
数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
'axis'
坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
在 ECharts 2.x 中只支持类目轴上使用 axis trigger,在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
是否显示提示框浮层,默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
。
是否显示提示框组件,包括提示框浮层和 axisPointer。
visualMap
是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。
视觉元素可以是:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。visualMap
组件可以定义多个,从而可以同时对数据中的多个维度进行视觉映射。
visualMap
组件可以定义为 分段型(visualMapPiecewise) 或 连续型(visualMapContinuous),通过 type
来区分。例如:
option = {
visualMap: [
{ // 第一个 visualMap 组件
type: 'continuous', // 定义为连续型 viusalMap
...
},
{ // 第二个 visualMap 组件
type: 'piecewise', // 定义为分段型 visualMap
...
}
],
...
};
✦ 视觉映射方式的配置 ✦
既然是『数据』到『视觉元素』的映射,visualMap
中可以指定数据的『哪个维度』(参见visualMap.dimension)映射到哪些『视觉元素』(参见visualMap.inRange 和 visualMap.outOfRange)中。
✦ 与 ECharts2 中 dataRange 的关系 ✦
visualMap
是由 ECharts2 中的 dataRange
组件改名以及扩展而来。ECharts3里 option
中的 dataRange
配置项仍然被兼容,会自动转换成 visualMap
配置项。在option中推荐写 visualMap
而非 dataRange
。
✦ 以下是visualMap各组件的详细介绍 ✦
分段型视觉映射组件(visualMapPiecewise)
展现形式如下图:
分段型视觉映射组件,有三种模式:
标签的格式化工具。
string
,表示模板,例如:aaaa{value}bbbb{value2}
。其中 {value}
和 {value2}
是当前的范围边界值。Function
,表示回调函数,形如:formatter: function (value, value2) {
return 'aaaa' + value + 'bbbb' + value2; // 范围标签显示内容。
}
visualMap 文字的字体大小
visualMap 文字的字体系列
visualMap 文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
visualMap 文字字体的风格
可选:
'normal'
'italic'
'oblique'
visualMap 文字的颜色。
这个配置项,是为了兼容 ECharts2 而存在,ECharts3 中已经不推荐使用。它的功能已经移到了 visualMap-piecewise.inRange 和 visualMap-piecewise.outOfRange 中。
如果要使用,则须注意,color
属性中的顺序是由数值 大
到 小
,但是 visualMap-piecewise.inRange 或 visualMap-piecewise.outOfRange 中 color
的顺序,总是由数值 小
到 大
。二者不一致。
边框线宽,单位px。
边框颜色。
背景色。
visualMap-piecewise内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
如何放置 visualMap 组件,水平('horizontal'
)或者竖直('vertical'
)。
visualMap 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
visualMap 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
visualMap 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
visualMap 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
visualMap 组件中,控制器
的 inRange
outOfRange
设置。如果没有这个 controller
设置,控制器
会使用外层的 inRange
outOfRange
设置;如果有这个 controller
设置,则会采用这个设置。适用于一些控制器视觉效果需要特殊定制或调整的场景。
定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。outOfRange
能定义目标系列(参见 visualMap-piecewise.seriesIndex)视觉形式,也同时定义了 visualMap-piecewise
本身的视觉样式。通俗来讲就是,假如 visualMap-piecewise
控制的是散点图,那么 outOfRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-piecewise
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-piecewise
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-piecewise 本身的视觉样式。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-piecewise 共有的视觉样式。
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-piecewise 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
outOfRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。inRange
能定义目标系列(参见 visualMap-piecewise.seriesIndex)视觉形式,也同时定义了 visualMap-piecewise
本身的视觉样式。通俗来讲就是,假如 visualMap-piecewise
控制的是散点图,那么 inRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-piecewise
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-piecewise
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-piecewise 本身的视觉样式。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-piecewise 共有的视觉样式。
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-piecewise 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
inRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
注意,inRange 没有指定,则会默认会设置 color: ['#f6efa6', '#d88273', '#bf444c']
,如果你不想要这个color,可以
inRange: {color: null}
来去除。
定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。outOfRange
能定义目标系列(参见 visualMap-piecewise.seriesIndex)视觉形式,也同时定义了 visualMap-piecewise
本身的视觉样式。通俗来讲就是,假如 visualMap-piecewise
控制的是散点图,那么 outOfRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-piecewise
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-piecewise
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-piecewise 本身的视觉样式。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-piecewise 共有的视觉样式。
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-piecewise 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
outOfRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。inRange
能定义目标系列(参见 visualMap-piecewise.seriesIndex)视觉形式,也同时定义了 visualMap-piecewise
本身的视觉样式。通俗来讲就是,假如 visualMap-piecewise
控制的是散点图,那么 inRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-piecewise
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-piecewise
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-piecewise 本身的视觉样式。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-piecewise 共有的视觉样式。
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-piecewise 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
inRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
注意,inRange 没有指定,则会默认会设置 color: ['#f6efa6', '#d88273', '#bf444c']
,如果你不想要这个color,可以
inRange: {color: null}
来去除。
打开 hoverLink
功能时,鼠标悬浮到 visualMap
组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮。
反之,鼠标悬浮到图表中的图形元素上时,在 visualMap
组件的相应位置会有三角提示其所对应的数值。
指定取哪个系列的数据,即哪个系列的 series.data。
默认取所有系列。
指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,例如:
[
[12, 23, 43],
[12, 23, 43],
[43, 545, 65],
[92, 23, 33]
]
其中每个列是一个维度,即 dimension
。
例如 dimension
为 1 时,取第二列(即 23,23,545,23),映射到视觉元素上。
是否显示 visualMap-piecewise 组件。如果设置为 false
,不会显示,但是数据映射的功能还存在。
默认的图形。可选值为:
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
。
symbol的设置参见 visualMap-piecewise.inRange 和 visualMap-piecewise.outOfRange。
当他们没有进行指定时,取此 itemSymbol
为默认值(但是只在 visualMap 组件上使用,不在 chart 中使用)。
每两个图元之间的间隔距离,单位为px。
两端文字主体之间的距离,单位为px。参见 visualMap-piecewise.text
两端的文本,如['High', 'Low']。参见例子。
text
中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse。
兼容 ECharts2,当有 text
时,label不显示。
指定组件中图形(比如小方块)和文字的摆放关系,可选值为:
'auto'
自动决定。'left'
图形在左文字在右。'right'
图形在右文字在左。图形的高度,即每个小块的高度。
图形的宽度,即每个小块的宽度。
数据展示的小数精度。
连续型数据平均分段 模式(即 (that is, when visualMap-piecewise.splitNumber 被使用时),精度根据数据自动适应。
连续型数据自定义分段 模式(即 visualMap-piecewise.pieces 被使用)或 离散数据根据类别分段 模式(即 visualMap-piecewise.categories 被使用),精度默认为0(没有小数)。
是否反转。
连续型数据平均分段 模式(即 (that is, when visualMap-piecewise.splitNumber 被使用时),数据排布规则,同 visualMap-continuous.inverse。
连续型数据自定义分段 模式(即 visualMap-piecewise.pieces 被使用)或 离散数据根据类别分段 模式(即 visualMap-piecewise.categories 被使用),每个块的排布位置,取决于 pieces
或 categories
列表的定义顺序,即:
当inverse
为false
时:
当 visualMap.orient 为 'vertical'
时,pieces[0]
或 categories[0]
对应『上方』
当 visualMap.orient 为 'horizontal'
时,pieces[0]
或 categories[0]
对应『左方』。
当 inverse
为 true
时,与上面相反。
其实没有那么复杂,使用时候,试试就知道了。
选择模式,可以是:
'multiple'
(多选)。'single'
(单选)。当 type
为 piecewise
且使用 min
/max
/splitNumber
时,此参数有效。当值为 true
时,界面上会额外多出一个『> max』的选块。
当 type
为 piecewise
且使用 min
/max
/splitNumber
时,此参数有效。当值为 true
时,界面上会额外多出一个『< min』的选块。
指定 visualMapPiecewise 组件的最大值。参见 visualMap-piecewise.splitNumber
连续型数据自定义分段 模式(即 visualMap-piecewise.pieces 被使用)或 离散数据根据类别分段 模式(即 visualMap-piecewise.categories 被使用),max
和 min
不需指定。
连续型数据平均分段 模式(即 (that is, when visualMap-piecewise.splitNumber 被使用时)需指定 min
、max
,如果不指定,则默认为 [0, 200]
(注意并不是默认为
series.data 的 dataMin
和 dataMax
)。
指定 visualMapPiecewise 组件的最小值。
在 连续型数据自定义分段 模式(即 visualMap-piecewise.pieces 被使用)或 离散数据根据类别分段 模式(即 visualMap-piecewise.categories 被使用)时,max
和 min
不需指定。
在 连续型数据平均分段 模式(即 (that is, when visualMap-piecewise.splitNumber 被使用时)需指定 min
、max
,如果不指定,则默认为 [0, 200]
(注意并不是默认为
series.data 的 dataMin
和 dataMax
)。
用于表示离散型数据(或可以称为类别型数据、枚举型数据)的全集。
当所指定的维度(visualMap-piecewise.dimension)的数据为离散型数据时,例如数据值为『优』、『良』等,那么可如下配置:
categories: ['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],
categories
中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse。
自定义『分段式视觉映射组件(visualMapPiecewise)』的每一段的范围,以及每一段的文字,以及每一段的特别的样式。例如:
pieces: [
{min: 1500}, // 不指定 max,表示 max 为无限大(Infinity)。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200(自定义label)'},
{value: 123, label: '123(自定义特殊颜色)', color: 'grey'}, // 表示 value 等于 123 的情况。
{max: 5} // 不指定 min,表示 min 为无限大(-Infinity)。
]
或者,更精确得,可以使用 lt
(小于,little than),gt
(大于,greater than),lte
(小于等于 lettle than or equals),gte
(大于等于,greater than or equals)来表达边界:
pieces: [
{gt: 1500}, // (1500, Infinity]
{gt: 900, lte: 1500}, // (900, 1500]
{gt: 310, lte: 1000}, // (310, 1000]
{gt: 200, lte: 300}, // (200, 300]
{gt: 10, lte: 200, label: '10 到 200(自定义label)'}, // (10, 200]
{value: 123, label: '123(自定义特殊颜色)', color: 'grey'}, // [123, 123]
{lt: 5} // (-Infinity, 5)
]
注意,如果两个 piece 的区间重叠,则会自动进行去重。
在每个 piece 中支持的 visualMap 属性有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。(注:在 ECharts2 中,pieces
叫做 splitList
。现在后者仍兼容,但推荐使用 pieces
)
pieces
中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse。
对于连续型数据,自动平均切分成几段。默认为5段。 连续数据的范围需要 max 和 min 来指定。
如果设置了 visualMap-piecewise.pieces 或者 visualMap-piecewise.categories,则 splitNumber
无效。
类型为分段型。
连续型视觉映射组件(visualMapContinuous)
展现形式如下图:
visualMapContinuous
中,可以通过 visualMap.calculable 来显示或隐藏手柄(手柄能拖拽改变值域)。
标签的格式化工具。
string
,表示模板,例如:aaaa{value}
。其中 {value}
是当前的范围边界值。Function
,表示回调函数,形如:formatter: function (value) {
return 'aaaa' + value; // 范围标签显示内容。
}
visualMap 文字的字体大小
visualMap 文字的字体系列
visualMap 文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
visualMap 文字字体的风格
可选:
'normal'
'italic'
'oblique'
visualMap 文字的颜色。
这个配置项,是为了兼容 ECharts2 而存在,ECharts3 中已经不推荐使用。它的功能已经移到了 visualMap-continuous.inRange 和 visualMap-continuous.outOfRange 中。
如果要使用,则须注意,color
属性中的顺序是由数值 大
到 小
,但是 visualMap-continuous.inRange 或 visualMap-continuous.outOfRange 中 color
的顺序,总是由数值 小
到 大
。二者不一致。
边框线宽,单位px。
边框颜色。
背景色。
visualMap-continuous内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
如何放置 visualMap 组件,水平('horizontal'
)或者竖直('vertical'
)。
visualMap 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
visualMap 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
visualMap 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
visualMap 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
visualMap 组件中,控制器
的 inRange
outOfRange
设置。如果没有这个 controller
设置,控制器
会使用外层的 inRange
outOfRange
设置;如果有这个 controller
设置,则会采用这个设置。适用于一些控制器视觉效果需要特殊定制或调整的场景。
定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。outOfRange
能定义目标系列(参见 visualMap-continuous.seriesIndex)视觉形式,也同时定义了 visualMap-continuous
本身的视觉样式。通俗来讲就是,假如 visualMap-continuous
控制的是散点图,那么 outOfRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-continuous
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-continuous
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-continuous 本身的视觉样式。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-continuous 共有的视觉样式。
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-continuous 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
outOfRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。inRange
能定义目标系列(参见 visualMap-continuous.seriesIndex)视觉形式,也同时定义了 visualMap-continuous
本身的视觉样式。通俗来讲就是,假如 visualMap-continuous
控制的是散点图,那么 inRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-continuous
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-continuous
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-continuous 本身的视觉样式。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-continuous 共有的视觉样式。
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-continuous 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
inRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
注意,inRange 没有指定,则会默认会设置 color: ['#f6efa6', '#d88273', '#bf444c']
,如果你不想要这个color,可以
inRange: {color: null}
来去除。
定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。outOfRange
能定义目标系列(参见 visualMap-continuous.seriesIndex)视觉形式,也同时定义了 visualMap-continuous
本身的视觉样式。通俗来讲就是,假如 visualMap-continuous
控制的是散点图,那么 outOfRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-continuous
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-continuous
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-continuous 本身的视觉样式。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-continuous 共有的视觉样式。
outOfRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-continuous 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
outOfRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
outOfRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
outOfRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)
可选的视觉元素有:
symbol
: 图元的图形类别。symbolSize
: 图元的大小。color
: 图元的颜色。colorAlpha
: 图元的颜色的透明度。opacity
: 图元以及其附属物(如文字标签)的透明度。colorLightness
: 颜色的明暗度,参见 HSL。colorSaturation
: 颜色的饱和度,参见 HSL。colorHue
: 颜色的色调,参见 HSL。inRange
能定义目标系列(参见 visualMap-continuous.seriesIndex)视觉形式,也同时定义了 visualMap-continuous
本身的视觉样式。通俗来讲就是,假如 visualMap-continuous
控制的是散点图,那么 inRange
同时定义了散点图的 颜色
、尺寸
等,也定义了 visualMap-continuous
本身的 颜色
、尺寸
等。这二者能对应上。
定义方式,例如:
visualMap: [
{
...,
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
}
}
]
如果想分别定义 visualMap-continuous
本身的视觉样式和 目标系列
的视觉样式,则这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式。
target: {
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
}
},
// 表示 visualMap-continuous 本身的视觉样式。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
或者这样定义:
visualMap: [
{
...,
// 表示 目标系列 的视觉样式 和 visualMap-continuous 共有的视觉样式。
inRange: {
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200]
},
// 表示 visualMap-continuous 本身的视觉样式,会覆盖共有的视觉样式。比如,symbolSize 覆盖成为 [30, 100],而 color 不变。
controller: {
inRange: {
symbolSize: [30, 100]
}
}
}
]
✦ 关于视觉通道 ✦
inRange 中,可以有任意几个的『视觉通道』定义(如 color
、symbolSize
等)。这些视觉通道,会被同时采用。
一般来说,建议使用 透明度(opacity)
,而非 颜色透明度(colorAlpha)
(他们细微的差异在于,前者能也同时控制图元中的附属物(如 label)的透明度,而后者只能控制图元本身颜色的透明度)。
视觉映射的方式:支持两种方式:线性映射、查表映射。
✦ 视觉通道 -- 线性映射 ✦
线性映射
表示 series.data 中的每一个值(dataValue)会经过线性映射计算,从 [visualMap.min, visualMap.max]
映射到设定的 [visual value 1, visual value 2]
区间中的某一个视觉的值(下称 visual value)。
例如,我们设置了 [visualMap.min, visualMap.max] 为 [0, 100]
,并且我们有 series.data: [50, 10, 100]
。我们想将其映射到范围为 [0.4, 1]
的 opacity
上,从而达到用透明度表达数值大小的目的。那么 visualMap 组件会对 series.data 中的每一个 dataValue 做线性映射计算,得到一个 opacityValue。最终得到的 opacityValues 为 [0.7, 0.44, 1]
。
visual 范围也可以反向,例如上例,可以设定 opacity
范围为 [1, 0.4]
,则上例得到的 opacityValues 为 [0.7, 0.96, 0.4]
。
注意,[visualMap.min, visualMap.max] 须手动设置,不设置则默认取 [0, 100],而非 series.data 中的 dataMin
和 dataMax
。
如何设定为线性映射?以下情况时,会设定为 线性映射
:
当 visualMap
为 visualMap-continuous 时,或者
当 visualMap
为 visualMap-piecewise 且 未设置 visualMap-piecewise.categories 时。
视觉通道的值(visual value):
视觉通道的值一般都以 Array
形式表示,例如:color: ['#333', '#777']
。
如果写成 number
或 string
,会转成 Array
。例如,写成 opacity: 0.4
会转成 opacity: [0.4, 0.4]
,color: '#333'
会转成 color: ['#333', '#333']
。
对于 图形大小(symbolSize)
、透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
、色调(colorHue)
:形如Array
的视觉范围总是表示:[最小数据值对应的视觉值, 最大数据值对应的视觉值]
。比如:colorLightness: [0.8, 0.2]
,表示 series.data 中,和 visualMap.min
相等的值(如果有的话)映射到 颜色明暗
的 0.8
,和 visualMap.max
相等的值(如果有的话)映射到 颜色明暗
的 0.2
,中间其他数据值,按照线性计算出映射结果。
对于 颜色(color)
,使用数组表示例如:['#333', '#78ab23', 'blue']
。意思就是以这三个点作为基准,形成一种『渐变』的色带,数据映射到这个色带上。也就是说,与 visualMap.min
相等的值会映射到 '#333'
,与 visualMap.max
相等的值会映射到 'blue'
。对于 visualMap.min
和 visualMap.max
中间的其他点,以所给定的 '#333'
, '#78ab23'
, 'blue'
这三个颜色作为基准点进行分段线性插值,得到映射结果。
对于 图形类别(symbol)
:使用数据表示例如:['circle', 'rect', 'diamond']
。与 visualMap.min
相等的值会映射到 'circle'
,与 visualMap.max
相等的值会映射到 'diamond'
。对于 中间的其他点,会根据他们和 visualMap.min
和 visualMap.max
的数值距离,映射到 'circle'
, 'rect'
, 'diamond'
中某个值上。
visual value 的取值范围:
透明度(opacity)
、颜色透明度(colorAlpha)
、颜色明暗度(colorLightness)
、颜色饱和度(colorSaturation)
,visual value
取值范围是 [0, 1]
。
色调(colorHue)
取值范围是 [0, 360]
。
颜色(color)
:
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'。
图形类别(symbol)
:
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
也可以通过 'image://url'
设置为图片,其中 url 为图片的链接。
在 ECharts 3 里可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol
的话就是 symbolSize
)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
✦ 视觉通道 -- 查表映射 ✦
查表映射
表示 series.data 中的所有值(dataValue)是可枚举的,会根据给定的映射表查表得到映射结果。
例如,在 visualMap-piecewise 中,我们设定了 visualMap-piecewise.categories 为 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']
。我们有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']
。然后我们可以定立查表映射规则:color: {'Warden': 'red', 'Demon Hunter': 'black'}
,于是 visualMap
组件会按照表来将 dataValue
映射到 color
。
如何设定为查表映射?当 visualMap
为 visualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。
视觉通道的值(visual value):一般使用 Object
或 Array
来表示,例如:
visualMap: {
type: 'piecewise',
// categories 定义了 visualMap-piecewise 组件显示出来的项。
categories: [
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],
inRange: {
// visual value 可以配成 Object:
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串,表示除了'Warden'、'Demon Hunter'外,都对应到 'green'。
}
// visual value 也可以只配一个单值,表示所有都映射到一个值,如:
color: 'green',
// visual value 也可以配成数组,这个数组须和 categories 数组等长,
// 每个数组项和 categories 数组项一一对应:
color: ['red', 'black', 'green', 'yellow', 'white']
}
}
✦ 修改视觉编码 ✦
如果在图表被渲染后(即已经使用 setOption
设置了初始 option
之后),想修改 visualMap 的各种 视觉编码
,按照惯例,再次使用 setOption
即可。例如:
chart.setOption({
visualMap: {
inRange: {color: ['red', 'blue']}
}
});
但请注意:
visualMap option 中的这几个属性,inRange
, outOfRange
, target
, controller
,在 setOption 时不支持 merge。否则会带来过于复杂的 merge 逻辑。也就是说,setOption
时,一旦修改了以上几个属性中的一项,其他项也会被清空,而非保留当前状态。所以,设置 visual 值时,请一次性全部设置,而非只设置一部分。
不推荐使用 getOption -> 修改option -> setOption
的方式:
// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
var option = chart.getOption(); // 获取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改动color(我想要改变 color)。
// 如下两处也要进行同步改动,否则可能达不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option设置回 visualMap
注意,inRange 没有指定,则会默认会设置 color: ['#f6efa6', '#d88273', '#bf444c']
,如果你不想要这个color,可以
inRange: {color: null}
来去除。
打开 hoverLink
功能时,鼠标悬浮到 visualMap
组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮。
反之,鼠标悬浮到图表中的图形元素上时,在 visualMap
组件的相应位置会有三角提示其所对应的数值。
指定取哪个系列的数据,即哪个系列的 series.data。
默认取所有系列。
指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,例如:
[
[12, 23, 43],
[12, 23, 43],
[43, 545, 65],
[92, 23, 33]
]
其中每个列是一个维度,即 dimension
。
例如 dimension
为 1 时,取第二列(即 23,23,545,23),映射到视觉元素上。
是否显示 visualMap-continuous 组件。如果设置为 false
,不会显示,但是数据映射的功能还存在。
两端文字主体之间的距离,单位为px。参见 visualMap-continuous.text
两端的文本,如 ['High', 'Low']
。参见例子。
text
中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse。
指定组件中手柄和文字的摆放位置,可选值为:
'auto'
自动决定。'left'
手柄和label在右,orient 为 horizontal 时有效。'right'
手柄和label在左,orient 为 horizontal 时有效。'top'
手柄和label在下,orient 为 vertical 时有效。'bottom'
手柄和label在上,orient 为 vertical 时有效。图形的高度,即长条的高度。
图形的宽度,即长条的宽度。
数据展示的小数精度,默认为0,无小数点。
是否反转 visualMap 组件。
当inverse
为false
时,数据大小的位置规则,和直角坐标系相同,即:
'vertical'
时,数据上大下小。'horizontal'
时,数据右大左小。当inverse
为true
时,相反。
拖拽时,是否实时更新。
如果为ture
则拖拽手柄过程中实时更新图表视图。
如果为false
则拖拽结束时,才更新视图。
是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。
(注:为兼容 ECharts2,当 visualMap.type 未指定时,假如设置了 'calculable'
,则type
自动被设置为'continuous'
,无视 visualMap-piecewise.splitNumber 等设置。所以,建议使用者不要不指定 visualMap.type,否则表意不清晰。)
指定手柄对应数值的位置。range
应在 min
max
范围内。例如:
chart.setOption({
visualMap: {
min: 0,
max: 100,
// 两个手柄对应的数值是 4 和 15
range: [4, 15],
...
}
});
setOption 改变 min、max 时 range 的自适应
range
不设置(或设置为 null)例如:
chart.setOption({visualMap: {min: 10, max: 300}}); // 不设置 range,则 range 默认为 [min, max],即 [10, 300]。
chart.setOption({visualMap: {min: 0, max: 400}}); // 再次使用 setOption 改变 min、max。
// 此时 range 也自然会更新成改变过后的 [min, max],即 [0, 400]。
range
被以具体值设置了(例如设置为 [10, 300])例如:
chart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // 设置了 range
chart.setOption({visualMap: {min: 0, max: 400}}); // 再次使用 setOption 改变 min、max。
// 此时 range 不会改变而仍维持本来的数值,仍为 [20, 80]。
chart.setOption({visualMap: {range: null}}); // 再把 range 设为 null。
// 则 range 恢复为 [min, max],即 [0, 400],同时也恢复了自动随 min max 而改变的能力。
getOption
得到的 range
总是 Array
,不会为 null
或 undefined
。
指定 visualMapContinuous 组件的允许的最大值。'max'
必须用户指定。[visualMap.min, visualMax.max]
形成了视觉映射的『定义域』。
指定 visualMapContinuous 组件的允许的最小值。'min'
必须用户指定。[visualMap.min, visualMax.max]
形成了视觉映射的『定义域』。
类型为连续型。
dataZoom
组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。
现在支持这几种类型的 dataZoom
组件:
内置型数据区域缩放组件(dataZoomInside):内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系。
滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条,用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件(dataZoomSelect):提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom,配置项在 toolbox
中。
如下例子:
✦ dataZoom 和 数轴的关系 ✦
dataZoom
主要是对 数轴(axis)
进行操作(控制数轴的显示范围,或称窗口(window))。
可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 来指定
dataZoom
控制哪个或哪些数轴。
dataZoom
组件可 同时存在多个,起到共同控制的作用。如果多个 dataZoom
组件共同控制同一个数轴,他们会自动联动。
✦ dataZoom 组件如何影响轴和数据 ✦
dataZoom
的运行原理是通过 数据过滤
以及在内部设置轴的显示窗口来达到 数据窗口缩放
的效果。
数据过滤模式(dataZoom.filterMode)的设置不同,效果也不同。
可选值为:
'filter':当前数据窗口外的数据,被 过滤掉。即会影响其他轴的数据范围。
'empty':当前数据窗口外的数据,被 设置为空。即不会影响其他轴的数据范围。
如何设置,由用户根据场景和需求自己决定。经验来说:
当『只有 X 轴 或 只有 Y 轴受 dataZoom
组件控制』时,常使用 filterMode: 'filter'
,这样能使另一个轴自适应过滤后的数值范围。
当『X 轴 Y 轴分别受 dataZoom
组件控制』时:
如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 fiterMode: 'empty'
。
如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 dataZoomX
改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 dataZoomY
改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 fiterMode: 'filter'
,Y 轴设为 fiterMode: 'empty'
,即主轴 'filter'
,辅轴 'empty'
。
下面是个具体例子:
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
上例中,dataZoomX
的 filterMode
设置为 'filter'
。于是,假设当用户拖拽 dataZoomX
(不去动 dataZoomY
)导致其 valueWindow 变为 [2, 50]
时,dataZoomX
对 series.data 的第一列进行遍历,窗口外的整项去掉,最终得到的 series.data 为:
[
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
// [90, 80, 70] 整项被过滤掉,因为 90 在 dataWindow 之外。
[3, 9, 27]
// [1, 11, 111] 整项被过滤掉,因为 1 在 dataWindow 之外。
]
过滤前,series.data 中对应 Y 轴的值有 24
、80
、9
、11
,过滤后,只剩下 24
和 9
,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 min
、max
固定其显示范围的话)。
所以,filterMode: 'filter'
的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。
再从头来,上例中 dataZoomY
的 filterMode
设置为 'empty'
。于是,假设当用户拖拽 dataZoomY
(不去动 dataZoomX
)导致其 dataWindow 变为 [10, 60]
时,dataZoomY
对 series.data 的第二列进行遍历,窗口外的值被设置为 empty (即替换为 NaN,这样设置为空的项,其所对应柱形,在 X 轴还有占位,只是不显示出来)。最终得到的 series.data 为:
[
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
[90, NaN, 70], // 设置为 empty (NaN)
[3, NaN, 27], // 设置为 empty (NaN)
[1, 11, 111]
]
这时,series.data 中对应于 X 轴的值仍然全部保留不受影响,为 12
、90
、3
、1
。那么用户对 dataZoomY
的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。
如下面的例子:
另外,如果在任一个数轴上设置了 min
、max
(如设置 yAxis: {min: 0, max: 400}
),那么这个数轴无论如何也不会被其他数轴的 dataZoom 行为影响了。
✦ 数据窗口的设置 ✦
dataZoom
的数据窗口范围的设置,目前支持两种形式:
百分比形式:即设置 dataZoom.start 和 dataZoom.end。
绝对数值形式:即设置 dataZoom.startValue 和 dataZoom.endValue。
注意:当使用百分比形式指定 dataZoom
范围时,且处于如下场景(或类似场景)中,dataZoom
的结果是和 dataZoom
组件的定义顺序相关的。
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
start: 30,
end: 70
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty',
start: 20,
end: 80
}
],
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
// yAxis 中并没有使用 min、max 来显示限定轴的显示范围。
},
series{
type: 'bar',
data: [
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
在上例中,dataZoomY
的 start: 20, end: 80
到底表示什么意思?
如果 yAxis.min
、yAxis.max
进行了直接设置:
那么 dataZoomY
的 start: 20, end: 80
表示 yAxis.min
~ yAxis.max
的 20%
到 80%
。
如果 yAxis.min
、yAxis.max
没有设置:
如果 dataZoomX
设置为 filterMode: 'empty'
:
那么 dataZoomY
的 start: 20, end: 80
表示 series.data 中 dataMinY
~ dataMaxY
(即上例中的 9
~ 80
)的 20%
到 80%
。
如果 dataZoomX
设置为 filterMode: 'filter'
:
那么,因为 dataZoomX
定义 dataZoomY
组件之前,所以 dataZoomX
的 start: 30, end: 70
表示全部数据的 30%
到 70%
,而 dataZoomY
组件的 start: 20, end: 80
表示经过 dataZoomX
过滤处理后,所得数据集的 20%
到 80%
。
如果需要改变这种处理顺序,那么改变 dataZoomX
和 dataZoomY
在 option 中的出现顺序即可。
下面是详细介绍:
滑动条型数据区域缩放组件(dataZoomSlider)
dataZoom-slider组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
dataZoom-slider组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
dataZoom-slider组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
dataZoom-slider组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
设置触发视图刷新的频率。单位为毫秒(ms)。
如果 animation 设为 true
且 animationDurationUpdate 大于 0
,可以保持 throttle
为默认值 100
(或者设置为大于 0
的值),否则拖拽时有可能画面感觉卡顿。
如果 animation 设为 false
或者 animationDurationUpdate 设为 0
,且在数据量不大时,拖拽时画面感觉卡顿,可以把尝试把 throttle
设为 0
来改善。
是否锁定选择区域(或叫做数据窗口)的大小。
如果设置为 true
则锁定选择区域的大小,也就是说,只能平移,不能缩放。
布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。
可选值为:
'horizontal'
:水平。
'vertical'
:竖直。
数据窗口范围的结束数值。如果设置了 dataZoom-slider.end 则 endValue
失效。
dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。
注意,如果轴的类型为 category
,则 endValue
即可以设置为 axis.data
数组的 index
,也可以设置为数组值本身。
但是如果设置为数组值本身,会在内部自动转化为数组的 index。
数据窗口范围的起始数值。如果设置了 dataZoom-slider.start 则 startValue
失效。
dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。
注意,如果轴的类型为 category
,则 startValue
既可以设置为 axis.data
数组的 index
,也可以设置为数组值本身。
但是如果设置为数组值本身,会在内部自动转化为数组的 index。
数据窗口范围的结束百分比。范围是:0 ~ 100。
dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
dataZoom
的运行原理是通过 数据过滤
来达到 数据窗口缩放
的效果。数据过滤模式的设置不同,效果也不同。
可选值为:
'filter':当前数据窗口外的数据,被 过滤掉。即会影响其他轴的数据范围。
'empty':当前数据窗口外的数据,被 设置为空。即不会影响其他轴的数据范围。
如何设置,由用户根据场景和需求自己决定。经验来说:
当『只有 X 轴 或 只有 Y 轴受 dataZoom
组件控制』时,常使用 filterMode: 'filter'
,这样能使另一个轴自适应过滤后的数值范围。
当『X 轴 Y 轴分别受 dataZoom
组件控制』时:
如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 fiterMode: 'empty'
。
如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 dataZoomX
改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 dataZoomY
改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 fiterMode: 'filter'
,Y 轴设为 fiterMode: 'empty'
,即主轴 'filter'
,辅轴 'empty'
。
下面是个具体例子:
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
上例中,dataZoomX
的 filterMode
设置为 'filter'
。于是,假设当用户拖拽 dataZoomX
(不去动 dataZoomY
)导致其 valueWindow 变为 [2, 50]
时,dataZoomX
对 series.data 的第一列进行遍历,窗口外的整项去掉,最终得到的 series.data 为:
[
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
// [90, 80, 70] 整项被过滤掉,因为 90 在 dataWindow 之外。
[3, 9, 27]
// [1, 11, 111] 整项被过滤掉,因为 1 在 dataWindow 之外。
]
过滤前,series.data 中对应 Y 轴的值有 24
、80
、9
、11
,过滤后,只剩下 24
和 9
,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 min
、max
固定其显示范围的话)。
所以,filterMode: 'filter'
的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。
再从头来,上例中 dataZoomY
的 filterMode
设置为 'empty'
。于是,假设当用户拖拽 dataZoomY
(不去动 dataZoomX
)导致其 dataWindow 变为 [10, 60]
时,dataZoomY
对 series.data 的第二列进行遍历,窗口外的值被设置为 empty (即替换为 NaN,这样设置为空的项,其所对应柱形,在 X 轴还有占位,只是不显示出来)。最终得到的 series.data 为:
[
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
[90, NaN, 70], // 设置为 empty (NaN)
[3, NaN, 27], // 设置为 empty (NaN)
[1, 11, 111]
]
这时,series.data 中对应于 X 轴的值仍然全部保留不受影响,为 12
、90
、3
、1
。那么用户对 dataZoomY
的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。
如下面的例子:
设置 dataZoom-slider
组件控制的 angle 轴
(即angleAxis,是直角坐标系中的概念,参见 polar)。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
angleAxis: [
{...}, // 第一个 angleAxis
{...}, // 第二个 angleAxis
{...}, // 第三个 angleAxis
{...} // 第四个 angleAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
angleAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 angleAxis
},
{ // 第二个 dataZoom 组件
angleAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 angleAxis
}
]
}
设置 dataZoom-slider
组件控制的 radius 轴
(即radiusAxis,是直角坐标系中的概念,参见 polar)。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
radiusAxis: [
{...}, // 第一个 radiusAxis
{...}, // 第二个 radiusAxis
{...}, // 第三个 radiusAxis
{...} // 第四个 radiusAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis
},
{ // 第二个 dataZoom 组件
radiusAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 radiusAxis
}
]
}
设置 dataZoom-slider
组件控制的 y轴
(即yAxis,是直角坐标系中的概念,参见 grid)。
不指定时,当 dataZoom-slider.orient 为 'vertical'
时,默认控制和 dataZoom 平行的第一个 yAxis
。但是不建议使用默认值,建议显式指定。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
yAxis: [
{...}, // 第一个 yAxis
{...}, // 第二个 yAxis
{...}, // 第三个 yAxis
{...} // 第四个 yAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis
},
{ // 第二个 dataZoom 组件
yAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 yAxis
}
]
}
设置 dataZoom-slider
组件控制的 x轴
(即xAxis,是直角坐标系中的概念,参见 grid)。
不指定时,当 dataZoom-slider.orient 为 'horizontal'
时,默认控制和 dataZoom 平行的第一个 xAxis
。但是不建议使用默认值,建议显式指定。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
xAxis: [
{...}, // 第一个 xAxis
{...}, // 第二个 xAxis
{...}, // 第三个 xAxis
{...} // 第四个 xAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
},
{ // 第二个 dataZoom 组件
xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis
}
]
}
dataZoom 文字的字体大小
dataZoom 文字的字体系列
dataZoom 文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
dataZoom 文字字体的风格
可选:
'normal'
'italic'
'oblique'
dataZoom 文字的颜色。
拖动时,是否实时更新系列的视图。如果设置为 false
,则只在拖拽结束的时候更新。
是否在 dataZoom-silder
组件中显示数据阴影。数据阴影可以简单地反应数据走势。
是否显示detail,即拖拽时候显示详细数值信息。
显示的label的格式化器。
如果为 string
,表示模板,例如:aaaa{value}bbbb
,其中{value}
会被替换为实际的数值。
如果为 Function
,表示回调函数,例如:
/**
* @param {*} value 如果 axis.type 为 'category',则 `value` 为 axis.data 的 index。
* 否则 `value` 是当前值。
* @param {strign} valueStr 内部格式化的结果。
* @return {string} 返回最终的label内容。
*/
labelFormatter: function (value) {
return 'aaa' + value + 'bbb';
}
显示label的小数精度。默认根据数据自动决定。
手柄的样式配置,见 示例 area-simple
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
描边线宽。为 0 时无描边。
图形的描边颜色。支持的格式同 color
。
图形的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
控制手柄的尺寸,可以是像素大小,也可以是相对于 dataZoom 组件宽度的百分比,默认跟 dataZoom 宽度相同。
手柄的 icon 形状,支持路径字符串,默认为:
'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'
自定义 icon 见 示例 area-simple
边框颜色。
选中范围的填充颜色。
数据阴影的样式。
阴影的填充样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
填充的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
阴影的线条样式
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
线的类型。
可选:
'solid'
'dashed'
'dotted'
线宽。
线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
组件的背景颜色。
是否显示 组件。如果设置为 false
,不会显示,但是数据过滤的功能还存在。
内置型数据区域缩放组件(dataZoomInside)
所谓『内置』,即内置在坐标系中。
设置触发视图刷新的频率。单位为毫秒(ms)。
如果 animation 设为 true
且 animationDurationUpdate 大于 0
,可以保持 throttle
为默认值 100
(或者设置为大于 0
的值),否则拖拽时有可能画面感觉卡顿。
如果 animation 设为 false
或者 animationDurationUpdate 设为 0
,且在数据量不大时,拖拽时画面感觉卡顿,可以把尝试把 throttle
设为 0
来改善。
是否锁定选择区域(或叫做数据窗口)的大小。
如果设置为 true
则锁定选择区域的大小,也就是说,只能平移,不能缩放。
布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。
可选值为:
'horizontal'
:水平。
'vertical'
:竖直。
数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue
失效。
dataZoom-inside.startValue 和 dataZoom-inside.endValue 共同用 绝对数值 的形式定义了数据窗口范围。
注意,如果轴的类型为 category
,则 endValue
即可以设置为 axis.data
数组的 index
,也可以设置为数组值本身。
但是如果设置为数组值本身,会在内部自动转化为数组的 index。
数据窗口范围的起始数值。如果设置了 dataZoom-inside.start 则 startValue
失效。
dataZoom-inside.startValue 和 dataZoom-inside.endValue 共同用 绝对数值 的形式定义了数据窗口范围。
注意,如果轴的类型为 category
,则 startValue
既可以设置为 axis.data
数组的 index
,也可以设置为数组值本身。
但是如果设置为数组值本身,会在内部自动转化为数组的 index。
数据窗口范围的结束百分比。范围是:0 ~ 100。
dataZoom-inside.start 和 dataZoom-inside.end 共同用 百分比 的形式定义了数据窗口范围。
数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
dataZoom-inside.start 和 dataZoom-inside.end 共同用 百分比 的形式定义了数据窗口范围。
dataZoom
的运行原理是通过 数据过滤
来达到 数据窗口缩放
的效果。数据过滤模式的设置不同,效果也不同。
可选值为:
'filter':当前数据窗口外的数据,被 过滤掉。即会影响其他轴的数据范围。
'empty':当前数据窗口外的数据,被 设置为空。即不会影响其他轴的数据范围。
如何设置,由用户根据场景和需求自己决定。经验来说:
当『只有 X 轴 或 只有 Y 轴受 dataZoom
组件控制』时,常使用 filterMode: 'filter'
,这样能使另一个轴自适应过滤后的数值范围。
当『X 轴 Y 轴分别受 dataZoom
组件控制』时:
如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 fiterMode: 'empty'
。
如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 dataZoomX
改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 dataZoomY
改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 fiterMode: 'filter'
,Y 轴设为 fiterMode: 'empty'
,即主轴 'filter'
,辅轴 'empty'
。
下面是个具体例子:
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
上例中,dataZoomX
的 filterMode
设置为 'filter'
。于是,假设当用户拖拽 dataZoomX
(不去动 dataZoomY
)导致其 valueWindow 变为 [2, 50]
时,dataZoomX
对 series.data 的第一列进行遍历,窗口外的整项去掉,最终得到的 series.data 为:
[
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
// [90, 80, 70] 整项被过滤掉,因为 90 在 dataWindow 之外。
[3, 9, 27]
// [1, 11, 111] 整项被过滤掉,因为 1 在 dataWindow 之外。
]
过滤前,series.data 中对应 Y 轴的值有 24
、80
、9
、11
,过滤后,只剩下 24
和 9
,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 min
、max
固定其显示范围的话)。
所以,filterMode: 'filter'
的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。
再从头来,上例中 dataZoomY
的 filterMode
设置为 'empty'
。于是,假设当用户拖拽 dataZoomY
(不去动 dataZoomX
)导致其 dataWindow 变为 [10, 60]
时,dataZoomY
对 series.data 的第二列进行遍历,窗口外的值被设置为 empty (即替换为 NaN,这样设置为空的项,其所对应柱形,在 X 轴还有占位,只是不显示出来)。最终得到的 series.data 为:
[
// 第一列对应 X 轴,第二列对应 Y 轴。
[12, 24, 36],
[90, NaN, 70], // 设置为 empty (NaN)
[3, NaN, 27], // 设置为 empty (NaN)
[1, 11, 111]
]
这时,series.data 中对应于 X 轴的值仍然全部保留不受影响,为 12
、90
、3
、1
。那么用户对 dataZoomY
的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。
如下面的例子:
设置 dataZoom-inside
组件控制的 angle 轴
(即angleAxis,是直角坐标系中的概念,参见 polar)。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
angleAxis: [
{...}, // 第一个 angleAxis
{...}, // 第二个 angleAxis
{...}, // 第三个 angleAxis
{...} // 第四个 angleAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
angleAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 angleAxis
},
{ // 第二个 dataZoom 组件
angleAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 angleAxis
}
]
}
设置 dataZoom-inside
组件控制的 radius 轴
(即radiusAxis,是直角坐标系中的概念,参见 polar)。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
radiusAxis: [
{...}, // 第一个 radiusAxis
{...}, // 第二个 radiusAxis
{...}, // 第三个 radiusAxis
{...} // 第四个 radiusAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis
},
{ // 第二个 dataZoom 组件
radiusAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 radiusAxis
}
]
}
设置 dataZoom-inside
组件控制的 y轴
(即yAxis,是直角坐标系中的概念,参见 grid)。
不指定时,当 dataZoom-inside.orient 为 'vertical'
时,默认控制和 dataZoom 平行的第一个 yAxis
。但是不建议使用默认值,建议显式指定。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
yAxis: [
{...}, // 第一个 yAxis
{...}, // 第二个 yAxis
{...}, // 第三个 yAxis
{...} // 第四个 yAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis
},
{ // 第二个 dataZoom 组件
yAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 yAxis
}
]
}
设置 dataZoom-inside
组件控制的 x轴
(即xAxis,是直角坐标系中的概念,参见 grid)。
不指定时,当 dataZoom-inside.orient 为 'horizontal'
时,默认控制和 dataZoom 平行的第一个 xAxis
。但是不建议使用默认值,建议显式指定。
如果是 number
表示控制一个轴,如果是 Array
表示控制多个轴。
例如有如下 ECharts option:
option: {
xAxis: [
{...}, // 第一个 xAxis
{...}, // 第二个 xAxis
{...}, // 第三个 xAxis
{...} // 第四个 xAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
},
{ // 第二个 dataZoom 组件
xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis
}
]
}
是否停止组件的功能。
雷达图坐标系组件,只适用于雷达图。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件,为避免混淆,雷达图使用 radar 组件作为其坐标系。
雷达图坐标系与极坐标系不同的是它的每一个轴(indicator 指示器)都是一个单独的维度,可以通过 name、axisLine、axisTick、axisLabel、splitLine、 splitArea 几个配置项配置指示器坐标轴线的样式。
下面是一个 radar 组件的一个自定义例子。
雷达图的指示器,用来指定雷达图中的多个变量(维度),如下示例。
indicator: [
{ name: '销售(sales)', max: 6500},
{ name: '管理(Administration)', max: 16000},
{ name: '信息技术(Information Techology)', max: 30000},
{ name: '客服(Customer Support)', max: 38000},
{ name: '研发(Development)', max: 52000},
{ name: '市场(Marketing)', max: 25000}
]
坐标轴在 grid 区域中的分隔区域,默认不显示。
分隔区域的样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
是否显示分隔区域。
坐标轴在 grid 区域中的分隔线。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔线线的类型。
可选:
'solid'
'dashed'
'dotted'
分隔线线宽。
分隔线颜色,可以设置成单个颜色。
也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
示例
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
是否显示分隔线。默认数值轴显示,类目轴不显示。
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
刻度标签是否朝内,默认朝外。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
雷达图绘制类型,支持 'polygon'
和 'circle'
。
指示器轴的分割段数。
指示器名称和指示器轴的距离。
雷达图每个指示器名称的配置项。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
指示器名称显示的格式器。支持字符串和回调函数,如下示例:
// 使用字符串模板,模板变量为指示器名称 {value}
formatter: '【{value}】'
// 使用回调函数,第一个参数是指示器名称,第二个参数是指示器配置项
formatter: function (value, indicator) {
return '【' + value + '】';
}
是否显示指示器名称。
坐标系起始角度,也就是第一个指示器轴的角度。
的半径,数组的第一项是内半径,第二项是外半径。
支持设置成百分比,相对于容器高宽中较小的一项的一半。
的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。
使用示例:
// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
极坐标系的角度轴。
角度轴组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
角度轴所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
类目数据,在类目轴(type: 'category')中有效。
示例:
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
坐标轴在 grid 区域中的分隔区域,默认不显示。
分隔区域的样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
是否显示分隔区域。
坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
坐标轴在 grid 区域中的分隔线。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔线线的类型。
可选:
'solid'
'dashed'
'dotted'
分隔线线宽。
分隔线颜色,可以设置成单个颜色。
也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
示例
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示分隔线。默认数值轴显示,类目轴不显示。
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签是否朝内,默认朝外。
坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
对数轴的底数,只在对数轴中(type: 'log')有效。
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
自动计算的坐标轴最小间隔大小。
例如可以设置成1
保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴中(type: 'value')有效。
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴刻度最大值,在类目轴中无效。
可以设置成特殊值 'dataMax'
,此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
坐标轴刻度最小值,在类目轴中无效。
可以设置成特殊值 'dataMin'
,此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap
可以配置为 true
和 false
。默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。
示例:
boundaryGap: ['20%', '20%']
坐标轴类型。
可选:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
刻度增长是否按顺时针,默认顺时针。
如下示例是 clockwise 为 false
(逆时针)的效果:
起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。
如下示例是 startAngle 为 45 的效果:
角度轴所在的极坐标系的索引,默认使用第一个极坐标系。
极坐标系的径向轴。
半径轴组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
半径轴所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
类目数据,在类目轴(type: 'category')中有效。
示例:
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
坐标轴在 grid 区域中的分隔区域,默认不显示。
分隔区域的样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
是否显示分隔区域。
坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
坐标轴在 grid 区域中的分隔线。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔线线的类型。
可选:
'solid'
'dashed'
'dotted'
分隔线线宽。
分隔线颜色,可以设置成单个颜色。
也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
示例
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示分隔线。默认数值轴显示,类目轴不显示。
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
刻度标签是否朝内,默认朝外。
坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
对数轴的底数,只在对数轴中(type: 'log')有效。
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
自动计算的坐标轴最小间隔大小。
例如可以设置成1
保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴中(type: 'value')有效。
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴刻度最大值,在类目轴中无效。
可以设置成特殊值 'dataMax'
,此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
坐标轴刻度最小值,在类目轴中无效。
可以设置成特殊值 'dataMin'
,此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap
可以配置为 true
和 false
。默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。
示例:
boundaryGap: ['20%', '20%']
是否是反向坐标轴。ECharts 3 中新加。
坐标轴名字旋转,角度值。
坐标轴名称与轴线之间的距离。
坐标轴名称的文字样式。
坐标轴名称文字的字体大小
坐标轴名称文字的字体系列
坐标轴名称文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
坐标轴名称文字字体的风格
可选:
'normal'
'italic'
'oblique'
坐标轴名称的颜色,默认取 axisLine.lineStyle.color。
坐标轴名称显示位置。
可选:
'start'
'middle'
'end'
坐标轴名称。
坐标轴类型。
可选:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
径向轴所在的极坐标系的索引,默认使用第一个极坐标系。
极坐标系,可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。
示例:
极坐标系的半径,数组的第一项是内半径,第二项是外半径。
支持设置成百分比,相对于容器高宽中较小的一项的一半。
极坐标系的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。
使用示例:
// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
Y 轴组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
Y 轴所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
类目数据,在类目轴(type: 'category')中有效。
示例:
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
坐标轴在 grid 区域中的分隔区域,默认不显示。
分隔区域的样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
是否显示分隔区域。
坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
坐标轴在 grid 区域中的分隔线。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔线线的类型。
可选:
'solid'
'dashed'
'dotted'
分隔线线宽。
分隔线颜色,可以设置成单个颜色。
也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
示例
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示分隔线。默认数值轴显示,类目轴不显示。
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
刻度标签是否朝内,默认朝外。
坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
对数轴的底数,只在对数轴中(type: 'log')有效。
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
自动计算的坐标轴最小间隔大小。
例如可以设置成1
保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴中(type: 'value')有效。
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴刻度最大值,在类目轴中无效。
可以设置成特殊值 'dataMax'
,此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
坐标轴刻度最小值,在类目轴中无效。
可以设置成特殊值 'dataMin'
,此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap
可以配置为 true
和 false
。默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。
示例:
boundaryGap: ['20%', '20%']
是否是反向坐标轴。ECharts 3 中新加。
坐标轴名字旋转,角度值。
坐标轴名称与轴线之间的距离。
坐标轴名称的文字样式。
坐标轴名称文字的字体大小
坐标轴名称文字的字体系列
坐标轴名称文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
坐标轴名称文字字体的风格
可选:
'normal'
'italic'
'oblique'
坐标轴名称的颜色,默认取 axisLine.lineStyle.color。
坐标轴名称显示位置。
可选:
'start'
'middle'
'end'
坐标轴名称。
坐标轴类型。
可选:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
Y 轴相对于默认位置的偏移,在相同的 position
上有多个 Y 轴的时候有用。
y 轴的位置。
可选:
'left'
'right'
默认 grid 中的第一个 y 轴在 grid 的左侧('left'
),第二个 y 轴视第一个 y 轴的位置放在另一侧。
y 轴所在的 grid 的索引,默认位于第一个 grid。
直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放左右两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
X 轴组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
X 轴所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
类目数据,在类目轴(type: 'category')中有效。
示例:
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
坐标轴在 grid 区域中的分隔区域,默认不显示。
分隔区域的样式设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
是否显示分隔区域。
坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
坐标轴在 grid 区域中的分隔线。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
分隔线线的类型。
可选:
'solid'
'dashed'
'dotted'
分隔线线宽。
分隔线颜色,可以设置成单个颜色。
也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
示例
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示分隔线。默认数值轴显示,类目轴不显示。
坐标轴刻度标签的相关设置。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
刻度标签与轴线之间的距离。
刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
刻度标签是否朝内,默认朝外。
坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
是否显示刻度标签。
坐标轴刻度相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴刻度线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴刻度线宽。
刻度线的颜色,默认取 axisLine.lineStyle.color。
坐标轴刻度的长度。
坐标轴刻度是否朝内,默认朝外。
坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1
,表示『隔一个标签显示一个标签』,如果值为 2
,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
。
类目轴中在 boundaryGap
为 true
的时候有效,可以保证刻度线和标签对齐。如下图:
是否显示坐标轴刻度。
坐标轴轴线相关设置。
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
阴影垂直方向上的偏移距离。
阴影水平方向上的偏移距离。
阴影颜色。支持的格式同color
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
坐标轴线线的类型。
可选:
'solid'
'dashed'
'dotted'
坐标轴线线宽。
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], false) // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false) // 纹理填充 color: new echarts.graphic.Pattern( imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat )
X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。
是否显示坐标轴轴线。
坐标轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
坐标轴是否是静态无法交互。
对数轴的底数,只在对数轴中(type: 'log')有效。
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
自动计算的坐标轴最小间隔大小。
例如可以设置成1
保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴中(type: 'value')有效。
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true
后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
坐标轴刻度最大值,在类目轴中无效。
可以设置成特殊值 'dataMax'
,此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
坐标轴刻度最小值,在类目轴中无效。
可以设置成特殊值 'dataMin'
,此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap
可以配置为 true
和 false
。默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap
是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。
示例:
boundaryGap: ['20%', '20%']
是否是反向坐标轴。ECharts 3 中新加。
坐标轴名字旋转,角度值。
坐标轴名称与轴线之间的距离。
坐标轴名称的文字样式。
坐标轴名称文字的字体大小
坐标轴名称文字的字体系列
坐标轴名称文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
坐标轴名称文字字体的风格
可选:
'normal'
'italic'
'oblique'
坐标轴名称的颜色,默认取 axisLine.lineStyle.color。
坐标轴名称显示位置。
可选:
'start'
'middle'
'end'
坐标轴名称。
坐标轴类型。
可选:
'value'
数值轴,适用于连续数据。
'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
X 轴相对于默认位置的偏移,在相同的 position
上有多个 X 轴的时候有用。
x 轴的位置。
可选:
'top'
'bottom'
默认 grid 中的第一个 x 轴在 grid 的下方('bottom'
),第二个 x 轴视第一个 x 轴的位置放在另一侧。
x 轴所在的 grid 的索引,默认位于第一个 grid。
直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。
在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件,在 ECharts 3 中可以存在任意个 grid 组件。
例如下面这个 Anscombe Quartet 的示例:
阴影垂直方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true
。
阴影水平方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true
。
阴影颜色。支持的格式同color
。
注意:此配置项生效的前提是,设置了 show: true
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
注意:此配置项生效的前提是,设置了 show: true
以及值不为 tranparent
的背景色 backgroundColor
。
网格的边框线宽。
注意:此配置项生效的前提是,设置了 show: true
。
网格的边框颜色。支持的颜色格式同 backgroundColor。
注意:此配置项生效的前提是,设置了 show: true
。
网格背景色,默认透明。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
注意:此配置项生效的前提是,设置了 show: true
。
grid 区域是否包含坐标轴的刻度标签,在无法确定坐标轴标签的宽度,容器又比较小无法预留较多空间的时候,可以设为 true
防止标签溢出容器。
grid 组件的高度。默认自适应。
grid 组件的宽度。默认自适应。
grid 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
grid 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
grid 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
grid 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
是否显示直角坐标系网格。
图例组件。
图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件,会方便多个图例的布局。
阴影垂直方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true
。
阴影水平方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true
。
阴影颜色。支持的格式同color
。
注意:此配置项生效的前提是,设置了 show: true
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
注意:此配置项生效的前提是,设置了 show: true
以及值不为 tranparent
的背景色 backgroundColor
。
图例的边框线宽。
图例的边框颜色。支持的颜色格式同 backgroundColor。
图例背景色,默认透明。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name
(如果是饼图,也可以是饼图单个数据的 name
)。图例组件会自动获取对应系列的颜色,图形标记(symbol)作为自己绘制的颜色和标记,特殊字符串 ''
(空字符串)或者 '\n'
(换行字符串)用于图例的换行。
如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 name
属性对应表示系列的 name
。
示例
data: [{
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}]
图例的 tooltip 配置,配置项同 tooltip。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip,如下示例:
legend: {
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
}
图例的公用文本样式。
文字的字体大小
文字的字体系列
文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
文字字体的风格
可选:
'normal'
'italic'
'oblique'
文字的颜色。
图例选中状态表。
示例:
selected: {
// 选中'系列1'
'系列1': true,
// 不选中'系列2'
'系列2': false
}
图例关闭时的颜色。
图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false
关闭。
除此之外也可以设成 'single'
或者 'multiple'
使用单选或者多选模式。
用来格式化图例文本,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
return 'Legend ' + name;
}
图例标记的图形高度。
图例标记的图形宽度。
图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的 left 值为 'right' 以及纵向布局(orient 为 'vertical')的时候为右对齐,及为 'right'。
可选:
图例列表的布局朝向。
可选:
图例组件的高度。默认自适应。
图例组件的宽度。默认自适应。
图例组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
图例组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
图例组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
图例组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
标题组件,包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用。
例如下面不同缓动函数效果的示例,每一个缓动效果图都带有一个标题组件:
阴影垂直方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true
。
阴影水平方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true
。
阴影颜色。支持的格式同color
。
注意:此配置项生效的前提是,设置了 show: true
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
注意:此配置项生效的前提是,设置了 show: true
以及值不为 tranparent
的背景色 backgroundColor
。
标题的边框线宽。
标题的边框颜色。支持的颜色格式同 backgroundColor。
标题背景色,默认透明。
颜色可以使用 RGB 表示,比如
'rgb(128, 128, 128)'
,如果想要加上 alpha 通道,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
grid 组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
grid 组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
grid 组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
grid 组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
主副标题之间的间距。
标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
副标题文字的字体大小
副标题文字的字体系列
副标题文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
副标题文字字体的风格
可选:
'normal'
'italic'
'oblique'
副标题文字的颜色。
指定窗口打开副标题超链接,可选:
'self'
当前窗口打开
'blank'
新窗口打开
副标题文本超链接。
副标题文本,支持使用 \n
换行。
标题文本垂直对齐,支持 'top', 'middle', 'bottom',默认根据标题位置决定。
标题文本水平对齐,支持 'left', 'center', 'right',默认根据标题位置决定。
主标题文字的字体大小
主标题文字的字体系列
主标题文字字体的粗细
可选:
'normal'
'bold'
'bolder'
'lighter'
主标题文字字体的风格
可选:
'normal'
'italic'
'oblique'
主标题文字的颜色。
指定窗口打开主标题超链接。
可选:
'self'
当前窗口打开
'blank'
新窗口打开
主标题文本超链接。
主标题文本,支持使用 \n
换行。
是否显示标题组件。