ECharts Document

hoverLayerThreshold

图形数量阈值,决定是否开启单独的 hover 层,在整个图表的图形数量大于该阈值时开启单独的 hover 层。

单独的 hover 层主要是为了在高亮图形的时候不需要重绘整个图表,只需要把高亮的图形放入单独的一个 canvas 层进行绘制,防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿。

ECharts 2 里是底层强制使用单独的层绘制高亮图形,但是会带来很多问题,比如高亮的图形可能会不正确的遮挡所有其它图形,还有图形有透明度因为高亮和正常图形叠加导致不正确的透明度显示,还有移动端上因为每个图表都要多一个 canvas 带来的额外内存开销。因此 3 里默认不会开启该优化,只有在图形数量特别多,有必要做该优化时才会自动开启。

blendMode

图形的混合模式,不同的混合模式见 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

默认为 'source-over'。 支持每个系列单独设置。

'lighter' 也是比较常见的一种混合模式,该模式下图形数量集中的区域会颜色叠加成高亮度的颜色(白色)。常常能起到突出该区域的效果。见示例 全球飞行航线

progressiveThreshold

启用渐进式渲染的图形数量阈值,在单个系列的图形数量超过该阈值时启用渐进式渲染。

progressive

渐进式渲染时每一帧绘制图形数量,设为 0 时不启用渐进式渲染,支持每个系列单独配置。

在图中有数千图形甚至好几万图形的时候,一下子把图形绘制出来,或者交互重绘的时候可能会造成界面的卡顿甚至假死,因此 ECharts 从 3.2.0 开始支持大量图形的渐进式渲染(progressive rendering),渲染的时候会把创建好的图形分到数帧中渲染,每一帧渲染只渲染指定数量的图形。

该配置项就是用于配置该系列每一帧渲染的图形数,默认是 400 个,可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢,这个数字就可以设置小一点,而线宽小于等于 1 的 polyline 绘制非常快,该配置项就可以相对调得比较大。

animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

animationEasingUpdate

数据更新动画的缓动效果。

animationDurationUpdate

数据更新动画的时长。

animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

animationDuration

初始动画的时长。

animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

animation

是否开启动画,默认开启。

textStyle

全局的字体样式。

textStyle.fontSize

文字的字体大小

textStyle.fontFamily

文字的字体系列

textStyle.fontWeight

文字字体的粗细

可选:

textStyle.fontStyle

文字字体的风格

可选:

textStyle.color

文字的颜色。

backgroundColor

背景色,默认无背景。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  offset: 0, color: 'red' // 0% 处的颜色
}, {
  offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
  imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)

color

调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。

默认为:

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

series

系列列表。每个系列通过 type 决定自己的图表类型

series.gauge

仪表盘

示例:

series.gauge.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.gauge.animationEasingUpdate

数据更新动画的缓动效果。

series.gauge.animationDurationUpdate

数据更新动画的时长。

series.gauge.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.gauge.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.gauge.animationDuration

初始动画的时长。

series.gauge.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.gauge.animation

是否开启动画,默认开启。

series.gauge.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.gauge.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.gauge.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.gauge.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.gauge.markArea.animationDurationUpdate

数据更新动画的时长。

series.gauge.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.gauge.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.gauge.markArea.animationDuration

初始动画的时长。

series.gauge.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.gauge.markArea.animation

是否开启动画,默认开启。

series.gauge.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标域',
            x: 100,
            y: 100
        }, {
            x: '90%',
            y: '10%'
        }
    ]
]

series.gauge.markArea.data.1

标域右下角的数据

series.gauge.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.gauge.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.gauge.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.gauge.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.gauge.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.gauge.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.gauge.markArea.data.1.label.emphasis.show

是否显示标签。

series.gauge.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.gauge.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.gauge.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.gauge.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.gauge.markArea.data.1.label.normal.position

标签的位置。

可选:

series.gauge.markArea.data.1.label.normal.show

是否显示标签。

series.gauge.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.gauge.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markArea.data.1.itemStyle.emphasis.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
)

series.gauge.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markArea.data.1.itemStyle.normal.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
)

series.gauge.markArea.data.1.value

标域值,可以不设。

series.gauge.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.gauge.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.gauge.markArea.data.0

标域左上角的数据

series.gauge.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.gauge.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.gauge.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.gauge.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.gauge.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.gauge.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.gauge.markArea.data.0.label.emphasis.show

是否显示标签。

series.gauge.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.gauge.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.gauge.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.gauge.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.gauge.markArea.data.0.label.normal.position

标签的位置。

可选:

series.gauge.markArea.data.0.label.normal.show

是否显示标签。

series.gauge.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.gauge.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markArea.data.0.itemStyle.emphasis.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
)

series.gauge.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markArea.data.0.itemStyle.normal.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
)

series.gauge.markArea.data.0.value

标域值,可以不设。

series.gauge.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.gauge.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.gauge.markArea.itemStyle

该标域的样式。

series.gauge.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markArea.itemStyle.emphasis.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
)

series.gauge.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markArea.itemStyle.normal.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
)

series.gauge.markArea.label

标域文本配置。

series.gauge.markArea.label.emphasis.textStyle

标签的字体样式。

series.gauge.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.gauge.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.gauge.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markArea.label.emphasis.textStyle.color

文字的颜色。

series.gauge.markArea.label.emphasis.position

标签的位置。

可选:

series.gauge.markArea.label.emphasis.show

是否显示标签。

series.gauge.markArea.label.normal.textStyle

标签的字体样式。

series.gauge.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.gauge.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.gauge.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markArea.label.normal.textStyle.color

文字的颜色。

series.gauge.markArea.label.normal.position

标签的位置。

可选:

series.gauge.markArea.label.normal.show

是否显示标签。

series.gauge.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.gauge.markLine

图表标线。

series.gauge.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.gauge.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.gauge.markLine.animationDurationUpdate

数据更新动画的时长。

series.gauge.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.gauge.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.gauge.markLine.animationDuration

初始动画的时长。

series.gauge.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.gauge.markLine.animation

是否开启动画,默认开启。

series.gauge.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

series.gauge.markLine.data.1

终点的数据。

series.gauge.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.gauge.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markLine.data.1.label.emphasis.position

标签位置,可选:

series.gauge.markLine.data.1.label.emphasis.show

是否显示标签。

series.gauge.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markLine.data.1.label.normal.position

标签位置,可选:

series.gauge.markLine.data.1.label.normal.show

是否显示标签。

series.gauge.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.gauge.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.gauge.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.gauge.markLine.data.1.lineStyle.emphasis.width

线宽。

series.gauge.markLine.data.1.lineStyle.emphasis.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
)

series.gauge.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.gauge.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.gauge.markLine.data.1.lineStyle.normal.width

线宽。

series.gauge.markLine.data.1.lineStyle.normal.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
)

series.gauge.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.gauge.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.gauge.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.gauge.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.gauge.markLine.data.1.value

标注值,可以不设。

series.gauge.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.gauge.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.gauge.markLine.data.0

起点的数据。

series.gauge.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.gauge.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markLine.data.0.label.emphasis.position

标签位置,可选:

series.gauge.markLine.data.0.label.emphasis.show

是否显示标签。

series.gauge.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markLine.data.0.label.normal.position

标签位置,可选:

series.gauge.markLine.data.0.label.normal.show

是否显示标签。

series.gauge.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.gauge.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.gauge.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.gauge.markLine.data.0.lineStyle.emphasis.width

线宽。

series.gauge.markLine.data.0.lineStyle.emphasis.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
)

series.gauge.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.gauge.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.gauge.markLine.data.0.lineStyle.normal.width

线宽。

series.gauge.markLine.data.0.lineStyle.normal.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
)

series.gauge.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.gauge.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.gauge.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.gauge.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.gauge.markLine.data.0.value

标注值,可以不设。

series.gauge.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.gauge.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.gauge.markLine.lineStyle

标线的样式

series.gauge.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.gauge.markLine.lineStyle.emphasis.width

线宽。

series.gauge.markLine.lineStyle.emphasis.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
)

series.gauge.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.gauge.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markLine.lineStyle.normal.type

线的类型。

可选:

series.gauge.markLine.lineStyle.normal.width

线宽。

series.gauge.markLine.lineStyle.normal.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
)

series.gauge.markLine.label

标线的文本。

series.gauge.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markLine.label.emphasis.position

标签位置,可选:

series.gauge.markLine.label.emphasis.show

是否显示标签。

series.gauge.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markLine.label.normal.position

标签位置,可选:

series.gauge.markLine.label.normal.show

是否显示标签。

series.gauge.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.gauge.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.gauge.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.gauge.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.gauge.markPoint

图表标注。

series.gauge.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.gauge.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.gauge.markPoint.animationDurationUpdate

数据更新动画的时长。

series.gauge.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.gauge.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.gauge.markPoint.animationDuration

初始动画的时长。

series.gauge.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.gauge.markPoint.animation

是否开启动画,默认开启。

series.gauge.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.gauge.markPoint.itemStyle

标注的样式。

series.gauge.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markPoint.itemStyle.emphasis.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
)

series.gauge.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.gauge.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.markPoint.itemStyle.normal.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
)

series.gauge.markPoint.label

标注的文本。

series.gauge.markPoint.label.emphasis.textStyle

标签的字体样式。

series.gauge.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.gauge.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.gauge.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.gauge.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markPoint.label.emphasis.position

标签的位置。

可选:

series.gauge.markPoint.label.emphasis.show

是否显示标签。

series.gauge.markPoint.label.normal.textStyle

标签的字体样式。

series.gauge.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.gauge.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.gauge.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.markPoint.label.normal.textStyle.color

文字的颜色。

series.gauge.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.gauge.markPoint.label.normal.position

标签的位置。

可选:

series.gauge.markPoint.label.normal.show

是否显示标签。

series.gauge.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.gauge.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.gauge.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.gauge.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.gauge.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.gauge.detail

仪表盘详情,用于显示数据。

series.gauge.detail.textStyle.fontSize

文字的字体大小

series.gauge.detail.textStyle.fontFamily

文字的字体系列

series.gauge.detail.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.detail.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.detail.textStyle.color

文本颜色,默认取数值所在的区间的颜色

series.gauge.detail.formatter

格式化函数或者字符串

formatter: function (value) {
    return value.toFixed(0);
}

series.gauge.detail.offsetCenter

相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。

series.gauge.detail.borderColor

详情边框颜色。

series.gauge.detail.borderWidth

详情边框宽度。

series.gauge.detail.backgroundColor

详情背景色。

series.gauge.detail.height

详情高度。

series.gauge.detail.width

详情宽度。

series.gauge.detail.show

是否显示详情。

series.gauge.title

仪表盘标题。

series.gauge.title.textStyle.fontSize

文字的字体大小

series.gauge.title.textStyle.fontFamily

文字的字体系列

series.gauge.title.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.title.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.title.textStyle.color

文字的颜色。

series.gauge.title.offsetCenter

相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。

series.gauge.title.show

是否显示标题。

series.gauge.itemStyle

仪表盘指针样式。

series.gauge.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.gauge.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.gauge.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.itemStyle.emphasis.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
)

series.gauge.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.gauge.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.gauge.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.gauge.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.gauge.itemStyle.normal.color

指针颜色,默认取数值所在的区间的颜色

series.gauge.pointer

仪表盘指针。

series.gauge.pointer.width

指针宽度。

series.gauge.pointer.length

指针长度,可以是绝对数值,也可以是相对于半径的半分比。

series.gauge.pointer.show

是否显示指针。

series.gauge.axisLabel

刻度标签。

series.gauge.axisLabel.color

刻度颜色

series.gauge.axisLabel.textStyle.fontSize

文字的字体大小

series.gauge.axisLabel.textStyle.fontFamily

文字的字体系列

series.gauge.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

series.gauge.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

series.gauge.axisLabel.textStyle.color

文字的颜色。

series.gauge.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:

// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'

// 使用函数模板,函数参数分别为刻度数值
formatter: function (value) {
    return value + 'km/h';
}

series.gauge.axisLabel.distance

标签与刻度线的距离。

series.gauge.axisLabel.show

是否显示标签。

series.gauge.axisTick

刻度样式。

series.gauge.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

series.gauge.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.axisTick.lineStyle.type

线的类型。

可选:

series.gauge.axisTick.lineStyle.width

线宽。

series.gauge.axisTick.lineStyle.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
)

series.gauge.axisTick.length

刻度线长。支持相对半径的百分比。

series.gauge.axisTick.splitNumber

分隔线之间分割的刻度数。

series.gauge.axisTick.show

是否显示刻度。

series.gauge.splitLine

分隔线样式。

series.gauge.splitLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.splitLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.splitLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.splitLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

series.gauge.splitLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.splitLine.lineStyle.type

线的类型。

可选:

series.gauge.splitLine.lineStyle.width

线宽。

series.gauge.splitLine.lineStyle.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
)

series.gauge.splitLine.length

分隔线线长。支持相对半径的百分比。

series.gauge.splitLine.show

是否显示分隔线。

series.gauge.axisLine

仪表盘轴线相关配置。

series.gauge.axisLine.lineStyle

仪表盘轴线样式。

series.gauge.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.gauge.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

series.gauge.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

series.gauge.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

series.gauge.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.gauge.axisLine.lineStyle.width

轴线宽度。

series.gauge.axisLine.lineStyle.color

仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。

默认取值:

[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]

series.gauge.axisLine.show

是否显示仪表盘轴线。

series.gauge.splitNumber

仪表盘刻度的分割段数。

series.gauge.max

最大的数据值,映射到 maxAngle

series.gauge.min

最小的数据值,映射到 minAngle

series.gauge.clockwise

仪表盘刻度是否是顺时针增长。

series.gauge.endAngle

仪表盘结束角度。

series.gauge.startAngle

仪表盘起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。

series.gauge.radius

仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。

{{ use partial-legend-hover-link }}

series.gauge.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.funnel

漏斗图

示例:

series.funnel.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.funnel.animationEasingUpdate

数据更新动画的缓动效果。

series.funnel.animationDurationUpdate

数据更新动画的时长。

series.funnel.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.funnel.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.funnel.animationDuration

初始动画的时长。

series.funnel.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.funnel.animation

是否开启动画,默认开启。

series.funnel.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.funnel.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.funnel.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.funnel.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.funnel.markArea.animationDurationUpdate

数据更新动画的时长。

series.funnel.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.funnel.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.funnel.markArea.animationDuration

初始动画的时长。

series.funnel.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.funnel.markArea.animation

是否开启动画,默认开启。

series.funnel.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标域',
            x: 100,
            y: 100
        }, {
            x: '90%',
            y: '10%'
        }
    ]
]

series.funnel.markArea.data.1

标域右下角的数据

series.funnel.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.funnel.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.funnel.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.funnel.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.funnel.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.funnel.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.funnel.markArea.data.1.label.emphasis.show

是否显示标签。

series.funnel.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.funnel.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.funnel.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.funnel.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.funnel.markArea.data.1.label.normal.position

标签的位置。

可选:

series.funnel.markArea.data.1.label.normal.show

是否显示标签。

series.funnel.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.funnel.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markArea.data.1.itemStyle.emphasis.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
)

series.funnel.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markArea.data.1.itemStyle.normal.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
)

series.funnel.markArea.data.1.value

标域值,可以不设。

series.funnel.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.funnel.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.funnel.markArea.data.0

标域左上角的数据

series.funnel.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.funnel.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.funnel.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.funnel.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.funnel.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.funnel.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.funnel.markArea.data.0.label.emphasis.show

是否显示标签。

series.funnel.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.funnel.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.funnel.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.funnel.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.funnel.markArea.data.0.label.normal.position

标签的位置。

可选:

series.funnel.markArea.data.0.label.normal.show

是否显示标签。

series.funnel.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.funnel.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markArea.data.0.itemStyle.emphasis.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
)

series.funnel.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markArea.data.0.itemStyle.normal.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
)

series.funnel.markArea.data.0.value

标域值,可以不设。

series.funnel.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.funnel.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.funnel.markArea.itemStyle

该标域的样式。

series.funnel.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markArea.itemStyle.emphasis.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
)

series.funnel.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markArea.itemStyle.normal.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
)

series.funnel.markArea.label

标域文本配置。

series.funnel.markArea.label.emphasis.textStyle

标签的字体样式。

series.funnel.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.funnel.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.funnel.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markArea.label.emphasis.textStyle.color

文字的颜色。

series.funnel.markArea.label.emphasis.position

标签的位置。

可选:

series.funnel.markArea.label.emphasis.show

是否显示标签。

series.funnel.markArea.label.normal.textStyle

标签的字体样式。

series.funnel.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.funnel.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.funnel.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markArea.label.normal.textStyle.color

文字的颜色。

series.funnel.markArea.label.normal.position

标签的位置。

可选:

series.funnel.markArea.label.normal.show

是否显示标签。

series.funnel.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.funnel.markLine

图表标线。

series.funnel.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.funnel.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.funnel.markLine.animationDurationUpdate

数据更新动画的时长。

series.funnel.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.funnel.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.funnel.markLine.animationDuration

初始动画的时长。

series.funnel.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.funnel.markLine.animation

是否开启动画,默认开启。

series.funnel.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

series.funnel.markLine.data.1

终点的数据。

series.funnel.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.funnel.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markLine.data.1.label.emphasis.position

标签位置,可选:

series.funnel.markLine.data.1.label.emphasis.show

是否显示标签。

series.funnel.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markLine.data.1.label.normal.position

标签位置,可选:

series.funnel.markLine.data.1.label.normal.show

是否显示标签。

series.funnel.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.funnel.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.funnel.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.funnel.markLine.data.1.lineStyle.emphasis.width

线宽。

series.funnel.markLine.data.1.lineStyle.emphasis.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
)

series.funnel.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.funnel.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.funnel.markLine.data.1.lineStyle.normal.width

线宽。

series.funnel.markLine.data.1.lineStyle.normal.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
)

series.funnel.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.funnel.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.funnel.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.funnel.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.funnel.markLine.data.1.value

标注值,可以不设。

series.funnel.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.funnel.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.funnel.markLine.data.0

起点的数据。

series.funnel.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.funnel.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markLine.data.0.label.emphasis.position

标签位置,可选:

series.funnel.markLine.data.0.label.emphasis.show

是否显示标签。

series.funnel.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markLine.data.0.label.normal.position

标签位置,可选:

series.funnel.markLine.data.0.label.normal.show

是否显示标签。

series.funnel.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.funnel.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.funnel.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.funnel.markLine.data.0.lineStyle.emphasis.width

线宽。

series.funnel.markLine.data.0.lineStyle.emphasis.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
)

series.funnel.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.funnel.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.funnel.markLine.data.0.lineStyle.normal.width

线宽。

series.funnel.markLine.data.0.lineStyle.normal.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
)

series.funnel.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.funnel.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.funnel.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.funnel.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.funnel.markLine.data.0.value

标注值,可以不设。

series.funnel.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.funnel.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.funnel.markLine.lineStyle

标线的样式

series.funnel.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.funnel.markLine.lineStyle.emphasis.width

线宽。

series.funnel.markLine.lineStyle.emphasis.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
)

series.funnel.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.funnel.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markLine.lineStyle.normal.type

线的类型。

可选:

series.funnel.markLine.lineStyle.normal.width

线宽。

series.funnel.markLine.lineStyle.normal.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
)

series.funnel.markLine.label

标线的文本。

series.funnel.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markLine.label.emphasis.position

标签位置,可选:

series.funnel.markLine.label.emphasis.show

是否显示标签。

series.funnel.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markLine.label.normal.position

标签位置,可选:

series.funnel.markLine.label.normal.show

是否显示标签。

series.funnel.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.funnel.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.funnel.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.funnel.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.funnel.markPoint

图表标注。

series.funnel.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.funnel.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.funnel.markPoint.animationDurationUpdate

数据更新动画的时长。

series.funnel.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.funnel.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.funnel.markPoint.animationDuration

初始动画的时长。

series.funnel.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.funnel.markPoint.animation

是否开启动画,默认开启。

series.funnel.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.funnel.markPoint.itemStyle

标注的样式。

series.funnel.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markPoint.itemStyle.emphasis.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
)

series.funnel.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.funnel.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.markPoint.itemStyle.normal.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
)

series.funnel.markPoint.label

标注的文本。

series.funnel.markPoint.label.emphasis.textStyle

标签的字体样式。

series.funnel.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.funnel.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.funnel.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.funnel.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markPoint.label.emphasis.position

标签的位置。

可选:

series.funnel.markPoint.label.emphasis.show

是否显示标签。

series.funnel.markPoint.label.normal.textStyle

标签的字体样式。

series.funnel.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.funnel.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.funnel.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.markPoint.label.normal.textStyle.color

文字的颜色。

series.funnel.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.markPoint.label.normal.position

标签的位置。

可选:

series.funnel.markPoint.label.normal.show

是否显示标签。

series.funnel.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.funnel.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.funnel.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.funnel.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.funnel.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.funnel.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:{}
}]

series.funnel.itemStyle

图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.funnel.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.funnel.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.funnel.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.itemStyle.emphasis.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
)

series.funnel.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.funnel.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.funnel.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.funnel.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.funnel.itemStyle.normal.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 等各个参数。

series.funnel.labelLine

标签的视觉引导线样式,在 label 位置 设置为'left'或者'right'的时候会显示视觉引导线。

series.funnel.labelLine.emphasis

高亮状态下视觉引导线的样式。

series.funnel.labelLine.emphasis.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.labelLine.emphasis.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.labelLine.emphasis.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.labelLine.emphasis.lineStyle.shadowColor

阴影颜色。支持的格式同color

series.funnel.labelLine.emphasis.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.labelLine.emphasis.lineStyle.type

线的类型。

可选:

series.funnel.labelLine.emphasis.lineStyle.width

线宽。

series.funnel.labelLine.emphasis.lineStyle.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
)

series.funnel.labelLine.emphasis.show

是否显示视觉引导线。

series.funnel.labelLine.normal

普通状态下视觉引导线的样式。

series.funnel.labelLine.normal.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.funnel.labelLine.normal.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

series.funnel.labelLine.normal.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

series.funnel.labelLine.normal.lineStyle.shadowColor

阴影颜色。支持的格式同color

series.funnel.labelLine.normal.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.funnel.labelLine.normal.lineStyle.type

线的类型。

可选:

series.funnel.labelLine.normal.lineStyle.width

线宽。

series.funnel.labelLine.normal.lineStyle.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
)

series.funnel.labelLine.normal.length

视觉引导线第一段的长度。

series.funnel.labelLine.normal.show

是否显示视觉引导线。

series.funnel.label

漏斗图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.funnel.label.emphasis.textStyle

标签的字体样式。

series.funnel.label.emphasis.textStyle.fontSize

文字的字体大小

series.funnel.label.emphasis.textStyle.fontFamily

文字的字体系列

series.funnel.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.label.emphasis.textStyle.color

文字的颜色。

series.funnel.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.label.normal.textStyle

标签的字体样式。

series.funnel.label.normal.textStyle.fontSize

文字的字体大小

series.funnel.label.normal.textStyle.fontFamily

文字的字体系列

series.funnel.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.funnel.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.funnel.label.normal.textStyle.color

文字的颜色。

series.funnel.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.funnel.label.normal.position

标签的位置。

可选:

series.funnel.funnelAlign

水平方向对齐布局类型,默认居中对齐,可用选项还有:'left' | 'right' | 'center'

series.funnel.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.funnel.gap

数据图形间距。

series.funnel.sort

数据排序, 可以取 'ascending', 'descending'

series.funnel.maxSize

数据最大值 max 映射的宽度。

可以是绝对的像素大小,也可以是相对布局宽度的百分比。

series.funnel.minSize

数据最小值 min 映射的宽度。

可以是绝对的像素大小,也可以是相对布局宽度的百分比,如果需要最小值的图形并不是尖端三角,可通过设置该属性实现。

series.funnel.max

指定的数据最大值。

series.funnel.min

指定的数据最小值。

series.funnel.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.sankey

桑基图

是一种特殊的流图, 它主要用来表示原材料、能量等如何从初始形式经过中间过程的加工、转化到达最终形式。

示例:


可视编码:

桑基图将原数据中的每个node编码成一个小矩形,不同的节点尽量用不同的颜色展示,小矩形旁边的label编码的是节点的名称。

此外,图中每两个小矩形之间的边编码的是原数据中的link,边的粗细编码的是link中的value


排序: 如果想指定结果的纵向顺序,那么可以把 layoutIterations 设为 0,此时纵向的顺序依照数据在 links 中出现的顺序。

series.sankey.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.sankey.animationEasingUpdate

数据更新动画的缓动效果。

series.sankey.animationDurationUpdate

数据更新动画的时长。

series.sankey.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.sankey.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.sankey.animationDuration

初始动画的时长。

series.sankey.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.sankey.animation

是否开启动画,默认开启。

series.sankey.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.sankey.edges

links

series.sankey.links

节点间的关系数据。示例:

links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]

series.sankey.nodes

data

series.sankey.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:{}
}]

series.sankey.lineStyle

桑基图边的样式,其中 lineStyle.normal.color 支持设置为'source'或者'target'特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。

series.sankey.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.sankey.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.sankey.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.sankey.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.lineStyle.emphasis.curveness

桑基图边的曲度。

series.sankey.lineStyle.emphasis.opacity

桑基图边的透明度。

series.sankey.lineStyle.emphasis.color

桑基图边的颜色。

series.sankey.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.sankey.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.sankey.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.sankey.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.lineStyle.normal.curveness

桑基图边的曲度。

series.sankey.lineStyle.normal.opacity

桑基图边的透明度。

series.sankey.lineStyle.normal.color

桑基图边的颜色。

series.sankey.itemStyle

桑基图节点矩形的样式。

series.sankey.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.sankey.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.sankey.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.sankey.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.sankey.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.sankey.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.sankey.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.sankey.itemStyle.emphasis.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
)

series.sankey.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.sankey.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.sankey.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.sankey.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.sankey.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.sankey.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.sankey.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.sankey.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.sankey.itemStyle.normal.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
)

series.sankey.label

label 描述了每个矩形节点中文本标签的样式。

series.sankey.label.emphasis.textStyle

标签的字体样式。

series.sankey.label.emphasis.textStyle.fontSize

文字的字体大小

series.sankey.label.emphasis.textStyle.fontFamily

文字的字体系列

series.sankey.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.sankey.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.sankey.label.emphasis.textStyle.color

文字的颜色。

series.sankey.label.emphasis.position

标签的位置。

可选:

series.sankey.label.emphasis.show

是否显示标签。

series.sankey.label.normal.textStyle

标签的字体样式。

series.sankey.label.normal.textStyle.fontSize

文字的字体大小

series.sankey.label.normal.textStyle.fontFamily

文字的字体系列

series.sankey.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.sankey.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.sankey.label.normal.textStyle.color

文字的颜色。

series.sankey.label.normal.position

标签的位置。

可选:

series.sankey.label.normal.show

是否显示标签。

series.sankey.layoutIterations

布局的迭代次数,用来不断优化图中节点的位置,以减少节点和边之间的相互遮盖。

默认布局迭代次数:32

经测试,布局迭代次数不要低于默认值。

series.sankey.nodeGap

图中每一列任意两个矩形节点之间的间隔。

series.sankey.nodeWidth

图中每个矩形节点的宽度。

series.sankey.height

sankey组件的高度。

series.sankey.width

sankey组件的宽度。

series.sankey.bottom

sankey组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

series.sankey.right

sankey组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

series.sankey.top

sankey组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

series.sankey.left

sankey组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

series.sankey.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.sankey.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.graph

关系图

用于展现节点以及节点之间的关系数据。

注意: ECharts 2.x 中 force 类型的图表不再在 ECharts 3 中提供支持,转为统一使用 graph 去展现关系数据。如果要使用力引导布局,可以将 layout 配置项设为'force'

示例:

series.graph.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.graph.animationEasingUpdate

数据更新动画的缓动效果。

series.graph.animationDurationUpdate

数据更新动画的时长。

series.graph.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.graph.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.graph.animationDuration

初始动画的时长。

series.graph.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.graph.animation

是否开启动画,默认开启。

series.graph.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.graph.height

组件的高度。

series.graph.width

组件的宽度。

series.graph.bottom

组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.graph.right

组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.graph.top

组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

series.graph.left

组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

series.graph.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.graph.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.graph.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.graph.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.graph.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.graph.markArea.animationDurationUpdate

数据更新动画的时长。

series.graph.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.graph.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.graph.markArea.animationDuration

初始动画的时长。

series.graph.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.graph.markArea.animation

是否开启动画,默认开启。

series.graph.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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%'
        }
    ]
]

series.graph.markArea.data.1

标域右下角的数据

series.graph.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.graph.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.graph.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.graph.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.graph.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.graph.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.graph.markArea.data.1.label.emphasis.show

是否显示标签。

series.graph.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.graph.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.graph.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.graph.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.graph.markArea.data.1.label.normal.position

标签的位置。

可选:

series.graph.markArea.data.1.label.normal.show

是否显示标签。

series.graph.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.graph.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.graph.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markArea.data.1.itemStyle.emphasis.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
)

series.graph.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.graph.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markArea.data.1.itemStyle.normal.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
)

series.graph.markArea.data.1.value

标域值,可以不设。

series.graph.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.graph.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.graph.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.graph.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.graph.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.graph.markArea.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.graph.markArea.data.0

标域左上角的数据

series.graph.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.graph.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.graph.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.graph.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.graph.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.graph.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.graph.markArea.data.0.label.emphasis.show

是否显示标签。

series.graph.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.graph.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.graph.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.graph.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.graph.markArea.data.0.label.normal.position

标签的位置。

可选:

series.graph.markArea.data.0.label.normal.show

是否显示标签。

series.graph.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.graph.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.graph.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markArea.data.0.itemStyle.emphasis.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
)

series.graph.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.graph.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markArea.data.0.itemStyle.normal.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
)

series.graph.markArea.data.0.value

标域值,可以不设。

series.graph.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.graph.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.graph.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.graph.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.graph.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.graph.markArea.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.graph.markArea.itemStyle

该标域的样式。

series.graph.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.graph.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markArea.itemStyle.emphasis.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
)

series.graph.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.graph.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markArea.itemStyle.normal.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
)

series.graph.markArea.label

标域文本配置。

series.graph.markArea.label.emphasis.textStyle

标签的字体样式。

series.graph.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.graph.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.graph.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markArea.label.emphasis.textStyle.color

文字的颜色。

series.graph.markArea.label.emphasis.position

标签的位置。

可选:

series.graph.markArea.label.emphasis.show

是否显示标签。

series.graph.markArea.label.normal.textStyle

标签的字体样式。

series.graph.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.graph.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.graph.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markArea.label.normal.textStyle.color

文字的颜色。

series.graph.markArea.label.normal.position

标签的位置。

可选:

series.graph.markArea.label.normal.show

是否显示标签。

series.graph.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.graph.markLine

图表标线。

series.graph.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.graph.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.graph.markLine.animationDurationUpdate

数据更新动画的时长。

series.graph.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.graph.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.graph.markLine.animationDuration

初始动画的时长。

series.graph.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.graph.markLine.animation

是否开启动画,默认开启。

series.graph.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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
        }
    ]
]

series.graph.markLine.data.1

终点的数据。

series.graph.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.graph.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markLine.data.1.label.emphasis.position

标签位置,可选:

series.graph.markLine.data.1.label.emphasis.show

是否显示标签。

series.graph.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markLine.data.1.label.normal.position

标签位置,可选:

series.graph.markLine.data.1.label.normal.show

是否显示标签。

series.graph.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.graph.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.graph.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.graph.markLine.data.1.lineStyle.emphasis.width

线宽。

series.graph.markLine.data.1.lineStyle.emphasis.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
)

series.graph.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.graph.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.graph.markLine.data.1.lineStyle.normal.width

线宽。

series.graph.markLine.data.1.lineStyle.normal.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
)

series.graph.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.graph.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.graph.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.graph.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.graph.markLine.data.1.value

标注值,可以不设。

series.graph.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.graph.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.graph.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.graph.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.graph.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.graph.markLine.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.graph.markLine.data.0

起点的数据。

series.graph.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.graph.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markLine.data.0.label.emphasis.position

标签位置,可选:

series.graph.markLine.data.0.label.emphasis.show

是否显示标签。

series.graph.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markLine.data.0.label.normal.position

标签位置,可选:

series.graph.markLine.data.0.label.normal.show

是否显示标签。

series.graph.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.graph.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.graph.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.graph.markLine.data.0.lineStyle.emphasis.width

线宽。

series.graph.markLine.data.0.lineStyle.emphasis.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
)

series.graph.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.graph.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.graph.markLine.data.0.lineStyle.normal.width

线宽。

series.graph.markLine.data.0.lineStyle.normal.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
)

series.graph.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.graph.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.graph.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.graph.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.graph.markLine.data.0.value

标注值,可以不设。

series.graph.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.graph.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.graph.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.graph.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.graph.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.graph.markLine.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.graph.markLine.lineStyle

标线的样式

series.graph.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.graph.markLine.lineStyle.emphasis.width

线宽。

series.graph.markLine.lineStyle.emphasis.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
)

series.graph.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.graph.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markLine.lineStyle.normal.type

线的类型。

可选:

series.graph.markLine.lineStyle.normal.width

线宽。

series.graph.markLine.lineStyle.normal.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
)

series.graph.markLine.label

标线的文本。

series.graph.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markLine.label.emphasis.position

标签位置,可选:

series.graph.markLine.label.emphasis.show

是否显示标签。

series.graph.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markLine.label.normal.position

标签位置,可选:

series.graph.markLine.label.normal.show

是否显示标签。

series.graph.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.graph.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.graph.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.graph.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.graph.markPoint

图表标注。

series.graph.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.graph.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.graph.markPoint.animationDurationUpdate

数据更新动画的时长。

series.graph.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.graph.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.graph.markPoint.animationDuration

初始动画的时长。

series.graph.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.graph.markPoint.animation

是否开启动画,默认开启。

series.graph.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.graph.markPoint.itemStyle

标注的样式。

series.graph.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.graph.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markPoint.itemStyle.emphasis.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
)

series.graph.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.graph.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.graph.markPoint.itemStyle.normal.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
)

series.graph.markPoint.label

标注的文本。

series.graph.markPoint.label.emphasis.textStyle

标签的字体样式。

series.graph.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.graph.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.graph.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.graph.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markPoint.label.emphasis.position

标签的位置。

可选:

series.graph.markPoint.label.emphasis.show

是否显示标签。

series.graph.markPoint.label.normal.textStyle

标签的字体样式。

series.graph.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.graph.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.graph.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.graph.markPoint.label.normal.textStyle.color

文字的颜色。

series.graph.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.markPoint.label.normal.position

标签的位置。

可选:

series.graph.markPoint.label.normal.show

是否显示标签。

series.graph.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.graph.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.graph.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.graph.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.graph.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.graph.edges

别名,同 links

series.graph.links

节点间的关系数据。示例:

links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]

series.graph.nodes

别名,同 data

series.graph.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:{}
}]

series.graph.categories

节点分类的类目,可选。

如果节点有分类的话可以通过 data[i].category 指定每个节点的类目,类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。

series.graph.edgeLabel.emphasis.textStyle.fontSize

文字的字体大小

series.graph.edgeLabel.emphasis.textStyle.fontFamily

文字的字体系列

series.graph.edgeLabel.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.edgeLabel.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.graph.edgeLabel.emphasis.textStyle.color

文字的颜色。

series.graph.edgeLabel.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.edgeLabel.emphasis.position

标签位置,可选:

series.graph.edgeLabel.emphasis.show

是否显示标签。

series.graph.edgeLabel.normal.textStyle.fontSize

文字的字体大小

series.graph.edgeLabel.normal.textStyle.fontFamily

文字的字体系列

series.graph.edgeLabel.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.edgeLabel.normal.textStyle.fontStyle

文字字体的风格

可选:

series.graph.edgeLabel.normal.textStyle.color

文字的颜色。

series.graph.edgeLabel.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.graph.edgeLabel.normal.position

标签位置,可选:

series.graph.edgeLabel.normal.show

是否显示标签。

series.graph.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.graph.label.emphasis.textStyle

标签的字体样式。

series.graph.label.emphasis.textStyle.fontSize

文字的字体大小

series.graph.label.emphasis.textStyle.fontFamily

文字的字体系列

series.graph.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.graph.label.emphasis.textStyle.color

文字的颜色。

series.graph.label.emphasis.position

标签的位置。

可选:

series.graph.label.emphasis.show

是否显示标签。

series.graph.label.normal.textStyle

标签的字体样式。

series.graph.label.normal.textStyle.fontSize

文字的字体大小

series.graph.label.normal.textStyle.fontFamily

文字的字体系列

series.graph.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.graph.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.graph.label.normal.textStyle.color

文字的颜色。

series.graph.label.normal.position

标签的位置。

可选:

series.graph.label.normal.show

是否显示标签。

series.graph.lineStyle

关系边的公用线条样式。其中 lineStyle.normal.color 支持设置为'source'或者'target'特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。

series.graph.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.lineStyle.emphasis.type

线的类型。

可选:

series.graph.lineStyle.emphasis.width

线宽。

series.graph.lineStyle.emphasis.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
)

series.graph.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.graph.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.lineStyle.normal.type

线的类型。

可选:

series.graph.lineStyle.normal.width

线宽。

series.graph.lineStyle.normal.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
)

series.graph.itemStyle

图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.graph.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.graph.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.graph.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.graph.itemStyle.emphasis.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
)

series.graph.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.graph.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.graph.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.graph.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.graph.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.graph.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.graph.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.graph.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.graph.itemStyle.normal.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 等各个参数。

series.graph.edgeSymbolSize

边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

series.graph.edgeSymbol

边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头,如下:

edgeSymbol: ['circle', 'arrow']

series.graph.symbolOffset

关系图节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.graph.symbolRotate

关系图节点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.graph.symbolSize

关系图节点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.graph.symbol

关系图节点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.graph.focusNodeAdjacency

是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。

series.graph.draggable

节点是否可拖拽,只在使用力引导布局的时候有用。

series.graph.nodeScaleRatio

鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放

series.graph.roam

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启

series.graph.force

力引导布局相关的配置项,力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力,每条边的两个节点之间添加一个引力,每次迭代节点会在各个斥力和引力的作用下移动位置,多次迭代后节点会静止在一个受力平衡的位置,达到整个模型的能量最小化。

力引导布局的结果有良好的对称性和局部聚合性,也比较美观。

series.graph.force.layoutAnimation

因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。

series.graph.force.edgeLength

边的两个节点之间的距离,这个距离也会受 repulsion

支持设置成数组表达边长的范围,此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例

// 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
edgeLength: [10, 50]

series.graph.force.gravity

节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。

series.graph.force.repulsion

节点之间的斥力因子。

支持设置成数组表达斥力的范围,此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大

series.graph.force.initLayout

进行力引导布局前的初始化布局,初始化布局会影响到力引导的效果。

默认不进行任何布局,使用节点中提供的 xy 作为节点的位置。如果不存在的话会随机生成一个位置。

也可以选择使用环形布局 'circular'

series.graph.circular

环形布局相关配置

series.graph.circular.rotateLabel

是否旋转标签,默认不旋转

series.graph.layout

图的布局。

可选:

series.graph.hoverAnimation

是否开启鼠标 hover 节点的提示动画效果。

series.graph.geoIndex

使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。

series.graph.polarIndex

使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。

series.graph.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.graph.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.graph.coordinateSystem

该系列使用的坐标系,可选:

series.graph.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.graph.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.lines

线图

用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。

ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果,在 ECharts 3 里建议使用单独的 lines 类型图表。

迁徙示例:

series.lines.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.lines.animationEasingUpdate

数据更新动画的缓动效果。

series.lines.animationDurationUpdate

数据更新动画的时长。

series.lines.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.lines.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.lines.animationDuration

初始动画的时长。

series.lines.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.lines.animation

是否开启动画,默认开启。

series.lines.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.lines.z

线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.lines.zlevel

线图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.lines.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.lines.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.lines.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.lines.markArea.animationDurationUpdate

数据更新动画的时长。

series.lines.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.lines.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.lines.markArea.animationDuration

初始动画的时长。

series.lines.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.lines.markArea.animation

是否开启动画,默认开启。

series.lines.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标域',
            x: 100,
            y: 100
        }, {
            x: '90%',
            y: '10%'
        }
    ]
]

series.lines.markArea.data.1

标域右下角的数据

series.lines.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.lines.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.lines.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.lines.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.lines.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.lines.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.lines.markArea.data.1.label.emphasis.show

是否显示标签。

series.lines.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.lines.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.lines.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.lines.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.lines.markArea.data.1.label.normal.position

标签的位置。

可选:

series.lines.markArea.data.1.label.normal.show

是否显示标签。

series.lines.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.lines.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.lines.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markArea.data.1.itemStyle.emphasis.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
)

series.lines.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.lines.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markArea.data.1.itemStyle.normal.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
)

series.lines.markArea.data.1.value

标域值,可以不设。

series.lines.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.lines.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.lines.markArea.data.0

标域左上角的数据

series.lines.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.lines.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.lines.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.lines.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.lines.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.lines.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.lines.markArea.data.0.label.emphasis.show

是否显示标签。

series.lines.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.lines.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.lines.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.lines.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.lines.markArea.data.0.label.normal.position

标签的位置。

可选:

series.lines.markArea.data.0.label.normal.show

是否显示标签。

series.lines.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.lines.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.lines.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markArea.data.0.itemStyle.emphasis.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
)

series.lines.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.lines.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markArea.data.0.itemStyle.normal.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
)

series.lines.markArea.data.0.value

标域值,可以不设。

series.lines.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.lines.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.lines.markArea.itemStyle

该标域的样式。

series.lines.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.lines.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markArea.itemStyle.emphasis.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
)

series.lines.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.lines.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markArea.itemStyle.normal.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
)

series.lines.markArea.label

标域文本配置。

series.lines.markArea.label.emphasis.textStyle

标签的字体样式。

series.lines.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.lines.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.lines.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markArea.label.emphasis.textStyle.color

文字的颜色。

series.lines.markArea.label.emphasis.position

标签的位置。

可选:

series.lines.markArea.label.emphasis.show

是否显示标签。

series.lines.markArea.label.normal.textStyle

标签的字体样式。

series.lines.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.lines.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.lines.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markArea.label.normal.textStyle.color

文字的颜色。

series.lines.markArea.label.normal.position

标签的位置。

可选:

series.lines.markArea.label.normal.show

是否显示标签。

series.lines.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.lines.markLine

图表标线。

series.lines.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.lines.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.lines.markLine.animationDurationUpdate

数据更新动画的时长。

series.lines.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.lines.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.lines.markLine.animationDuration

初始动画的时长。

series.lines.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.lines.markLine.animation

是否开启动画,默认开启。

series.lines.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

series.lines.markLine.data.1

终点的数据。

series.lines.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.lines.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markLine.data.1.label.emphasis.position

标签位置,可选:

series.lines.markLine.data.1.label.emphasis.show

是否显示标签。

series.lines.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markLine.data.1.label.normal.position

标签位置,可选:

series.lines.markLine.data.1.label.normal.show

是否显示标签。

series.lines.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.lines.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.lines.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.lines.markLine.data.1.lineStyle.emphasis.width

线宽。

series.lines.markLine.data.1.lineStyle.emphasis.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
)

series.lines.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.lines.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.lines.markLine.data.1.lineStyle.normal.width

线宽。

series.lines.markLine.data.1.lineStyle.normal.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
)

series.lines.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.lines.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.lines.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.lines.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.lines.markLine.data.1.value

标注值,可以不设。

series.lines.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.lines.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.lines.markLine.data.0

起点的数据。

series.lines.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.lines.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markLine.data.0.label.emphasis.position

标签位置,可选:

series.lines.markLine.data.0.label.emphasis.show

是否显示标签。

series.lines.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markLine.data.0.label.normal.position

标签位置,可选:

series.lines.markLine.data.0.label.normal.show

是否显示标签。

series.lines.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.lines.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.lines.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.lines.markLine.data.0.lineStyle.emphasis.width

线宽。

series.lines.markLine.data.0.lineStyle.emphasis.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
)

series.lines.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.lines.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.lines.markLine.data.0.lineStyle.normal.width

线宽。

series.lines.markLine.data.0.lineStyle.normal.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
)

series.lines.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.lines.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.lines.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.lines.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.lines.markLine.data.0.value

标注值,可以不设。

series.lines.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.lines.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.lines.markLine.lineStyle

标线的样式

series.lines.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.lines.markLine.lineStyle.emphasis.width

线宽。

series.lines.markLine.lineStyle.emphasis.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
)

series.lines.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.lines.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markLine.lineStyle.normal.type

线的类型。

可选:

series.lines.markLine.lineStyle.normal.width

线宽。

series.lines.markLine.lineStyle.normal.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
)

series.lines.markLine.label

标线的文本。

series.lines.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markLine.label.emphasis.position

标签位置,可选:

series.lines.markLine.label.emphasis.show

是否显示标签。

series.lines.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markLine.label.normal.position

标签位置,可选:

series.lines.markLine.label.normal.show

是否显示标签。

series.lines.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.lines.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.lines.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.lines.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.lines.markPoint

图表标注。

series.lines.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.lines.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.lines.markPoint.animationDurationUpdate

数据更新动画的时长。

series.lines.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.lines.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.lines.markPoint.animationDuration

初始动画的时长。

series.lines.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.lines.markPoint.animation

是否开启动画,默认开启。

series.lines.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.lines.markPoint.itemStyle

标注的样式。

series.lines.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.lines.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markPoint.itemStyle.emphasis.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
)

series.lines.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.lines.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.lines.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.lines.markPoint.itemStyle.normal.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
)

series.lines.markPoint.label

标注的文本。

series.lines.markPoint.label.emphasis.textStyle

标签的字体样式。

series.lines.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.lines.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.lines.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.lines.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markPoint.label.emphasis.position

标签的位置。

可选:

series.lines.markPoint.label.emphasis.show

是否显示标签。

series.lines.markPoint.label.normal.textStyle

标签的字体样式。

series.lines.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.lines.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.lines.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.lines.markPoint.label.normal.textStyle.color

文字的颜色。

series.lines.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.markPoint.label.normal.position

标签的位置。

可选:

series.lines.markPoint.label.normal.show

是否显示标签。

series.lines.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.lines.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.lines.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.lines.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.lines.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.lines.data

线数据集。

注: 为了更好点支持多段线的配置,线数据的格式在 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: {}
    }
}

series.lines.label

标签相关配置。在 polyline 设置为 true 时无效。

series.lines.label.emphasis.textStyle.fontSize

文字的字体大小

series.lines.label.emphasis.textStyle.fontFamily

文字的字体系列

series.lines.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.lines.label.emphasis.textStyle.color

文字的颜色。

series.lines.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.label.emphasis.position

标签位置,可选:

series.lines.label.emphasis.show

是否显示标签。

series.lines.label.normal.textStyle.fontSize

文字的字体大小

series.lines.label.normal.textStyle.fontFamily

文字的字体系列

series.lines.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.lines.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.lines.label.normal.textStyle.color

文字的颜色。

series.lines.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.lines.label.normal.position

标签位置,可选:

series.lines.label.normal.show

是否显示标签。

series.lines.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.lines.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.lineStyle.emphasis.type

线的类型。

可选:

series.lines.lineStyle.emphasis.width

线宽。

series.lines.lineStyle.emphasis.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
)

series.lines.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.lines.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.lines.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.lines.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.lines.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.lines.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.lines.lineStyle.normal.type

线的类型。

可选:

series.lines.lineStyle.normal.width

线宽。

series.lines.lineStyle.normal.color

线的颜色。 默认从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
)

series.lines.largeThreshold

开启绘制优化的阈值。

series.lines.large

是否启用大规模线图的优化,在数据图形特别多的时候(>=5k)可以开启。

开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。

缺点:优化后不能自定义设置单个数据项的样式,不能启用 effect

series.lines.effect

线特效的配置,见示例 模拟迁徙北京公交路线

注意: 所有带有尾迹特效的图表需要单独放在一个层,也就是需要单独设置 zlevel,同时建议关闭该层的动画(animation: false)。不然位于同个层的其它系列的图形,和动画的标签也会产生不必要的残影。

series.lines.effect.loop

是否循环显示特效。

series.lines.effect.trailLength

特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。

series.lines.effect.color

特效标记的颜色,默认取 lineStyle.normal.color

series.lines.effect.symbolSize

特效标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示高和宽,例如 [20, 10] 表示标记宽为20,高为10

series.lines.effect.symbol

特效图形的标记。

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 沿着轨迹运动的时候可以保证图形始终朝着运动的方向。

series.lines.effect.constantSpeed

配置特效图形的移动动画是否是固定速度,单位像素/秒,设置为大于 0 的值后会忽略 period 配置项。

series.lines.effect.period

特效动画的时间,单位为 s。

series.lines.effect.show

是否显示特效。

series.lines.polyline

是否是多段线。

默认为 false,只能用于绘制只有两个端点的线段,线段可以通过 lineStyle.normal.curveness 配置为曲线。

如果该配置项为 true,则可以在 data.coords 中设置多于 2 个的顶点用来绘制多段线,在绘制路线轨迹的时候比较有用,见示例 北京公交路线,设置为多段线后 lineStyle.normal.curveness 无效。

series.lines.geoIndex

使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。

series.lines.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.lines.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.lines.coordinateSystem

该系列使用的坐标系,可选:

series.lines.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.parallel

平行坐标系的系列。



平行坐标系介绍

平行坐标系(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, '优'],
                ...
            ]
        }
    ]
};

需要涉及到三个组件:parallelparallelAxisseries-parallel



配置注意和最佳实践

配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。

如果数据量很大并且发生卡顿

建议把 series-parallel.lineStyle.normal.width 设为 0.5(或更小), 可能显著改善性能。



高维数据的显示

维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。

可以通过 parallel.axisExpandable 来改善显示效果,如下例子:

series.parallel.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.parallel.animationEasingUpdate

数据更新动画的缓动效果。

series.parallel.animationDurationUpdate

数据更新动画的时长。

series.parallel.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.parallel.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.parallel.animationDuration

初始动画的时长。

series.parallel.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.parallel.animation

是否开启动画,默认开启。

series.parallel.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.parallel.z

平行坐标组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.parallel.zlevel

平行坐标所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.parallel.data

例如 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』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。

series.parallel.realtime

是否实时刷新。

series.parallel.activeOpacity

框选时,选中的条线会设置成这个『透明度』(从而可以达到高亮的效果)。

series.parallel.inactiveOpacity

框选时,未被选中的条线会设置成这个『透明度』(从而可以达到变暗的效果)。

series.parallel.lineStyle

线条样式。

series.parallel.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.parallel.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.parallel.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.parallel.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.parallel.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.parallel.lineStyle.emphasis.type

线的类型。

可选:

series.parallel.lineStyle.emphasis.width

线宽。

series.parallel.lineStyle.emphasis.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
)

series.parallel.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.parallel.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.parallel.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.parallel.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.parallel.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.parallel.lineStyle.normal.type

线的类型。

可选:

series.parallel.lineStyle.normal.width

线宽。

series.parallel.lineStyle.normal.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
)

series.parallel.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.parallel.parallelIndex

使用的平行坐标系的 index,在单个图表实例中存在多个平行坐标系的时候有用。

series.parallel.coordinateSystem

该系列使用的坐标系,可选:

series.map

地图。

地图主要用于地理区域数据的可视化,配合 visualMap 组件用于展示不同区域的人口分布密度等数据。

多个地图类型相同的系列会在同一地图上显示,这时候使用第一个系列的配置项作为地图绘制的配置。

Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLinemarkPoint。如果要实现点数据或者线数据的可视化,可以使用在地理坐标系组件上的散点图线图

示例:

series.map.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.map.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.map.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.map.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.map.markArea.animationDurationUpdate

数据更新动画的时长。

series.map.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.map.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.map.markArea.animationDuration

初始动画的时长。

series.map.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.map.markArea.animation

是否开启动画,默认开启。

series.map.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

当多个属性同时存在时,优先级按上述的顺序。

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%'
        }
    ]
]

series.map.markArea.data.1

标域右下角的数据

series.map.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.map.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.map.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.map.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.map.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.map.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.map.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.map.markArea.data.1.label.emphasis.show

是否显示标签。

series.map.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.map.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.map.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.map.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.map.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.map.markArea.data.1.label.normal.position

标签的位置。

可选:

series.map.markArea.data.1.label.normal.show

是否显示标签。

series.map.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.map.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.map.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.map.markArea.data.1.itemStyle.emphasis.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
)

series.map.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.map.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.map.markArea.data.1.itemStyle.normal.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
)

series.map.markArea.data.1.value

标域值,可以不设。

series.map.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.map.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.map.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.map.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.map.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.map.markArea.data.0

标域左上角的数据

series.map.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.map.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.map.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.map.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.map.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.map.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.map.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.map.markArea.data.0.label.emphasis.show

是否显示标签。

series.map.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.map.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.map.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.map.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.map.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.map.markArea.data.0.label.normal.position

标签的位置。

可选:

series.map.markArea.data.0.label.normal.show

是否显示标签。

series.map.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.map.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.map.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.map.markArea.data.0.itemStyle.emphasis.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
)

series.map.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.map.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.map.markArea.data.0.itemStyle.normal.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
)

series.map.markArea.data.0.value

标域值,可以不设。

series.map.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.map.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.map.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.map.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.map.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.map.markArea.itemStyle

该标域的样式。

series.map.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.map.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.map.markArea.itemStyle.emphasis.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
)

series.map.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.map.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.map.markArea.itemStyle.normal.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
)

series.map.markArea.label

标域文本配置。

series.map.markArea.label.emphasis.textStyle

标签的字体样式。

series.map.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.map.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.map.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.map.markArea.label.emphasis.textStyle.color

文字的颜色。

series.map.markArea.label.emphasis.position

标签的位置。

可选:

series.map.markArea.label.emphasis.show

是否显示标签。

series.map.markArea.label.normal.textStyle

标签的字体样式。

series.map.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.map.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.map.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.map.markArea.label.normal.textStyle.color

文字的颜色。

series.map.markArea.label.normal.position

标签的位置。

可选:

series.map.markArea.label.normal.show

是否显示标签。

series.map.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.map.markLine

图表标线。

series.map.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.map.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.map.markLine.animationDurationUpdate

数据更新动画的时长。

series.map.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.map.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.map.markLine.animationDuration

初始动画的时长。

series.map.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.map.markLine.animation

是否开启动画,默认开启。

series.map.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个坐标之间的标线',
            coord: [10, 20]
        },
        {
            coord: [20, 30]
        }
    ], [{
        // 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
        yAxis: 'max',
        x: '90%'
    }, {
        type: 'max'
    }],
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

series.map.markLine.data.1

终点的数据。

series.map.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.map.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markLine.data.1.label.emphasis.position

标签位置,可选:

series.map.markLine.data.1.label.emphasis.show

是否显示标签。

series.map.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markLine.data.1.label.normal.position

标签位置,可选:

series.map.markLine.data.1.label.normal.show

是否显示标签。

series.map.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.map.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.map.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.map.markLine.data.1.lineStyle.emphasis.width

线宽。

series.map.markLine.data.1.lineStyle.emphasis.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
)

series.map.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.map.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.map.markLine.data.1.lineStyle.normal.width

线宽。

series.map.markLine.data.1.lineStyle.normal.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
)

series.map.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.map.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.map.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.map.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.map.markLine.data.1.value

标注值,可以不设。

series.map.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.map.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.map.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.map.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.map.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.map.markLine.data.0

起点的数据。

series.map.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.map.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markLine.data.0.label.emphasis.position

标签位置,可选:

series.map.markLine.data.0.label.emphasis.show

是否显示标签。

series.map.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markLine.data.0.label.normal.position

标签位置,可选:

series.map.markLine.data.0.label.normal.show

是否显示标签。

series.map.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.map.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.map.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.map.markLine.data.0.lineStyle.emphasis.width

线宽。

series.map.markLine.data.0.lineStyle.emphasis.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
)

series.map.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.map.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.map.markLine.data.0.lineStyle.normal.width

线宽。

series.map.markLine.data.0.lineStyle.normal.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
)

series.map.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.map.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.map.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.map.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.map.markLine.data.0.value

标注值,可以不设。

series.map.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.map.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.map.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.map.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.map.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.map.markLine.lineStyle

标线的样式

series.map.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.map.markLine.lineStyle.emphasis.width

线宽。

series.map.markLine.lineStyle.emphasis.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
)

series.map.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.map.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markLine.lineStyle.normal.type

线的类型。

可选:

series.map.markLine.lineStyle.normal.width

线宽。

series.map.markLine.lineStyle.normal.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
)

series.map.markLine.label

标线的文本。

series.map.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markLine.label.emphasis.position

标签位置,可选:

series.map.markLine.label.emphasis.show

是否显示标签。

series.map.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markLine.label.normal.position

标签位置,可选:

series.map.markLine.label.normal.show

是否显示标签。

series.map.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.map.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.map.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.map.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.map.markPoint

图表标注。

series.map.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.map.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.map.markPoint.animationDurationUpdate

数据更新动画的时长。

series.map.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.map.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.map.markPoint.animationDuration

初始动画的时长。

series.map.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.map.markPoint.animation

是否开启动画,默认开启。

series.map.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.map.markPoint.itemStyle

标注的样式。

series.map.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.map.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.map.markPoint.itemStyle.emphasis.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
)

series.map.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.map.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.map.markPoint.itemStyle.normal.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
)

series.map.markPoint.label

标注的文本。

series.map.markPoint.label.emphasis.textStyle

标签的字体样式。

series.map.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.map.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.map.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.map.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.map.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markPoint.label.emphasis.position

标签的位置。

可选:

series.map.markPoint.label.emphasis.show

是否显示标签。

series.map.markPoint.label.normal.textStyle

标签的字体样式。

series.map.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.map.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.map.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.map.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.map.markPoint.label.normal.textStyle.color

文字的颜色。

series.map.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.map.markPoint.label.normal.position

标签的位置。

可选:

series.map.markPoint.label.normal.show

是否显示标签。

series.map.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.map.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.map.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.map.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.map.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.map.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:{}
}]

series.map.showLegendSymbol

在图例相应区域显示图例的颜色标识(系列标识的小圆点),存在 legend 组件时生效。

series.map.mapValueCalculation

多个拥有相同地图类型的系列会使用同一个地图展现,如果多个系列都在同一个区域有值,ECharts 会对这些值统计得到一个数据。这个配置项就是用于配置统计的方式,目前有:

series.map.layoutSize

地图的大小,见 layoutCenter。支持相对于屏幕宽高的百分比或者绝对的像素大小。

series.map.layoutCenter

layoutCenterlayoutSize 提供了除了 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 无效。

series.map.bottom

组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.map.right

组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.map.top

组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

series.map.left

组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

series.map.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.map.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.map.itemStyle

地图区域的多边形 图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.map.itemStyle.emphasis

高亮状态下的多边形样式。

series.map.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.map.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.map.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.map.itemStyle.emphasis.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
)

series.map.itemStyle.emphasis.areaColor

地图区域的颜色。

series.map.itemStyle.normal

普通状态下的多边形样式。

series.map.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.map.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.map.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.map.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.map.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.map.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.map.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.map.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.map.itemStyle.normal.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
)

series.map.itemStyle.normal.areaColor

地图区域的颜色。

series.map.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.map.label.emphasis.textStyle

高亮状态下的标签文本样式。

series.map.label.emphasis.textStyle.fontSize

文字的字体大小

series.map.label.emphasis.textStyle.fontFamily

文字的字体系列

series.map.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.map.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.map.label.emphasis.textStyle.color

文字的颜色。

series.map.label.emphasis.show

是否在高亮状态下显示标签。

series.map.label.normal.textStyle

普通状态下的标签文本样式。

series.map.label.normal.textStyle.fontSize

文字的字体大小

series.map.label.normal.textStyle.fontFamily

文字的字体系列

series.map.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.map.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.map.label.normal.textStyle.color

文字的颜色。

series.map.label.normal.show

是否在普通状态下显示标签。

series.map.selectedMode

选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'表示单选,或者'multiple'表示多选。

series.map.nameMap

自定义地区的名称映射,如:

{
    'China' : '中国'
}

series.map.scaleLimit

滚轮缩放的极限控制,通过min, max最小和最大的缩放值,默认的缩放为1

series.map.scaleLimit.max

最大的缩放值

series.map.scaleLimit.min

最小的缩放值

series.map.zoom

当前视角的缩放比例。

series.map.center

当前视角的中心点,用经纬度表示

例如:

center: [115.97, 29.71]

series.map.roam

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启

series.map.map

地图类型。

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

series.map.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.heatmap

热力图

热力图主要通过颜色去表现数值的大小,必须要配合 visualMap 组件使用。

可以应用在直角坐标系以及地理坐标系上,这两个坐标系上的表现形式相差很大,直角坐标系上必须要使用两个类目轴。

下面分别是直角坐标系和地理坐标系上应用的例子:

直角坐标系:

地理坐标系:

series.heatmap.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.heatmap.z

热力图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.heatmap.zlevel

热力图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.heatmap.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.heatmap.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.heatmap.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.heatmap.markArea.animationDurationUpdate

数据更新动画的时长。

series.heatmap.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.heatmap.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.heatmap.markArea.animationDuration

初始动画的时长。

series.heatmap.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.heatmap.markArea.animation

是否开启动画,默认开启。

series.heatmap.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标域',
            x: 100,
            y: 100
        }, {
            x: '90%',
            y: '10%'
        }
    ]
]

series.heatmap.markArea.data.1

标域右下角的数据

series.heatmap.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.heatmap.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.heatmap.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.heatmap.markArea.data.1.label.emphasis.show

是否显示标签。

series.heatmap.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.heatmap.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.heatmap.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.heatmap.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.heatmap.markArea.data.1.label.normal.position

标签的位置。

可选:

series.heatmap.markArea.data.1.label.normal.show

是否显示标签。

series.heatmap.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.heatmap.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markArea.data.1.itemStyle.emphasis.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
)

series.heatmap.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markArea.data.1.itemStyle.normal.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
)

series.heatmap.markArea.data.1.value

标域值,可以不设。

series.heatmap.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.heatmap.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.heatmap.markArea.data.0

标域左上角的数据

series.heatmap.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.heatmap.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.heatmap.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.heatmap.markArea.data.0.label.emphasis.show

是否显示标签。

series.heatmap.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.heatmap.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.heatmap.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.heatmap.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.heatmap.markArea.data.0.label.normal.position

标签的位置。

可选:

series.heatmap.markArea.data.0.label.normal.show

是否显示标签。

series.heatmap.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.heatmap.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markArea.data.0.itemStyle.emphasis.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
)

series.heatmap.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markArea.data.0.itemStyle.normal.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
)

series.heatmap.markArea.data.0.value

标域值,可以不设。

series.heatmap.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.heatmap.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.heatmap.markArea.itemStyle

该标域的样式。

series.heatmap.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markArea.itemStyle.emphasis.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
)

series.heatmap.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markArea.itemStyle.normal.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
)

series.heatmap.markArea.label

标域文本配置。

series.heatmap.markArea.label.emphasis.textStyle

标签的字体样式。

series.heatmap.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.heatmap.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.heatmap.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markArea.label.emphasis.textStyle.color

文字的颜色。

series.heatmap.markArea.label.emphasis.position

标签的位置。

可选:

series.heatmap.markArea.label.emphasis.show

是否显示标签。

series.heatmap.markArea.label.normal.textStyle

标签的字体样式。

series.heatmap.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.heatmap.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.heatmap.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markArea.label.normal.textStyle.color

文字的颜色。

series.heatmap.markArea.label.normal.position

标签的位置。

可选:

series.heatmap.markArea.label.normal.show

是否显示标签。

series.heatmap.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.heatmap.markLine

图表标线。

series.heatmap.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.heatmap.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.heatmap.markLine.animationDurationUpdate

数据更新动画的时长。

series.heatmap.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.heatmap.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.heatmap.markLine.animationDuration

初始动画的时长。

series.heatmap.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.heatmap.markLine.animation

是否开启动画,默认开启。

series.heatmap.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

series.heatmap.markLine.data.1

终点的数据。

series.heatmap.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.heatmap.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markLine.data.1.label.emphasis.position

标签位置,可选:

series.heatmap.markLine.data.1.label.emphasis.show

是否显示标签。

series.heatmap.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markLine.data.1.label.normal.position

标签位置,可选:

series.heatmap.markLine.data.1.label.normal.show

是否显示标签。

series.heatmap.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.heatmap.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.heatmap.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.heatmap.markLine.data.1.lineStyle.emphasis.width

线宽。

series.heatmap.markLine.data.1.lineStyle.emphasis.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
)

series.heatmap.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.heatmap.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.heatmap.markLine.data.1.lineStyle.normal.width

线宽。

series.heatmap.markLine.data.1.lineStyle.normal.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
)

series.heatmap.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.heatmap.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.heatmap.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.heatmap.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.heatmap.markLine.data.1.value

标注值,可以不设。

series.heatmap.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.heatmap.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.heatmap.markLine.data.0

起点的数据。

series.heatmap.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.heatmap.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markLine.data.0.label.emphasis.position

标签位置,可选:

series.heatmap.markLine.data.0.label.emphasis.show

是否显示标签。

series.heatmap.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markLine.data.0.label.normal.position

标签位置,可选:

series.heatmap.markLine.data.0.label.normal.show

是否显示标签。

series.heatmap.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.heatmap.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.heatmap.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.heatmap.markLine.data.0.lineStyle.emphasis.width

线宽。

series.heatmap.markLine.data.0.lineStyle.emphasis.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
)

series.heatmap.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.heatmap.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.heatmap.markLine.data.0.lineStyle.normal.width

线宽。

series.heatmap.markLine.data.0.lineStyle.normal.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
)

series.heatmap.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.heatmap.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.heatmap.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.heatmap.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.heatmap.markLine.data.0.value

标注值,可以不设。

series.heatmap.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.heatmap.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.heatmap.markLine.lineStyle

标线的样式

series.heatmap.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.heatmap.markLine.lineStyle.emphasis.width

线宽。

series.heatmap.markLine.lineStyle.emphasis.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
)

series.heatmap.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.heatmap.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markLine.lineStyle.normal.type

线的类型。

可选:

series.heatmap.markLine.lineStyle.normal.width

线宽。

series.heatmap.markLine.lineStyle.normal.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
)

series.heatmap.markLine.label

标线的文本。

series.heatmap.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markLine.label.emphasis.position

标签位置,可选:

series.heatmap.markLine.label.emphasis.show

是否显示标签。

series.heatmap.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markLine.label.normal.position

标签位置,可选:

series.heatmap.markLine.label.normal.show

是否显示标签。

series.heatmap.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.heatmap.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.heatmap.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.heatmap.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.heatmap.markPoint

图表标注。

series.heatmap.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.heatmap.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.heatmap.markPoint.animationDurationUpdate

数据更新动画的时长。

series.heatmap.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.heatmap.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.heatmap.markPoint.animationDuration

初始动画的时长。

series.heatmap.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.heatmap.markPoint.animation

是否开启动画,默认开启。

series.heatmap.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.heatmap.markPoint.itemStyle

标注的样式。

series.heatmap.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markPoint.itemStyle.emphasis.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
)

series.heatmap.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.heatmap.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.heatmap.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.heatmap.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.heatmap.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.heatmap.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.heatmap.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.heatmap.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.heatmap.markPoint.itemStyle.normal.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
)

series.heatmap.markPoint.label

标注的文本。

series.heatmap.markPoint.label.emphasis.textStyle

标签的字体样式。

series.heatmap.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.heatmap.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.heatmap.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.heatmap.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markPoint.label.emphasis.position

标签的位置。

可选:

series.heatmap.markPoint.label.emphasis.show

是否显示标签。

series.heatmap.markPoint.label.normal.textStyle

标签的字体样式。

series.heatmap.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.heatmap.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.heatmap.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.heatmap.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.heatmap.markPoint.label.normal.textStyle.color

文字的颜色。

series.heatmap.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.heatmap.markPoint.label.normal.position

标签的位置。

可选:

series.heatmap.markPoint.label.normal.show

是否显示标签。

series.heatmap.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.heatmap.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.heatmap.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.heatmap.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.heatmap.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.heatmap.data

系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况

  1. 在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:

     [12, 34, 56, 10, 23]
    
  2. 在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 xy 或者极坐标系上的 radiusangle,如下:

     [[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
    

    每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。

  3. 在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:

     [[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),可用-表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。

series.heatmap.maxOpacity

最大的透明度,在地理坐标系(coordinateSystem: 'geo')上有效。

series.heatmap.minOpacity

最小的透明度,在地理坐标系(coordinateSystem: 'geo')上有效。

series.heatmap.blurSize

每个点模糊的大小,在地理坐标系(coordinateSystem: 'geo')上有效。

series.heatmap.geoIndex

使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。

series.heatmap.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.heatmap.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.heatmap.coordinateSystem

该系列使用的坐标系,可选:

series.heatmap.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.candlestick

Candlestick 即我们常说的 K线图

在 ECharts3 中,同时支持 'candlestick''k'这两种 'series.type''k' 会被自动转为 'candlestick')。

示例如下:


关于『涨』『跌』的颜色:

不同国家或地区对于 K线图 的颜色定义不一样,可能是『红涨绿跌』或『红涨蓝跌』(如大陆、台湾、日本、韩国等),可能是『绿涨红跌』(如西方国家、香港、新加坡等)。K线图也不一定要用红蓝、红绿来表示涨跌,也可以是『有色/无色』等表示方法。

默认配置项,采用的是『红涨蓝跌』。如果想更改这个颜色配置,在这些配置项中更改即可:



series.candlestick.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.candlestick.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.candlestick.animationDuration

初始动画的时长。

series.candlestick.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.candlestick.z

K线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.candlestick.zlevel

K线图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.candlestick.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.candlestick.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.candlestick.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.candlestick.markArea.animationDurationUpdate

数据更新动画的时长。

series.candlestick.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.candlestick.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.candlestick.markArea.animationDuration

初始动画的时长。

series.candlestick.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.candlestick.markArea.animation

是否开启动画,默认开启。

series.candlestick.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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%'
        }
    ]
]

series.candlestick.markArea.data.1

标域右下角的数据

series.candlestick.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.candlestick.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.candlestick.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.candlestick.markArea.data.1.label.emphasis.show

是否显示标签。

series.candlestick.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.candlestick.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.candlestick.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.candlestick.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.candlestick.markArea.data.1.label.normal.position

标签的位置。

可选:

series.candlestick.markArea.data.1.label.normal.show

是否显示标签。

series.candlestick.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.candlestick.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markArea.data.1.itemStyle.emphasis.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
)

series.candlestick.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markArea.data.1.itemStyle.normal.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
)

series.candlestick.markArea.data.1.value

标域值,可以不设。

series.candlestick.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.candlestick.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.candlestick.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.candlestick.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.candlestick.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.candlestick.markArea.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.candlestick.markArea.data.0

标域左上角的数据

series.candlestick.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.candlestick.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.candlestick.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.candlestick.markArea.data.0.label.emphasis.show

是否显示标签。

series.candlestick.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.candlestick.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.candlestick.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.candlestick.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.candlestick.markArea.data.0.label.normal.position

标签的位置。

可选:

series.candlestick.markArea.data.0.label.normal.show

是否显示标签。

series.candlestick.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.candlestick.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markArea.data.0.itemStyle.emphasis.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
)

series.candlestick.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markArea.data.0.itemStyle.normal.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
)

series.candlestick.markArea.data.0.value

标域值,可以不设。

series.candlestick.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.candlestick.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.candlestick.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.candlestick.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.candlestick.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.candlestick.markArea.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.candlestick.markArea.itemStyle

该标域的样式。

series.candlestick.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markArea.itemStyle.emphasis.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
)

series.candlestick.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markArea.itemStyle.normal.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
)

series.candlestick.markArea.label

标域文本配置。

series.candlestick.markArea.label.emphasis.textStyle

标签的字体样式。

series.candlestick.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.candlestick.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.candlestick.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markArea.label.emphasis.textStyle.color

文字的颜色。

series.candlestick.markArea.label.emphasis.position

标签的位置。

可选:

series.candlestick.markArea.label.emphasis.show

是否显示标签。

series.candlestick.markArea.label.normal.textStyle

标签的字体样式。

series.candlestick.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.candlestick.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.candlestick.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markArea.label.normal.textStyle.color

文字的颜色。

series.candlestick.markArea.label.normal.position

标签的位置。

可选:

series.candlestick.markArea.label.normal.show

是否显示标签。

series.candlestick.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.candlestick.markLine

图表标线。

series.candlestick.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.candlestick.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.candlestick.markLine.animationDurationUpdate

数据更新动画的时长。

series.candlestick.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.candlestick.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.candlestick.markLine.animationDuration

初始动画的时长。

series.candlestick.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.candlestick.markLine.animation

是否开启动画,默认开启。

series.candlestick.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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
        }
    ]
]

series.candlestick.markLine.data.1

终点的数据。

series.candlestick.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.candlestick.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markLine.data.1.label.emphasis.position

标签位置,可选:

series.candlestick.markLine.data.1.label.emphasis.show

是否显示标签。

series.candlestick.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markLine.data.1.label.normal.position

标签位置,可选:

series.candlestick.markLine.data.1.label.normal.show

是否显示标签。

series.candlestick.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.candlestick.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.candlestick.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.candlestick.markLine.data.1.lineStyle.emphasis.width

线宽。

series.candlestick.markLine.data.1.lineStyle.emphasis.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
)

series.candlestick.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.candlestick.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.candlestick.markLine.data.1.lineStyle.normal.width

线宽。

series.candlestick.markLine.data.1.lineStyle.normal.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
)

series.candlestick.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.candlestick.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.candlestick.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.candlestick.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.candlestick.markLine.data.1.value

标注值,可以不设。

series.candlestick.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.candlestick.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.candlestick.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.candlestick.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.candlestick.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.candlestick.markLine.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.candlestick.markLine.data.0

起点的数据。

series.candlestick.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.candlestick.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markLine.data.0.label.emphasis.position

标签位置,可选:

series.candlestick.markLine.data.0.label.emphasis.show

是否显示标签。

series.candlestick.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markLine.data.0.label.normal.position

标签位置,可选:

series.candlestick.markLine.data.0.label.normal.show

是否显示标签。

series.candlestick.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.candlestick.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.candlestick.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.candlestick.markLine.data.0.lineStyle.emphasis.width

线宽。

series.candlestick.markLine.data.0.lineStyle.emphasis.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
)

series.candlestick.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.candlestick.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.candlestick.markLine.data.0.lineStyle.normal.width

线宽。

series.candlestick.markLine.data.0.lineStyle.normal.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
)

series.candlestick.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.candlestick.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.candlestick.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.candlestick.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.candlestick.markLine.data.0.value

标注值,可以不设。

series.candlestick.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.candlestick.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.candlestick.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.candlestick.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.candlestick.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.candlestick.markLine.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.candlestick.markLine.lineStyle

标线的样式

series.candlestick.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.candlestick.markLine.lineStyle.emphasis.width

线宽。

series.candlestick.markLine.lineStyle.emphasis.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
)

series.candlestick.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.candlestick.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markLine.lineStyle.normal.type

线的类型。

可选:

series.candlestick.markLine.lineStyle.normal.width

线宽。

series.candlestick.markLine.lineStyle.normal.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
)

series.candlestick.markLine.label

标线的文本。

series.candlestick.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markLine.label.emphasis.position

标签位置,可选:

series.candlestick.markLine.label.emphasis.show

是否显示标签。

series.candlestick.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markLine.label.normal.position

标签位置,可选:

series.candlestick.markLine.label.normal.show

是否显示标签。

series.candlestick.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.candlestick.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.candlestick.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.candlestick.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.candlestick.markPoint

图表标注。

series.candlestick.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.candlestick.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.candlestick.markPoint.animationDurationUpdate

数据更新动画的时长。

series.candlestick.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.candlestick.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.candlestick.markPoint.animationDuration

初始动画的时长。

series.candlestick.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.candlestick.markPoint.animation

是否开启动画,默认开启。

series.candlestick.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.candlestick.markPoint.itemStyle

标注的样式。

series.candlestick.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markPoint.itemStyle.emphasis.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
)

series.candlestick.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.candlestick.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.candlestick.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.candlestick.markPoint.itemStyle.normal.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
)

series.candlestick.markPoint.label

标注的文本。

series.candlestick.markPoint.label.emphasis.textStyle

标签的字体样式。

series.candlestick.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.candlestick.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.candlestick.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.candlestick.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markPoint.label.emphasis.position

标签的位置。

可选:

series.candlestick.markPoint.label.emphasis.show

是否显示标签。

series.candlestick.markPoint.label.normal.textStyle

标签的字体样式。

series.candlestick.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.candlestick.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.candlestick.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.candlestick.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.candlestick.markPoint.label.normal.textStyle.color

文字的颜色。

series.candlestick.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.candlestick.markPoint.label.normal.position

标签的位置。

可选:

series.candlestick.markPoint.label.normal.show

是否显示标签。

series.candlestick.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.candlestick.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.candlestick.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.candlestick.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.candlestick.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.candlestick.data

数据格式是如下的二维数组。

[
    [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] (即:[开盘值, 收盘值, 最低值, 最高值])

series.candlestick.itemStyle

candlestick 图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.candlestick.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.candlestick.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.itemStyle.emphasis.borderWidth

candlestick 描边线宽。为 0 时无描边。

series.candlestick.itemStyle.emphasis.borderColor0

阴线 图形的描边颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  offset: 0, color: 'red' // 0% 处的颜色
}, {
  offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
  imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)

series.candlestick.itemStyle.emphasis.borderColor

阳线 图形的描边颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  offset: 0, color: 'red' // 0% 处的颜色
}, {
  offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
  imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)

series.candlestick.itemStyle.emphasis.color0

阴线 图形的颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  offset: 0, color: 'red' // 0% 处的颜色
}, {
  offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
  imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)

series.candlestick.itemStyle.emphasis.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
)

series.candlestick.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.candlestick.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.candlestick.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.candlestick.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.candlestick.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.candlestick.itemStyle.normal.borderWidth

candlestick 描边线宽。为 0 时无描边。

series.candlestick.itemStyle.normal.borderColor0

阴线 图形的描边颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  offset: 0, color: 'red' // 0% 处的颜色
}, {
  offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
  imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)

series.candlestick.itemStyle.normal.borderColor

阳线 图形的描边颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  offset: 0, color: 'red' // 0% 处的颜色
}, {
  offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
  imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)

series.candlestick.itemStyle.normal.color0

阴线 图形的颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果最后一个参数传 `true`,则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  offset: 0, color: 'red' // 0% 处的颜色
}, {
  offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
  imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)

series.candlestick.itemStyle.normal.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
)

series.candlestick.layout

布局方式,可选值:

默认值根据当前坐标系状况决定:如果 category 轴为横轴,则水平排布;否则竖直排布;如果没有 category 轴则水平排布。

series.candlestick.hoverAnimation

是否开启 hover 在 box 上的动画效果。

series.candlestick.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.candlestick.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.candlestick.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.candlestick.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.candlestick.coordinateSystem

该系列使用的坐标系,可选:

series.boxplot

Boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』。使用者知道概念,不需介绍。

示例如下:


也支持多个 series 在同一个坐标系中,参见 例子



series.boxplot.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.boxplot.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.boxplot.animationDuration

初始动画的时长。

series.boxplot.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.boxplot.z

盒须图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.boxplot.zlevel

盒须图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.boxplot.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.boxplot.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.boxplot.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.boxplot.markArea.animationDurationUpdate

数据更新动画的时长。

series.boxplot.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.boxplot.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.boxplot.markArea.animationDuration

初始动画的时长。

series.boxplot.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.boxplot.markArea.animation

是否开启动画,默认开启。

series.boxplot.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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%'
        }
    ]
]

series.boxplot.markArea.data.1

标域右下角的数据

series.boxplot.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.boxplot.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.boxplot.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.boxplot.markArea.data.1.label.emphasis.show

是否显示标签。

series.boxplot.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.boxplot.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.boxplot.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.boxplot.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.boxplot.markArea.data.1.label.normal.position

标签的位置。

可选:

series.boxplot.markArea.data.1.label.normal.show

是否显示标签。

series.boxplot.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.boxplot.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markArea.data.1.itemStyle.emphasis.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
)

series.boxplot.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markArea.data.1.itemStyle.normal.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
)

series.boxplot.markArea.data.1.value

标域值,可以不设。

series.boxplot.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.boxplot.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.boxplot.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.boxplot.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.boxplot.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.boxplot.markArea.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.boxplot.markArea.data.0

标域左上角的数据

series.boxplot.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.boxplot.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.boxplot.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.boxplot.markArea.data.0.label.emphasis.show

是否显示标签。

series.boxplot.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.boxplot.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.boxplot.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.boxplot.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.boxplot.markArea.data.0.label.normal.position

标签的位置。

可选:

series.boxplot.markArea.data.0.label.normal.show

是否显示标签。

series.boxplot.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.boxplot.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markArea.data.0.itemStyle.emphasis.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
)

series.boxplot.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markArea.data.0.itemStyle.normal.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
)

series.boxplot.markArea.data.0.value

标域值,可以不设。

series.boxplot.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.boxplot.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.boxplot.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.boxplot.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.boxplot.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.boxplot.markArea.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.boxplot.markArea.itemStyle

该标域的样式。

series.boxplot.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markArea.itemStyle.emphasis.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
)

series.boxplot.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markArea.itemStyle.normal.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
)

series.boxplot.markArea.label

标域文本配置。

series.boxplot.markArea.label.emphasis.textStyle

标签的字体样式。

series.boxplot.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.boxplot.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.boxplot.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markArea.label.emphasis.textStyle.color

文字的颜色。

series.boxplot.markArea.label.emphasis.position

标签的位置。

可选:

series.boxplot.markArea.label.emphasis.show

是否显示标签。

series.boxplot.markArea.label.normal.textStyle

标签的字体样式。

series.boxplot.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.boxplot.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.boxplot.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markArea.label.normal.textStyle.color

文字的颜色。

series.boxplot.markArea.label.normal.position

标签的位置。

可选:

series.boxplot.markArea.label.normal.show

是否显示标签。

series.boxplot.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.boxplot.markLine

图表标线。

series.boxplot.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.boxplot.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.boxplot.markLine.animationDurationUpdate

数据更新动画的时长。

series.boxplot.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.boxplot.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.boxplot.markLine.animationDuration

初始动画的时长。

series.boxplot.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.boxplot.markLine.animation

是否开启动画,默认开启。

series.boxplot.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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
        }
    ]
]

series.boxplot.markLine.data.1

终点的数据。

series.boxplot.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.boxplot.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markLine.data.1.label.emphasis.position

标签位置,可选:

series.boxplot.markLine.data.1.label.emphasis.show

是否显示标签。

series.boxplot.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markLine.data.1.label.normal.position

标签位置,可选:

series.boxplot.markLine.data.1.label.normal.show

是否显示标签。

series.boxplot.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.boxplot.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.boxplot.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.boxplot.markLine.data.1.lineStyle.emphasis.width

线宽。

series.boxplot.markLine.data.1.lineStyle.emphasis.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
)

series.boxplot.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.boxplot.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.boxplot.markLine.data.1.lineStyle.normal.width

线宽。

series.boxplot.markLine.data.1.lineStyle.normal.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
)

series.boxplot.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.boxplot.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.boxplot.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.boxplot.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.boxplot.markLine.data.1.value

标注值,可以不设。

series.boxplot.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.boxplot.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.boxplot.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.boxplot.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.boxplot.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.boxplot.markLine.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.boxplot.markLine.data.0

起点的数据。

series.boxplot.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.boxplot.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markLine.data.0.label.emphasis.position

标签位置,可选:

series.boxplot.markLine.data.0.label.emphasis.show

是否显示标签。

series.boxplot.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markLine.data.0.label.normal.position

标签位置,可选:

series.boxplot.markLine.data.0.label.normal.show

是否显示标签。

series.boxplot.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.boxplot.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.boxplot.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.boxplot.markLine.data.0.lineStyle.emphasis.width

线宽。

series.boxplot.markLine.data.0.lineStyle.emphasis.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
)

series.boxplot.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.boxplot.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.boxplot.markLine.data.0.lineStyle.normal.width

线宽。

series.boxplot.markLine.data.0.lineStyle.normal.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
)

series.boxplot.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.boxplot.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.boxplot.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.boxplot.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.boxplot.markLine.data.0.value

标注值,可以不设。

series.boxplot.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.boxplot.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.boxplot.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.boxplot.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.boxplot.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.boxplot.markLine.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.boxplot.markLine.lineStyle

标线的样式

series.boxplot.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.boxplot.markLine.lineStyle.emphasis.width

线宽。

series.boxplot.markLine.lineStyle.emphasis.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
)

series.boxplot.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.boxplot.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markLine.lineStyle.normal.type

线的类型。

可选:

series.boxplot.markLine.lineStyle.normal.width

线宽。

series.boxplot.markLine.lineStyle.normal.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
)

series.boxplot.markLine.label

标线的文本。

series.boxplot.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markLine.label.emphasis.position

标签位置,可选:

series.boxplot.markLine.label.emphasis.show

是否显示标签。

series.boxplot.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markLine.label.normal.position

标签位置,可选:

series.boxplot.markLine.label.normal.show

是否显示标签。

series.boxplot.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.boxplot.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.boxplot.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.boxplot.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.boxplot.markPoint

图表标注。

series.boxplot.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.boxplot.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.boxplot.markPoint.animationDurationUpdate

数据更新动画的时长。

series.boxplot.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.boxplot.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.boxplot.markPoint.animationDuration

初始动画的时长。

series.boxplot.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.boxplot.markPoint.animation

是否开启动画,默认开启。

series.boxplot.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.boxplot.markPoint.itemStyle

标注的样式。

series.boxplot.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markPoint.itemStyle.emphasis.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
)

series.boxplot.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.boxplot.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.boxplot.markPoint.itemStyle.normal.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
)

series.boxplot.markPoint.label

标注的文本。

series.boxplot.markPoint.label.emphasis.textStyle

标签的字体样式。

series.boxplot.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.boxplot.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.boxplot.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.boxplot.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markPoint.label.emphasis.position

标签的位置。

可选:

series.boxplot.markPoint.label.emphasis.show

是否显示标签。

series.boxplot.markPoint.label.normal.textStyle

标签的字体样式。

series.boxplot.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.boxplot.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.boxplot.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.boxplot.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.boxplot.markPoint.label.normal.textStyle.color

文字的颜色。

series.boxplot.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.boxplot.markPoint.label.normal.position

标签的位置。

可选:

series.boxplot.markPoint.label.normal.show

是否显示标签。

series.boxplot.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.boxplot.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.boxplot.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.boxplot.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.boxplot.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.boxplot.data

数据格式是如下的二维数组。

[
    [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 来进行简单的数据统计。

series.boxplot.itemStyle

boxplot 图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.boxplot.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.boxplot.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.itemStyle.emphasis.borderWidth

boxplot描边线宽。为 0 时无描边。

series.boxplot.itemStyle.emphasis.borderColor

boxplot图形的描边颜色。支持的格式同 color

series.boxplot.itemStyle.emphasis.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
)

series.boxplot.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.boxplot.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.boxplot.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.boxplot.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.boxplot.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.boxplot.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.boxplot.itemStyle.normal.borderWidth

boxplot描边线宽。为 0 时无描边。

series.boxplot.itemStyle.normal.borderColor

boxplot图形的描边颜色。支持的格式同 color

series.boxplot.itemStyle.normal.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
)

series.boxplot.boxWidth

box 的宽度的上下限。数组的意思是:[min, max]

可以是绝对数值,如 [7, 50],也可以是百分比,如 ['40%', '90%']。百分比的意思是,最大可能宽度(bandWidth)的百分之多少。

series.boxplot.layout

布局方式,可选值:

默认值根据当前坐标系状况决定:如果 category 轴为横轴,则水平排布;否则竖直排布;如果没有 category 轴则水平排布。

series.boxplot.hoverAnimation

是否开启 hover 在 box 上的动画效果。

series.boxplot.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.boxplot.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.boxplot.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.boxplot.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.boxplot.coordinateSystem

该系列使用的坐标系,可选:

series.treemap

Treemap 是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点。

示例:


视觉映射:

treemap 首先是把数值映射到『面积』这种视觉元素上。

此外,也支持对数据的其他维度进行视觉映射,例如映射到颜色、颜色明暗度上。

关于视觉设置,详见 series-treemap.levels


下钻(drill down):

drill down 功能即点击后才展示子层级。 设置了 leafDepth 后,下钻(drill down)功能开启。

如下是 drill down 的例子:




注:treemap 的配置项 和 ECharts2 相比有一些变化,一些不太成熟的配置方式不再支持或不再兼容:



series.treemap.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.treemap.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.treemap.animationDuration

初始动画的时长。

series.treemap.data

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,可以不写
    },
    ...
]

series.treemap.breadcrumb

面包屑,能够显示当前节点的路径。

series.treemap.breadcrumb.itemStyle

图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontSize

文字的字体大小

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontFamily

文字的字体系列

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.treemap.breadcrumb.itemStyle.emphasis.textStyle.color

文字的颜色。

series.treemap.breadcrumb.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.treemap.breadcrumb.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.treemap.breadcrumb.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.treemap.breadcrumb.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.treemap.breadcrumb.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.treemap.breadcrumb.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.treemap.breadcrumb.itemStyle.emphasis.borderWidth

boxplot描边线宽。为 0 时无描边。

series.treemap.breadcrumb.itemStyle.emphasis.borderColor

boxplot图形的描边颜色。支持的格式同 color

series.treemap.breadcrumb.itemStyle.emphasis.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
)

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontSize

文字的字体大小

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontFamily

文字的字体系列

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.treemap.breadcrumb.itemStyle.normal.textStyle.fontStyle

文字字体的风格

可选:

series.treemap.breadcrumb.itemStyle.normal.textStyle.color

文字的颜色。

series.treemap.breadcrumb.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.treemap.breadcrumb.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.treemap.breadcrumb.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.treemap.breadcrumb.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.treemap.breadcrumb.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.treemap.breadcrumb.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.treemap.breadcrumb.itemStyle.normal.borderWidth

boxplot描边线宽。为 0 时无描边。

series.treemap.breadcrumb.itemStyle.normal.borderColor

boxplot图形的描边颜色。支持的格式同 color

series.treemap.breadcrumb.itemStyle.normal.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
)

series.treemap.breadcrumb.emptyItemWidth

当面包屑没有内容时候,设个最小宽度。

series.treemap.breadcrumb.height

面包屑的高度。

series.treemap.breadcrumb.bottom

asdf 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.treemap.breadcrumb.right

asdf 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.treemap.breadcrumb.top

asdf 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

series.treemap.breadcrumb.left

asdf 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

series.treemap.breadcrumb.show

是否显示面包屑。

series.treemap.itemStyle


注:treemap中 itemStyle 属性可能在多处地方存在:


series.treemap.itemStyle.emphasis.color

矩形的颜色。默认从全局调色盘 option.color 获取颜色。

series.treemap.itemStyle.normal.borderColorSaturation

矩形边框的颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。

注意:

如果设置此属性,则 borderColor 的设置无效,而是:取当前节点计算出的颜色(比如从父节点遗传而来),在此颜色值上设置 borderColorSaturation 得到最终颜色。这种方式,能够做出『不同区块有不同色调的矩形间隔线』的效果,能够便于区分层级。


矩形边框(border)/缝隙(gap)设置如何避免混淆

如果统一用一种颜色设置矩形的缝隙(gap),那么当不同层级的矩形同时展示时可能会出现混淆。

参见 例子,注意其中红色的区块中的子矩形其实是更深层级,和其他用白色缝隙区分的矩形不是在一个层级。所以,红色区块中矩形的分割线的颜色,我们在 borderColorSaturation 中设置为『加了饱和度变化的红颜色』,以示区别。

series.treemap.itemStyle.normal.borderColor

矩形边框 和 矩形间隔(gap)的颜色。

series.treemap.itemStyle.normal.gapWidth

矩形内部子矩形(子节点)的间隔距离。

series.treemap.itemStyle.normal.borderWidth

矩形边框线宽。为 0 时无边框。而矩形的内部子矩形(子节点)的间隔距离是由 gapWidth 指定的。

series.treemap.itemStyle.normal.colorSaturation

矩形颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。

series.treemap.itemStyle.normal.colorAlpha

矩形颜色的透明度。取值范围是 0 ~ 1 之间的浮点数。

series.treemap.itemStyle.normal.color

矩形的颜色。默认从全局调色盘 option.color 获取颜色。

series.treemap.label

label 描述了每个矩形中,文本标签的样式。


注:treemap中 label 属性可能在多处地方存在:


series.treemap.label.emphasis.textStyle.baseline

文字竖直对齐方式,可选值 'middle''right'left'

series.treemap.label.emphasis.textStyle.align

文字水平对齐方式,可选值 'center''right'left'

series.treemap.label.emphasis.textStyle.fontSize

文字的字体大小

series.treemap.label.emphasis.textStyle.fontFamily

文字的字体系列

series.treemap.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.treemap.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.treemap.label.emphasis.textStyle.color

文字的颜色。

series.treemap.label.emphasis.textStyle.ellipsis

当文字超出矩形边界的时候,是否超出部分替换为省略号。

series.treemap.label.emphasis.position

标签的位置。

可选:

series.treemap.label.emphasis.show

是否显示文本标签。

series.treemap.label.normal.textStyle.baseline

文字竖直对齐方式,可选值 'middle''right'left'

series.treemap.label.normal.textStyle.align

文字水平对齐方式,可选值 'center''right'left'

series.treemap.label.normal.textStyle.fontSize

文字的字体大小

series.treemap.label.normal.textStyle.fontFamily

文字的字体系列

series.treemap.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.treemap.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.treemap.label.normal.textStyle.color

文字的颜色。

series.treemap.label.normal.textStyle.ellipsis

当文字超出矩形边界的时候,是否超出部分替换为省略号。

series.treemap.label.normal.position

标签的位置。

可选:

series.treemap.label.normal.show

是否显示文本标签。

series.treemap.childrenVisibleMin

如果某个节点的矩形面积,小于这个数值(单位:px平方),则不显示这个节点的子节点。

这能够在矩形面积不足够大时候,隐藏节点的细节。当用户用鼠标缩放节点时,如果面积大于此阈值,又会显示子节点。

关于视觉设置,详见 series-treemap.levels


注:treemap中 childrenVisibleMin 属性可能在多处地方存在:

series.treemap.visibleMin

如果某个节点的矩形的面积,小于这个数值(单位:px平方),这个节点就不显示。

如果不加这个限制,很小的节点会影响显示效果。

关于视觉设置,详见 series-treemap.levels


注:treemap中 visibleMin 属性可能在多处地方存在:

series.treemap.colorMappingBy

表示同一层级节点,在颜色列表中(参见 color 属性)选择时,按照什么来选择。可选值:

将节点的值(即 series-treemap.data.value)映射到颜色列表中。

这样得到的颜色,反应了节点值的大小。

可以使用 visualDimension 属性来设置,用 data 中哪个纬度的值来映射。

将节点的 index(序号)映射到颜色列表中。即同一层级中,第一个节点取颜色列表中第一个颜色,第二个节点取第二个。

这样得到的颜色,便于区分相邻节点。

将节点的 id(即 series-treemap.data.id)映射到颜色列表中。id 是用户指定的,这样能够使得,在treemap 通过 setOption 变化数值时,同一 id 映射到同一颜色,保持一致性。参见 例子

关于视觉设置,详见 series-treemap.levels


注:treemap中 colorMappingBy 属性可能在多处地方存在:

series.treemap.colorSaturation

本系列默认的 颜色饱和度 选取范围。数值范围 0 ~ 1。

例如, colorSaturation 可以是 [0.3, 1].

关于视觉设置,详见 series-treemap.levels


注:treemap中 colorSaturation 属性可能在多处地方存在:

series.treemap.colorAlpha

本系列默认的 颜色透明度 选取范围。数值范围 0 ~ 1。

例如, colorAlpha 可以是 [0.3, 1].

关于视觉设置,详见 series-treemap.levels


注:treemap中 colorAlpha 属性可能在多处地方存在:

series.treemap.visualMax

当前层级的最大 value 值。如果不设置则自动统计。

手动指定 visualMinvisualMax ,即手动控制了 visual mapping 的值域(当 colorMappingBy'value' 时有意义)。

series.treemap.visualMin

当前层级的最小 value 值。如果不设置则自动统计。

手动指定 visualMinvisualMax ,即手动控制了 visual mapping 的值域(当 colorMappingBy'value' 时有意义)。

series.treemap.visualDimension

treemap 中支持对数据其他维度进行视觉映射。

首先,treemap的数据格式(参见 series-treemap.data)中,每个节点的 value 都可以是数组。数组每项是一个『维度』(dimension)。visualDimension 指定了额外的『视觉映射』使用的是数组的哪一项。默认为第 0 项。

关于视觉设置,详见 series-treemap.levels


注:treemap中 visualDimension 属性可能在多处地方存在:

series.treemap.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.treemap.silent.children

子节点,递归定义,格式同 series-treemap.data

series.treemap.silent.target

意义同 html <a> 标签中的 target,参见 series-treemap.data.link。可选值为:'blank''self'

series.treemap.silent.link

点击此节点可跳转的超链接。须 series-treemap.nodeClick 值为 'link' 时才生效。

参见 series-treemap.data.target

series.treemap.levels

多层配置

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 是通过这样的规则来支持这种配置的:每个层级计算用户配置的 colorcolorSaturationborderColorcolorSaturation等视觉信息(在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 的解释

series.treemap.zoomToNodeRatio

点击某个节点,会自动放大那个节点到合适的比例(节点占可视区域的面积比例),这个配置项就是这个比例。

series.treemap.nodeClick

点击节点后的行为。可取值为:

series.treemap.roam

是否开启拖拽漫游(移动和缩放)。可取值有:

series.treemap.leafDepth

设置了 leafDepth 后,下钻(drill down)功能开启。drill down 功能即点击后才展示子层级。

leafDepth 表示『展示几层』,层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点。

例如,leafDepth 设置为 1,表示展示一层节点。

默认没有开启 drill down(即 leafDepthnullundefined)。

drill down 的例子:

series.treemap.squareRatio

期望矩形长宽比率。布局计算时会尽量向这个比率靠近。

默认为黄金比:0.5 * (1 + Math.sqrt(5))

series.treemap.height

treemap 组件的高度。

series.treemap.width

treemap 组件的宽度。

series.treemap.bottom

treemap 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.treemap.right

treemap 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series.treemap.top

treemap 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

series.treemap.left

treemap 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

series.treemap.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.treemap.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.radar

雷达图

雷达图主要用于表现多变量的数据,例如球员的各个属性分析。依赖 radar 组件。

下面是 AQI 数据用雷达图表现的示例。

series.radar.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.radar.animationEasingUpdate

数据更新动画的缓动效果。

series.radar.animationDurationUpdate

数据更新动画的时长。

series.radar.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.radar.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.radar.animationDuration

初始动画的时长。

series.radar.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.radar.animation

是否开启动画,默认开启。

series.radar.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.radar.z

雷达图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.radar.zlevel

雷达图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.radar.data

雷达图的数据是多变量(维度)的,如下示例:

data : [
    {
        value : [4300, 10000, 28000, 35000, 50000, 19000],
        name : '预算分配(Allocated Budget)'
    },
    {
        value : [5000, 14000, 28000, 31000, 42000, 21000],
        name : '实际开销(Actual Spending)'
    }
]

其中的value项数组是具体的数据,每个值跟 radar.indicator 一一对应。

series.radar.areaStyle

区域填充样式。

series.radar.areaStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.radar.areaStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.radar.areaStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.radar.areaStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.radar.areaStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.areaStyle.emphasis.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
)

series.radar.areaStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.radar.areaStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.radar.areaStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.radar.areaStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.radar.areaStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.areaStyle.normal.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
)

series.radar.lineStyle

线条样式。

series.radar.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.radar.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.radar.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.radar.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.radar.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.lineStyle.emphasis.type

线的类型。

可选:

series.radar.lineStyle.emphasis.width

线宽。

series.radar.lineStyle.emphasis.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
)

series.radar.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.radar.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.radar.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.radar.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.radar.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.lineStyle.normal.type

线的类型。

可选:

series.radar.lineStyle.normal.width

线宽。

series.radar.lineStyle.normal.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
)

series.radar.itemStyle

折线拐点标志的样式。

series.radar.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.radar.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.radar.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.radar.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.radar.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.radar.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.radar.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.radar.itemStyle.emphasis.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
)

series.radar.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.radar.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.radar.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.radar.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.radar.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.radar.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.radar.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.radar.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.radar.itemStyle.normal.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 等各个参数。

series.radar.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.radar.label.emphasis.textStyle

标签的字体样式。

series.radar.label.emphasis.textStyle.fontSize

文字的字体大小

series.radar.label.emphasis.textStyle.fontFamily

文字的字体系列

series.radar.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.radar.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.radar.label.emphasis.textStyle.color

文字的颜色。

series.radar.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.radar.label.emphasis.position

标签的位置。

可选:

series.radar.label.emphasis.show

是否显示标签。

series.radar.label.normal.textStyle

标签的字体样式。

series.radar.label.normal.textStyle.fontSize

文字的字体大小

series.radar.label.normal.textStyle.fontFamily

文字的字体系列

series.radar.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.radar.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.radar.label.normal.textStyle.color

文字的颜色。

series.radar.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.radar.label.normal.position

标签的位置。

可选:

series.radar.label.normal.show

是否显示标签。

series.radar.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.radar.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.radar.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.radar.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.radar.radarIndex

雷达图所使用的 radar 组件的 index。

series.radar.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.effectScatter

带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。

Tip: ECharts 2.x 中在地图上通过 markPoint 实现地图特效在 ECharts 3 中建议通过地理坐标系上的 effectScatter 实现。

如下示例:

series.effectScatter.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.effectScatter.animationEasingUpdate

数据更新动画的缓动效果。

series.effectScatter.animationDurationUpdate

数据更新动画的时长。

series.effectScatter.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.effectScatter.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.effectScatter.animationDuration

初始动画的时长。

series.effectScatter.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.effectScatter.animation

是否开启动画,默认开启。

series.effectScatter.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.effectScatter.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.effectScatter.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.effectScatter.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.effectScatter.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.effectScatter.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.effectScatter.markArea.animationDurationUpdate

数据更新动画的时长。

series.effectScatter.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.effectScatter.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.effectScatter.markArea.animationDuration

初始动画的时长。

series.effectScatter.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.effectScatter.markArea.animation

是否开启动画,默认开启。

series.effectScatter.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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%'
        }
    ]
]

series.effectScatter.markArea.data.1

标域右下角的数据

series.effectScatter.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.effectScatter.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.effectScatter.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.effectScatter.markArea.data.1.label.emphasis.show

是否显示标签。

series.effectScatter.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.effectScatter.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.effectScatter.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.effectScatter.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.effectScatter.markArea.data.1.label.normal.position

标签的位置。

可选:

series.effectScatter.markArea.data.1.label.normal.show

是否显示标签。

series.effectScatter.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.effectScatter.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markArea.data.1.itemStyle.emphasis.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
)

series.effectScatter.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markArea.data.1.itemStyle.normal.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
)

series.effectScatter.markArea.data.1.value

标域值,可以不设。

series.effectScatter.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.effectScatter.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.effectScatter.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.effectScatter.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.effectScatter.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.effectScatter.markArea.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.effectScatter.markArea.data.0

标域左上角的数据

series.effectScatter.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.effectScatter.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.effectScatter.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.effectScatter.markArea.data.0.label.emphasis.show

是否显示标签。

series.effectScatter.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.effectScatter.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.effectScatter.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.effectScatter.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.effectScatter.markArea.data.0.label.normal.position

标签的位置。

可选:

series.effectScatter.markArea.data.0.label.normal.show

是否显示标签。

series.effectScatter.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.effectScatter.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markArea.data.0.itemStyle.emphasis.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
)

series.effectScatter.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markArea.data.0.itemStyle.normal.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
)

series.effectScatter.markArea.data.0.value

标域值,可以不设。

series.effectScatter.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.effectScatter.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.effectScatter.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.effectScatter.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.effectScatter.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.effectScatter.markArea.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.effectScatter.markArea.itemStyle

该标域的样式。

series.effectScatter.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markArea.itemStyle.emphasis.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
)

series.effectScatter.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markArea.itemStyle.normal.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
)

series.effectScatter.markArea.label

标域文本配置。

series.effectScatter.markArea.label.emphasis.textStyle

标签的字体样式。

series.effectScatter.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.effectScatter.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.effectScatter.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markArea.label.emphasis.textStyle.color

文字的颜色。

series.effectScatter.markArea.label.emphasis.position

标签的位置。

可选:

series.effectScatter.markArea.label.emphasis.show

是否显示标签。

series.effectScatter.markArea.label.normal.textStyle

标签的字体样式。

series.effectScatter.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.effectScatter.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.effectScatter.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markArea.label.normal.textStyle.color

文字的颜色。

series.effectScatter.markArea.label.normal.position

标签的位置。

可选:

series.effectScatter.markArea.label.normal.show

是否显示标签。

series.effectScatter.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.effectScatter.markLine

图表标线。

series.effectScatter.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.effectScatter.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.effectScatter.markLine.animationDurationUpdate

数据更新动画的时长。

series.effectScatter.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.effectScatter.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.effectScatter.markLine.animationDuration

初始动画的时长。

series.effectScatter.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.effectScatter.markLine.animation

是否开启动画,默认开启。

series.effectScatter.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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
        }
    ]
]

series.effectScatter.markLine.data.1

终点的数据。

series.effectScatter.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.effectScatter.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markLine.data.1.label.emphasis.position

标签位置,可选:

series.effectScatter.markLine.data.1.label.emphasis.show

是否显示标签。

series.effectScatter.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markLine.data.1.label.normal.position

标签位置,可选:

series.effectScatter.markLine.data.1.label.normal.show

是否显示标签。

series.effectScatter.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.effectScatter.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.effectScatter.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.effectScatter.markLine.data.1.lineStyle.emphasis.width

线宽。

series.effectScatter.markLine.data.1.lineStyle.emphasis.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
)

series.effectScatter.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.effectScatter.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.effectScatter.markLine.data.1.lineStyle.normal.width

线宽。

series.effectScatter.markLine.data.1.lineStyle.normal.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
)

series.effectScatter.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.effectScatter.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.effectScatter.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.effectScatter.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.effectScatter.markLine.data.1.value

标注值,可以不设。

series.effectScatter.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.effectScatter.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.effectScatter.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.effectScatter.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.effectScatter.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.effectScatter.markLine.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.effectScatter.markLine.data.0

起点的数据。

series.effectScatter.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.effectScatter.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markLine.data.0.label.emphasis.position

标签位置,可选:

series.effectScatter.markLine.data.0.label.emphasis.show

是否显示标签。

series.effectScatter.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markLine.data.0.label.normal.position

标签位置,可选:

series.effectScatter.markLine.data.0.label.normal.show

是否显示标签。

series.effectScatter.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.effectScatter.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.effectScatter.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.effectScatter.markLine.data.0.lineStyle.emphasis.width

线宽。

series.effectScatter.markLine.data.0.lineStyle.emphasis.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
)

series.effectScatter.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.effectScatter.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.effectScatter.markLine.data.0.lineStyle.normal.width

线宽。

series.effectScatter.markLine.data.0.lineStyle.normal.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
)

series.effectScatter.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.effectScatter.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.effectScatter.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.effectScatter.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.effectScatter.markLine.data.0.value

标注值,可以不设。

series.effectScatter.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.effectScatter.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.effectScatter.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.effectScatter.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.effectScatter.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.effectScatter.markLine.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.effectScatter.markLine.lineStyle

标线的样式

series.effectScatter.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.effectScatter.markLine.lineStyle.emphasis.width

线宽。

series.effectScatter.markLine.lineStyle.emphasis.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
)

series.effectScatter.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.effectScatter.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markLine.lineStyle.normal.type

线的类型。

可选:

series.effectScatter.markLine.lineStyle.normal.width

线宽。

series.effectScatter.markLine.lineStyle.normal.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
)

series.effectScatter.markLine.label

标线的文本。

series.effectScatter.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markLine.label.emphasis.position

标签位置,可选:

series.effectScatter.markLine.label.emphasis.show

是否显示标签。

series.effectScatter.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markLine.label.normal.position

标签位置,可选:

series.effectScatter.markLine.label.normal.show

是否显示标签。

series.effectScatter.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.effectScatter.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.effectScatter.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.effectScatter.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.effectScatter.markPoint

图表标注。

series.effectScatter.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.effectScatter.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.effectScatter.markPoint.animationDurationUpdate

数据更新动画的时长。

series.effectScatter.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.effectScatter.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.effectScatter.markPoint.animationDuration

初始动画的时长。

series.effectScatter.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.effectScatter.markPoint.animation

是否开启动画,默认开启。

series.effectScatter.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.effectScatter.markPoint.itemStyle

标注的样式。

series.effectScatter.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markPoint.itemStyle.emphasis.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
)

series.effectScatter.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.markPoint.itemStyle.normal.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
)

series.effectScatter.markPoint.label

标注的文本。

series.effectScatter.markPoint.label.emphasis.textStyle

标签的字体样式。

series.effectScatter.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.effectScatter.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.effectScatter.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.effectScatter.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markPoint.label.emphasis.position

标签的位置。

可选:

series.effectScatter.markPoint.label.emphasis.show

是否显示标签。

series.effectScatter.markPoint.label.normal.textStyle

标签的字体样式。

series.effectScatter.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.effectScatter.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.effectScatter.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.markPoint.label.normal.textStyle.color

文字的颜色。

series.effectScatter.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.markPoint.label.normal.position

标签的位置。

可选:

series.effectScatter.markPoint.label.normal.show

是否显示标签。

series.effectScatter.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.effectScatter.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.effectScatter.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.effectScatter.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.effectScatter.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.effectScatter.data

系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况

  1. 在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:

     [12, 34, 56, 10, 23]
    
  2. 在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 xy 或者极坐标系上的 radiusangle,如下:

     [[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
    

    每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。

  3. 在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:

     [[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),可用-表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。

series.effectScatter.itemStyle

图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.effectScatter.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.itemStyle.emphasis.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
)

series.effectScatter.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.effectScatter.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.effectScatter.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.effectScatter.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.effectScatter.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.effectScatter.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.effectScatter.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.effectScatter.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.effectScatter.itemStyle.normal.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 等各个参数。

series.effectScatter.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.effectScatter.label.emphasis.textStyle

标签的字体样式。

series.effectScatter.label.emphasis.textStyle.fontSize

文字的字体大小

series.effectScatter.label.emphasis.textStyle.fontFamily

文字的字体系列

series.effectScatter.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.label.emphasis.textStyle.color

文字的颜色。

series.effectScatter.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.label.emphasis.position

标签的位置。

可选:

series.effectScatter.label.emphasis.show

是否显示标签。

series.effectScatter.label.normal.textStyle

标签的字体样式。

series.effectScatter.label.normal.textStyle.fontSize

文字的字体大小

series.effectScatter.label.normal.textStyle.fontFamily

文字的字体系列

series.effectScatter.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.effectScatter.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.effectScatter.label.normal.textStyle.color

文字的颜色。

series.effectScatter.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.effectScatter.label.normal.position

标签的位置。

可选:

series.effectScatter.label.normal.show

是否显示标签。

series.effectScatter.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.effectScatter.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.effectScatter.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.effectScatter.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.effectScatter.geoIndex

使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。

series.effectScatter.polarIndex

使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。

series.effectScatter.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.effectScatter.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.effectScatter.coordinateSystem

该系列使用的坐标系,可选:

series.effectScatter.rippleEffect

涟漪特效相关配置。

series.effectScatter.rippleEffect.brushType

波纹的绘制方式,可选 'stroke''fill'

series.effectScatter.rippleEffect.scale

动画中波纹的最大缩放比例。

series.effectScatter.rippleEffect.period

动画的时间。

series.effectScatter.showEffectOn

配置何时显示特效。

可选:

series.effectScatter.effectType

特效类型,目前只支持涟漪特效'ripple'

series.effectScatter.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.effectScatter.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.scatter

散点(气泡)图。直角坐标系上的散点图可以用来展现数据的 xy 之间的关系,如果数据项有多个维度,其它维度的值可以通过不同大小的 symbol 展现成气泡图,也可以用颜色来表现。这些可以配合 visualMap 组件完成。

可以应用在直角坐标系极坐标系地理坐标系上。

Tip: ECharts 2.x 中在地图上通过 markPoint 标记大量数据点方式在 ECharts 3 中建议通过地理坐标系上的 scatter 实现。下面示例就是在中国地图上用散点图展现了空气质量的分布。并且用 visualMap 组件将 PM2.5 映射到了颜色。

series.scatter.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.scatter.animationEasingUpdate

数据更新动画的缓动效果。

series.scatter.animationDurationUpdate

数据更新动画的时长。

series.scatter.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.scatter.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.scatter.animationDuration

初始动画的时长。

series.scatter.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.scatter.animation

是否开启动画,默认开启。

series.scatter.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.scatter.z

散点图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.scatter.zlevel

散点图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.scatter.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.scatter.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.scatter.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.scatter.markArea.animationDurationUpdate

数据更新动画的时长。

series.scatter.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.scatter.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.scatter.markArea.animationDuration

初始动画的时长。

series.scatter.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.scatter.markArea.animation

是否开启动画,默认开启。

series.scatter.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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%'
        }
    ]
]

series.scatter.markArea.data.1

标域右下角的数据

series.scatter.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.scatter.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.scatter.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.scatter.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.scatter.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.scatter.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.scatter.markArea.data.1.label.emphasis.show

是否显示标签。

series.scatter.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.scatter.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.scatter.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.scatter.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.scatter.markArea.data.1.label.normal.position

标签的位置。

可选:

series.scatter.markArea.data.1.label.normal.show

是否显示标签。

series.scatter.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.scatter.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markArea.data.1.itemStyle.emphasis.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
)

series.scatter.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markArea.data.1.itemStyle.normal.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
)

series.scatter.markArea.data.1.value

标域值,可以不设。

series.scatter.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.scatter.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.scatter.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.scatter.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.scatter.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.scatter.markArea.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.scatter.markArea.data.0

标域左上角的数据

series.scatter.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.scatter.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.scatter.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.scatter.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.scatter.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.scatter.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.scatter.markArea.data.0.label.emphasis.show

是否显示标签。

series.scatter.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.scatter.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.scatter.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.scatter.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.scatter.markArea.data.0.label.normal.position

标签的位置。

可选:

series.scatter.markArea.data.0.label.normal.show

是否显示标签。

series.scatter.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.scatter.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markArea.data.0.itemStyle.emphasis.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
)

series.scatter.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markArea.data.0.itemStyle.normal.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
)

series.scatter.markArea.data.0.value

标域值,可以不设。

series.scatter.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.scatter.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.scatter.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.scatter.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.scatter.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.scatter.markArea.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.scatter.markArea.itemStyle

该标域的样式。

series.scatter.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markArea.itemStyle.emphasis.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
)

series.scatter.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markArea.itemStyle.normal.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
)

series.scatter.markArea.label

标域文本配置。

series.scatter.markArea.label.emphasis.textStyle

标签的字体样式。

series.scatter.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.scatter.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.scatter.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markArea.label.emphasis.textStyle.color

文字的颜色。

series.scatter.markArea.label.emphasis.position

标签的位置。

可选:

series.scatter.markArea.label.emphasis.show

是否显示标签。

series.scatter.markArea.label.normal.textStyle

标签的字体样式。

series.scatter.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.scatter.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.scatter.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markArea.label.normal.textStyle.color

文字的颜色。

series.scatter.markArea.label.normal.position

标签的位置。

可选:

series.scatter.markArea.label.normal.show

是否显示标签。

series.scatter.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.scatter.markLine

图表标线。

series.scatter.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.scatter.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.scatter.markLine.animationDurationUpdate

数据更新动画的时长。

series.scatter.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.scatter.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.scatter.markLine.animationDuration

初始动画的时长。

series.scatter.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.scatter.markLine.animation

是否开启动画,默认开启。

series.scatter.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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
        }
    ]
]

series.scatter.markLine.data.1

终点的数据。

series.scatter.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.scatter.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markLine.data.1.label.emphasis.position

标签位置,可选:

series.scatter.markLine.data.1.label.emphasis.show

是否显示标签。

series.scatter.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markLine.data.1.label.normal.position

标签位置,可选:

series.scatter.markLine.data.1.label.normal.show

是否显示标签。

series.scatter.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.scatter.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.scatter.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.scatter.markLine.data.1.lineStyle.emphasis.width

线宽。

series.scatter.markLine.data.1.lineStyle.emphasis.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
)

series.scatter.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.scatter.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.scatter.markLine.data.1.lineStyle.normal.width

线宽。

series.scatter.markLine.data.1.lineStyle.normal.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
)

series.scatter.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.scatter.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.scatter.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.scatter.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.scatter.markLine.data.1.value

标注值,可以不设。

series.scatter.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.scatter.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.scatter.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.scatter.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.scatter.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.scatter.markLine.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.scatter.markLine.data.0

起点的数据。

series.scatter.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.scatter.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markLine.data.0.label.emphasis.position

标签位置,可选:

series.scatter.markLine.data.0.label.emphasis.show

是否显示标签。

series.scatter.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markLine.data.0.label.normal.position

标签位置,可选:

series.scatter.markLine.data.0.label.normal.show

是否显示标签。

series.scatter.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.scatter.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.scatter.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.scatter.markLine.data.0.lineStyle.emphasis.width

线宽。

series.scatter.markLine.data.0.lineStyle.emphasis.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
)

series.scatter.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.scatter.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.scatter.markLine.data.0.lineStyle.normal.width

线宽。

series.scatter.markLine.data.0.lineStyle.normal.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
)

series.scatter.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.scatter.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.scatter.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.scatter.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.scatter.markLine.data.0.value

标注值,可以不设。

series.scatter.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.scatter.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.scatter.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.scatter.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.scatter.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.scatter.markLine.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.scatter.markLine.lineStyle

标线的样式

series.scatter.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.scatter.markLine.lineStyle.emphasis.width

线宽。

series.scatter.markLine.lineStyle.emphasis.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
)

series.scatter.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.scatter.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markLine.lineStyle.normal.type

线的类型。

可选:

series.scatter.markLine.lineStyle.normal.width

线宽。

series.scatter.markLine.lineStyle.normal.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
)

series.scatter.markLine.label

标线的文本。

series.scatter.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markLine.label.emphasis.position

标签位置,可选:

series.scatter.markLine.label.emphasis.show

是否显示标签。

series.scatter.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markLine.label.normal.position

标签位置,可选:

series.scatter.markLine.label.normal.show

是否显示标签。

series.scatter.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.scatter.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.scatter.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.scatter.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.scatter.markPoint

图表标注。

series.scatter.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.scatter.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.scatter.markPoint.animationDurationUpdate

数据更新动画的时长。

series.scatter.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.scatter.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.scatter.markPoint.animationDuration

初始动画的时长。

series.scatter.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.scatter.markPoint.animation

是否开启动画,默认开启。

series.scatter.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.scatter.markPoint.itemStyle

标注的样式。

series.scatter.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markPoint.itemStyle.emphasis.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
)

series.scatter.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.scatter.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.markPoint.itemStyle.normal.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
)

series.scatter.markPoint.label

标注的文本。

series.scatter.markPoint.label.emphasis.textStyle

标签的字体样式。

series.scatter.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.scatter.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.scatter.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.scatter.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markPoint.label.emphasis.position

标签的位置。

可选:

series.scatter.markPoint.label.emphasis.show

是否显示标签。

series.scatter.markPoint.label.normal.textStyle

标签的字体样式。

series.scatter.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.scatter.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.scatter.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.markPoint.label.normal.textStyle.color

文字的颜色。

series.scatter.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.markPoint.label.normal.position

标签的位置。

可选:

series.scatter.markPoint.label.normal.show

是否显示标签。

series.scatter.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.scatter.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.scatter.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.scatter.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.scatter.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.scatter.data

系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况

  1. 在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:

     [12, 34, 56, 10, 23]
    
  2. 在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 xy 或者极坐标系上的 radiusangle,如下:

     [[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
    

    每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。

  3. 在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:

     [[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),可用-表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。

series.scatter.itemStyle

图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.scatter.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.scatter.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.scatter.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.itemStyle.emphasis.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
)

series.scatter.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.scatter.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.scatter.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.scatter.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.scatter.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.scatter.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.scatter.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.scatter.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.scatter.itemStyle.normal.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 等各个参数。

series.scatter.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.scatter.label.emphasis.textStyle

标签的字体样式。

series.scatter.label.emphasis.textStyle.fontSize

文字的字体大小

series.scatter.label.emphasis.textStyle.fontFamily

文字的字体系列

series.scatter.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.label.emphasis.textStyle.color

文字的颜色。

series.scatter.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.label.emphasis.position

标签的位置。

可选:

series.scatter.label.emphasis.show

是否显示标签。

series.scatter.label.normal.textStyle

标签的字体样式。

series.scatter.label.normal.textStyle.fontSize

文字的字体大小

series.scatter.label.normal.textStyle.fontFamily

文字的字体系列

series.scatter.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.scatter.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.scatter.label.normal.textStyle.color

文字的颜色。

series.scatter.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.scatter.label.normal.position

标签的位置。

可选:

series.scatter.label.normal.show

是否显示标签。

series.scatter.largeThreshold

开启绘制优化的阈值。

series.scatter.large

是否开启大规模散点图的优化,在数据图形特别多的时候(>=5k)可以开启。

开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。

缺点:优化后不能自定义设置单个数据项的样式。

series.scatter.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.scatter.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.scatter.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.scatter.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.scatter.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.scatter.hoverAnimation

是否开启鼠标 hover 的提示动画效果。

series.scatter.geoIndex

使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。

series.scatter.polarIndex

使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。

series.scatter.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.scatter.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.scatter.coordinateSystem

该系列使用的坐标系,可选:

series.scatter.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.pie

饼图

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。

Tip: 饼图更适合表现数据相对于总数的百分比等关系。如果只是表示不同类目数据间的大小,建议使用 柱状图,人们对于微小的弧度差别相比于微小的长度差别更不敏感,或者也可以通过配置 roseType 显示成南丁格尔图,通过半径大小区分数据的大小。

下面是自定义南丁格尔图的示例:

series.pie.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.pie.animationEasingUpdate

数据更新动画的缓动效果。

series.pie.animationDurationUpdate

数据更新动画的时长。

series.pie.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.pie.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.pie.animationDuration

初始动画的时长。

series.pie.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.pie.animation

是否开启动画,默认开启。

series.pie.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.pie.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.pie.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.pie.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.pie.markArea.animationDurationUpdate

数据更新动画的时长。

series.pie.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.pie.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.pie.markArea.animationDuration

初始动画的时长。

series.pie.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.pie.markArea.animation

是否开启动画,默认开启。

series.pie.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标域',
            x: 100,
            y: 100
        }, {
            x: '90%',
            y: '10%'
        }
    ]
]

series.pie.markArea.data.1

标域右下角的数据

series.pie.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.pie.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.pie.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.pie.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.pie.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.pie.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.pie.markArea.data.1.label.emphasis.show

是否显示标签。

series.pie.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.pie.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.pie.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.pie.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.pie.markArea.data.1.label.normal.position

标签的位置。

可选:

series.pie.markArea.data.1.label.normal.show

是否显示标签。

series.pie.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.pie.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.pie.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markArea.data.1.itemStyle.emphasis.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
)

series.pie.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.pie.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markArea.data.1.itemStyle.normal.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
)

series.pie.markArea.data.1.value

标域值,可以不设。

series.pie.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.pie.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.pie.markArea.data.0

标域左上角的数据

series.pie.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.pie.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.pie.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.pie.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.pie.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.pie.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.pie.markArea.data.0.label.emphasis.show

是否显示标签。

series.pie.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.pie.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.pie.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.pie.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.pie.markArea.data.0.label.normal.position

标签的位置。

可选:

series.pie.markArea.data.0.label.normal.show

是否显示标签。

series.pie.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.pie.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.pie.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markArea.data.0.itemStyle.emphasis.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
)

series.pie.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.pie.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markArea.data.0.itemStyle.normal.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
)

series.pie.markArea.data.0.value

标域值,可以不设。

series.pie.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.pie.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.pie.markArea.itemStyle

该标域的样式。

series.pie.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.pie.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markArea.itemStyle.emphasis.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
)

series.pie.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.pie.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markArea.itemStyle.normal.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
)

series.pie.markArea.label

标域文本配置。

series.pie.markArea.label.emphasis.textStyle

标签的字体样式。

series.pie.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.pie.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.pie.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markArea.label.emphasis.textStyle.color

文字的颜色。

series.pie.markArea.label.emphasis.position

标签的位置。

可选:

series.pie.markArea.label.emphasis.show

是否显示标签。

series.pie.markArea.label.normal.textStyle

标签的字体样式。

series.pie.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.pie.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.pie.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markArea.label.normal.textStyle.color

文字的颜色。

series.pie.markArea.label.normal.position

标签的位置。

可选:

series.pie.markArea.label.normal.show

是否显示标签。

series.pie.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.pie.markLine

图表标线。

series.pie.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.pie.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.pie.markLine.animationDurationUpdate

数据更新动画的时长。

series.pie.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.pie.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.pie.markLine.animationDuration

初始动画的时长。

series.pie.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.pie.markLine.animation

是否开启动画,默认开启。

series.pie.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

series.pie.markLine.data.1

终点的数据。

series.pie.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.pie.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markLine.data.1.label.emphasis.position

标签位置,可选:

series.pie.markLine.data.1.label.emphasis.show

是否显示标签。

series.pie.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markLine.data.1.label.normal.position

标签位置,可选:

series.pie.markLine.data.1.label.normal.show

是否显示标签。

series.pie.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.pie.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.pie.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.pie.markLine.data.1.lineStyle.emphasis.width

线宽。

series.pie.markLine.data.1.lineStyle.emphasis.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
)

series.pie.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.pie.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.pie.markLine.data.1.lineStyle.normal.width

线宽。

series.pie.markLine.data.1.lineStyle.normal.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
)

series.pie.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.pie.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.pie.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.pie.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.pie.markLine.data.1.value

标注值,可以不设。

series.pie.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.pie.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.pie.markLine.data.0

起点的数据。

series.pie.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.pie.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markLine.data.0.label.emphasis.position

标签位置,可选:

series.pie.markLine.data.0.label.emphasis.show

是否显示标签。

series.pie.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markLine.data.0.label.normal.position

标签位置,可选:

series.pie.markLine.data.0.label.normal.show

是否显示标签。

series.pie.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.pie.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.pie.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.pie.markLine.data.0.lineStyle.emphasis.width

线宽。

series.pie.markLine.data.0.lineStyle.emphasis.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
)

series.pie.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.pie.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.pie.markLine.data.0.lineStyle.normal.width

线宽。

series.pie.markLine.data.0.lineStyle.normal.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
)

series.pie.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.pie.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.pie.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.pie.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.pie.markLine.data.0.value

标注值,可以不设。

series.pie.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.pie.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.pie.markLine.lineStyle

标线的样式

series.pie.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.pie.markLine.lineStyle.emphasis.width

线宽。

series.pie.markLine.lineStyle.emphasis.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
)

series.pie.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.pie.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markLine.lineStyle.normal.type

线的类型。

可选:

series.pie.markLine.lineStyle.normal.width

线宽。

series.pie.markLine.lineStyle.normal.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
)

series.pie.markLine.label

标线的文本。

series.pie.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markLine.label.emphasis.position

标签位置,可选:

series.pie.markLine.label.emphasis.show

是否显示标签。

series.pie.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markLine.label.normal.position

标签位置,可选:

series.pie.markLine.label.normal.show

是否显示标签。

series.pie.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.pie.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.pie.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.pie.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.pie.markPoint

图表标注。

series.pie.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.pie.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.pie.markPoint.animationDurationUpdate

数据更新动画的时长。

series.pie.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.pie.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.pie.markPoint.animationDuration

初始动画的时长。

series.pie.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.pie.markPoint.animation

是否开启动画,默认开启。

series.pie.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.pie.markPoint.itemStyle

标注的样式。

series.pie.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.pie.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markPoint.itemStyle.emphasis.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
)

series.pie.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.pie.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.pie.markPoint.itemStyle.normal.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
)

series.pie.markPoint.label

标注的文本。

series.pie.markPoint.label.emphasis.textStyle

标签的字体样式。

series.pie.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.pie.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.pie.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.pie.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markPoint.label.emphasis.position

标签的位置。

可选:

series.pie.markPoint.label.emphasis.show

是否显示标签。

series.pie.markPoint.label.normal.textStyle

标签的字体样式。

series.pie.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.pie.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.pie.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.pie.markPoint.label.normal.textStyle.color

文字的颜色。

series.pie.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.markPoint.label.normal.position

标签的位置。

可选:

series.pie.markPoint.label.normal.show

是否显示标签。

series.pie.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.pie.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.pie.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.pie.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.pie.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.pie.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:{}
}]

series.pie.radius

饼图的半径,数组的第一项是内半径,第二项是外半径。

支持设置成百分比,相对于容器高宽中较小的一项的一半。

可以将内半径设大显示成圆环图(Donut chart)。

series.pie.center

饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。

支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。

使用示例:

// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

series.pie.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.pie.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.pie.itemStyle

图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series.pie.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.pie.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.pie.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.pie.itemStyle.emphasis.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
)

series.pie.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.pie.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.pie.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.pie.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.pie.itemStyle.normal.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 等各个参数。

series.pie.labelLine

标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。

series.pie.labelLine.emphasis

高亮状态下视觉引导线的样式。

series.pie.labelLine.emphasis.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.labelLine.emphasis.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.labelLine.emphasis.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.labelLine.emphasis.lineStyle.shadowColor

阴影颜色。支持的格式同color

series.pie.labelLine.emphasis.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.labelLine.emphasis.lineStyle.type

线的类型。

可选:

series.pie.labelLine.emphasis.lineStyle.width

线宽。

series.pie.labelLine.emphasis.lineStyle.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
)

series.pie.labelLine.emphasis.show

是否显示视觉引导线。

series.pie.labelLine.normal

普通状态下视觉引导线的样式。

series.pie.labelLine.normal.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.pie.labelLine.normal.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

series.pie.labelLine.normal.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

series.pie.labelLine.normal.lineStyle.shadowColor

阴影颜色。支持的格式同color

series.pie.labelLine.normal.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.pie.labelLine.normal.lineStyle.type

线的类型。

可选:

series.pie.labelLine.normal.lineStyle.width

线宽。

series.pie.labelLine.normal.lineStyle.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
)

series.pie.labelLine.normal.smooth

是否平滑视觉引导线,默认不平滑,可以设置成 true 平滑显示,也可以设置为 0 到 1 的值,表示平滑程度。

series.pie.labelLine.normal.length2

视觉引导项第二段的长度。

series.pie.labelLine.normal.length

视觉引导线第一段的长度。

series.pie.labelLine.normal.show

是否显示视觉引导线。

series.pie.label

饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.pie.label.emphasis.textStyle

标签的字体样式。

series.pie.label.emphasis.textStyle.fontSize

文字的字体大小

series.pie.label.emphasis.textStyle.fontFamily

文字的字体系列

series.pie.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.pie.label.emphasis.textStyle.color

文字的颜色。

series.pie.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.label.normal.textStyle

标签的字体样式。

series.pie.label.normal.textStyle.fontSize

文字的字体大小

series.pie.label.normal.textStyle.fontFamily

文字的字体系列

series.pie.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.pie.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.pie.label.normal.textStyle.color

文字的颜色。

series.pie.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.pie.label.normal.position

标签的位置。

可选:

series.pie.avoidLabelOverlap

是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。

如果不需要开启该策略,例如圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false

series.pie.roseType

是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:

series.pie.minAngle

最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互。

series.pie.startAngle

起始角度,支持范围[0, 360]。

series.pie.clockwise

饼图的扇区是否是顺时针排布。

series.pie.selectedOffset

选中扇区的偏移距离。

series.pie.selectedMode

选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single''multiple',分别表示单选还是多选。

series.pie.hoverAnimation

是否开启 hover 在扇区上的放大动画效果。

series.pie.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.pie.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.bar

柱状/条形图

柱状/条形图 通过 柱形的高度/条形的宽度 来表现数据的大小,用于有至少一个类目轴或时间轴的直角坐标系上。

series.bar.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.bar.animationEasingUpdate

数据更新动画的缓动效果。

series.bar.animationDurationUpdate

数据更新动画的时长。

series.bar.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.bar.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.bar.animationDuration

初始动画的时长。

series.bar.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.bar.animation

是否开启动画,默认开启。

series.bar.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.bar.z

柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.bar.zlevel

柱状图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.bar.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.bar.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.bar.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.bar.markArea.animationDurationUpdate

数据更新动画的时长。

series.bar.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.bar.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.bar.markArea.animationDuration

初始动画的时长。

series.bar.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.bar.markArea.animation

是否开启动画,默认开启。

series.bar.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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%'
        }
    ]
]

series.bar.markArea.data.1

标域右下角的数据

series.bar.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.bar.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.bar.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.bar.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.bar.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.bar.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.bar.markArea.data.1.label.emphasis.show

是否显示标签。

series.bar.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.bar.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.bar.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.bar.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.bar.markArea.data.1.label.normal.position

标签的位置。

可选:

series.bar.markArea.data.1.label.normal.show

是否显示标签。

series.bar.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.bar.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.bar.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markArea.data.1.itemStyle.emphasis.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
)

series.bar.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.bar.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markArea.data.1.itemStyle.normal.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
)

series.bar.markArea.data.1.value

标域值,可以不设。

series.bar.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.bar.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.bar.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.bar.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.bar.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.bar.markArea.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.bar.markArea.data.0

标域左上角的数据

series.bar.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.bar.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.bar.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.bar.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.bar.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.bar.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.bar.markArea.data.0.label.emphasis.show

是否显示标签。

series.bar.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.bar.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.bar.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.bar.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.bar.markArea.data.0.label.normal.position

标签的位置。

可选:

series.bar.markArea.data.0.label.normal.show

是否显示标签。

series.bar.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.bar.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.bar.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markArea.data.0.itemStyle.emphasis.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
)

series.bar.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.bar.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markArea.data.0.itemStyle.normal.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
)

series.bar.markArea.data.0.value

标域值,可以不设。

series.bar.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.bar.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.bar.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.bar.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.bar.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.bar.markArea.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.bar.markArea.itemStyle

该标域的样式。

series.bar.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.bar.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markArea.itemStyle.emphasis.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
)

series.bar.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.bar.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markArea.itemStyle.normal.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
)

series.bar.markArea.label

标域文本配置。

series.bar.markArea.label.emphasis.textStyle

标签的字体样式。

series.bar.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.bar.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.bar.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markArea.label.emphasis.textStyle.color

文字的颜色。

series.bar.markArea.label.emphasis.position

标签的位置。

可选:

series.bar.markArea.label.emphasis.show

是否显示标签。

series.bar.markArea.label.normal.textStyle

标签的字体样式。

series.bar.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.bar.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.bar.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markArea.label.normal.textStyle.color

文字的颜色。

series.bar.markArea.label.normal.position

标签的位置。

可选:

series.bar.markArea.label.normal.show

是否显示标签。

series.bar.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.bar.markLine

图表标线。

series.bar.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.bar.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.bar.markLine.animationDurationUpdate

数据更新动画的时长。

series.bar.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.bar.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.bar.markLine.animationDuration

初始动画的时长。

series.bar.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.bar.markLine.animation

是否开启动画,默认开启。

series.bar.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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
        }
    ]
]

series.bar.markLine.data.1

终点的数据。

series.bar.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.bar.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markLine.data.1.label.emphasis.position

标签位置,可选:

series.bar.markLine.data.1.label.emphasis.show

是否显示标签。

series.bar.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markLine.data.1.label.normal.position

标签位置,可选:

series.bar.markLine.data.1.label.normal.show

是否显示标签。

series.bar.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.bar.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.bar.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.bar.markLine.data.1.lineStyle.emphasis.width

线宽。

series.bar.markLine.data.1.lineStyle.emphasis.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
)

series.bar.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.bar.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.bar.markLine.data.1.lineStyle.normal.width

线宽。

series.bar.markLine.data.1.lineStyle.normal.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
)

series.bar.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.bar.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.bar.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.bar.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.bar.markLine.data.1.value

标注值,可以不设。

series.bar.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.bar.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.bar.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.bar.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.bar.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.bar.markLine.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.bar.markLine.data.0

起点的数据。

series.bar.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.bar.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markLine.data.0.label.emphasis.position

标签位置,可选:

series.bar.markLine.data.0.label.emphasis.show

是否显示标签。

series.bar.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markLine.data.0.label.normal.position

标签位置,可选:

series.bar.markLine.data.0.label.normal.show

是否显示标签。

series.bar.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.bar.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.bar.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.bar.markLine.data.0.lineStyle.emphasis.width

线宽。

series.bar.markLine.data.0.lineStyle.emphasis.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
)

series.bar.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.bar.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.bar.markLine.data.0.lineStyle.normal.width

线宽。

series.bar.markLine.data.0.lineStyle.normal.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
)

series.bar.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.bar.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.bar.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.bar.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.bar.markLine.data.0.value

标注值,可以不设。

series.bar.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.bar.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.bar.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.bar.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.bar.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.bar.markLine.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.bar.markLine.lineStyle

标线的样式

series.bar.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.bar.markLine.lineStyle.emphasis.width

线宽。

series.bar.markLine.lineStyle.emphasis.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
)

series.bar.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.bar.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markLine.lineStyle.normal.type

线的类型。

可选:

series.bar.markLine.lineStyle.normal.width

线宽。

series.bar.markLine.lineStyle.normal.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
)

series.bar.markLine.label

标线的文本。

series.bar.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markLine.label.emphasis.position

标签位置,可选:

series.bar.markLine.label.emphasis.show

是否显示标签。

series.bar.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markLine.label.normal.position

标签位置,可选:

series.bar.markLine.label.normal.show

是否显示标签。

series.bar.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.bar.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.bar.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.bar.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.bar.markPoint

图表标注。

series.bar.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.bar.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.bar.markPoint.animationDurationUpdate

数据更新动画的时长。

series.bar.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.bar.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.bar.markPoint.animationDuration

初始动画的时长。

series.bar.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.bar.markPoint.animation

是否开启动画,默认开启。

series.bar.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.bar.markPoint.itemStyle

标注的样式。

series.bar.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.bar.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markPoint.itemStyle.emphasis.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
)

series.bar.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.bar.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.bar.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.bar.markPoint.itemStyle.normal.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
)

series.bar.markPoint.label

标注的文本。

series.bar.markPoint.label.emphasis.textStyle

标签的字体样式。

series.bar.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.bar.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.bar.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.bar.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markPoint.label.emphasis.position

标签的位置。

可选:

series.bar.markPoint.label.emphasis.show

是否显示标签。

series.bar.markPoint.label.normal.textStyle

标签的字体样式。

series.bar.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.bar.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.bar.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.bar.markPoint.label.normal.textStyle.color

文字的颜色。

series.bar.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.markPoint.label.normal.position

标签的位置。

可选:

series.bar.markPoint.label.normal.show

是否显示标签。

series.bar.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.bar.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.bar.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.bar.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.bar.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.bar.data

系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况

  1. 在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:

     [12, 34, 56, 10, 23]
    
  2. 在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 xy 或者极坐标系上的 radiusangle,如下:

     [[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
    

    每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。

  3. 在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:

     [[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),可用-表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。

series.bar.barCategoryGap

类目间柱形距离,默认为类目间距的20%,可设固定值

series.bar.barGap

柱间距离,默认为柱形宽度的30%,可设固定值

series.bar.barMinHeight

柱条最小高度,可用于防止某数据项的值过小而影响交互。

series.bar.barMaxWidth

柱条的最大宽度,不设时自适应。支持设置成相对于类目宽度的百分比。

series.bar.barWidth

柱条的宽度,不设时自适应。支持设置成相对于类目宽度的百分比。

series.bar.stack

数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。

series.bar.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.bar.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'dashed', 'dotted'

series.bar.itemStyle.emphasis.borderWidth

柱条的描边宽度,默认不描边。

series.bar.itemStyle.emphasis.borderColor

柱条的描边颜色。

series.bar.itemStyle.emphasis.color

柱条的颜色。

series.bar.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.bar.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.bar.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.bar.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.bar.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.bar.itemStyle.normal.barBorderRadius

柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径。 如:

barBorderRadius: 5, // 统一设置四个角的圆角大小
barBorderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)

series.bar.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'dashed', 'dotted'

series.bar.itemStyle.normal.borderWidth

柱条的描边宽度,默认不描边。

series.bar.itemStyle.normal.borderColor

柱条的描边颜色。

series.bar.itemStyle.normal.color

柱条的颜色。 默认从全局调色盘 option.color 获取颜色

series.bar.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.bar.label.emphasis.textStyle

标签的字体样式。

series.bar.label.emphasis.textStyle.fontSize

文字的字体大小

series.bar.label.emphasis.textStyle.fontFamily

文字的字体系列

series.bar.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.bar.label.emphasis.textStyle.color

文字的颜色。

series.bar.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.label.emphasis.position

标签的位置。

可选:

series.bar.label.emphasis.show

是否显示标签。

series.bar.label.normal.textStyle

标签的字体样式。

series.bar.label.normal.textStyle.fontSize

文字的字体大小

series.bar.label.normal.textStyle.fontFamily

文字的字体系列

series.bar.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.bar.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.bar.label.normal.textStyle.color

文字的颜色。

series.bar.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.bar.label.normal.position

标签的位置。

可选:

series.bar.label.normal.show

是否显示标签。

series.bar.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.bar.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.bar.coordinateSystem

该系列使用的坐标系,可选:

series.bar.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.bar.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series.line

折线/面积图

折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。可用于直角坐标系极坐标系上。

Tip: 设置 areaStyle 后可以绘制面积图。

Tip: 配合分段型 visualMap 组件可以将折线/面积图通过不同颜色分区间。如下示例

series.line.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.line.animationEasingUpdate

数据更新动画的缓动效果。

series.line.animationDurationUpdate

数据更新动画的时长。

series.line.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.line.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.line.animationDuration

初始动画的时长。

series.line.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.line.animation

是否开启动画,默认开启。

series.line.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.line.z

折线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series.line.zlevel

折线图所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series.line.markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series.line.markArea.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.line.markArea.animationEasingUpdate

数据更新动画的缓动效果。

series.line.markArea.animationDurationUpdate

数据更新动画的时长。

series.line.markArea.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.line.markArea.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.line.markArea.animationDuration

初始动画的时长。

series.line.markArea.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.line.markArea.animation

是否开启动画,默认开启。

series.line.markArea.data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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%'
        }
    ]
]

series.line.markArea.data.1

标域右下角的数据

series.line.markArea.data.1.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.line.markArea.data.1.label.emphasis.textStyle

标签的字体样式。

series.line.markArea.data.1.label.emphasis.textStyle.fontSize

文字的字体大小

series.line.markArea.data.1.label.emphasis.textStyle.fontFamily

文字的字体系列

series.line.markArea.data.1.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markArea.data.1.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.line.markArea.data.1.label.emphasis.textStyle.color

文字的颜色。

series.line.markArea.data.1.label.emphasis.position

标签的位置。

可选:

series.line.markArea.data.1.label.emphasis.show

是否显示标签。

series.line.markArea.data.1.label.normal.textStyle

标签的字体样式。

series.line.markArea.data.1.label.normal.textStyle.fontSize

文字的字体大小

series.line.markArea.data.1.label.normal.textStyle.fontFamily

文字的字体系列

series.line.markArea.data.1.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markArea.data.1.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.line.markArea.data.1.label.normal.textStyle.color

文字的颜色。

series.line.markArea.data.1.label.normal.position

标签的位置。

可选:

series.line.markArea.data.1.label.normal.show

是否显示标签。

series.line.markArea.data.1.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.line.markArea.data.1.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markArea.data.1.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markArea.data.1.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markArea.data.1.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.markArea.data.1.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.1.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markArea.data.1.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.line.markArea.data.1.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.line.markArea.data.1.itemStyle.emphasis.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
)

series.line.markArea.data.1.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markArea.data.1.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markArea.data.1.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markArea.data.1.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.markArea.data.1.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.1.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markArea.data.1.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.line.markArea.data.1.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.line.markArea.data.1.itemStyle.normal.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
)

series.line.markArea.data.1.value

标域值,可以不设。

series.line.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.line.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.line.markArea.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.line.markArea.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.line.markArea.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.line.markArea.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.line.markArea.data.0

标域左上角的数据

series.line.markArea.data.0.label

该数据项标签的样式,起点和终点项的label会合并到一起。

series.line.markArea.data.0.label.emphasis.textStyle

标签的字体样式。

series.line.markArea.data.0.label.emphasis.textStyle.fontSize

文字的字体大小

series.line.markArea.data.0.label.emphasis.textStyle.fontFamily

文字的字体系列

series.line.markArea.data.0.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markArea.data.0.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.line.markArea.data.0.label.emphasis.textStyle.color

文字的颜色。

series.line.markArea.data.0.label.emphasis.position

标签的位置。

可选:

series.line.markArea.data.0.label.emphasis.show

是否显示标签。

series.line.markArea.data.0.label.normal.textStyle

标签的字体样式。

series.line.markArea.data.0.label.normal.textStyle.fontSize

文字的字体大小

series.line.markArea.data.0.label.normal.textStyle.fontFamily

文字的字体系列

series.line.markArea.data.0.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markArea.data.0.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.line.markArea.data.0.label.normal.textStyle.color

文字的颜色。

series.line.markArea.data.0.label.normal.position

标签的位置。

可选:

series.line.markArea.data.0.label.normal.show

是否显示标签。

series.line.markArea.data.0.itemStyle

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series.line.markArea.data.0.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markArea.data.0.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markArea.data.0.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markArea.data.0.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.markArea.data.0.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.0.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markArea.data.0.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.line.markArea.data.0.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.line.markArea.data.0.itemStyle.emphasis.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
)

series.line.markArea.data.0.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markArea.data.0.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markArea.data.0.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markArea.data.0.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.markArea.data.0.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.data.0.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markArea.data.0.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.line.markArea.data.0.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.line.markArea.data.0.itemStyle.normal.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
)

series.line.markArea.data.0.value

标域值,可以不设。

series.line.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'

series.line.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'

series.line.markArea.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

series.line.markArea.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.line.markArea.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.line.markArea.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.line.markArea.itemStyle

该标域的样式。

series.line.markArea.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markArea.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markArea.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markArea.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.markArea.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markArea.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.line.markArea.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.line.markArea.itemStyle.emphasis.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
)

series.line.markArea.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markArea.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markArea.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markArea.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.markArea.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markArea.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markArea.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.line.markArea.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.line.markArea.itemStyle.normal.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
)

series.line.markArea.label

标域文本配置。

series.line.markArea.label.emphasis.textStyle

标签的字体样式。

series.line.markArea.label.emphasis.textStyle.fontSize

文字的字体大小

series.line.markArea.label.emphasis.textStyle.fontFamily

文字的字体系列

series.line.markArea.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markArea.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.line.markArea.label.emphasis.textStyle.color

文字的颜色。

series.line.markArea.label.emphasis.position

标签的位置。

可选:

series.line.markArea.label.emphasis.show

是否显示标签。

series.line.markArea.label.normal.textStyle

标签的字体样式。

series.line.markArea.label.normal.textStyle.fontSize

文字的字体大小

series.line.markArea.label.normal.textStyle.fontFamily

文字的字体系列

series.line.markArea.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markArea.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.line.markArea.label.normal.textStyle.color

文字的颜色。

series.line.markArea.label.normal.position

标签的位置。

可选:

series.line.markArea.label.normal.show

是否显示标签。

series.line.markArea.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.line.markLine

图表标线。

series.line.markLine.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.line.markLine.animationEasingUpdate

数据更新动画的缓动效果。

series.line.markLine.animationDurationUpdate

数据更新动画的时长。

series.line.markLine.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.line.markLine.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.line.markLine.animationDuration

初始动画的时长。

series.line.markLine.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.line.markLine.animation

是否开启动画,默认开启。

series.line.markLine.data

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

  4. 如果是笛卡尔坐标系的话,也可以通过只指定 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
        }
    ]
]

series.line.markLine.data.1

终点的数据。

series.line.markLine.data.1.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.line.markLine.data.1.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markLine.data.1.label.emphasis.position

标签位置,可选:

series.line.markLine.data.1.label.emphasis.show

是否显示标签。

series.line.markLine.data.1.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markLine.data.1.label.normal.position

标签位置,可选:

series.line.markLine.data.1.label.normal.show

是否显示标签。

series.line.markLine.data.1.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.line.markLine.data.1.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.line.markLine.data.1.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markLine.data.1.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markLine.data.1.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markLine.data.1.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.markLine.data.1.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.1.lineStyle.emphasis.type

线的类型。

可选:

series.line.markLine.data.1.lineStyle.emphasis.width

线宽。

series.line.markLine.data.1.lineStyle.emphasis.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
)

series.line.markLine.data.1.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.line.markLine.data.1.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markLine.data.1.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markLine.data.1.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markLine.data.1.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.markLine.data.1.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.1.lineStyle.normal.type

线的类型。

可选:

series.line.markLine.data.1.lineStyle.normal.width

线宽。

series.line.markLine.data.1.lineStyle.normal.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
)

series.line.markLine.data.1.symbolOffset

终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.line.markLine.data.1.symbolRotate

终点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.line.markLine.data.1.symbolSize

终点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.line.markLine.data.1.symbol

终点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.line.markLine.data.1.value

标注值,可以不设。

series.line.markLine.data.1.y

相对容器的屏幕 y 坐标,单位像素。

series.line.markLine.data.1.x

相对容器的屏幕 x 坐标,单位像素。

series.line.markLine.data.1.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.line.markLine.data.1.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.line.markLine.data.1.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.line.markLine.data.1.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.line.markLine.data.0

起点的数据。

series.line.markLine.data.0.label

该数据项标签的样式,起点和终点项的 label会合并到一起。

series.line.markLine.data.0.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markLine.data.0.label.emphasis.position

标签位置,可选:

series.line.markLine.data.0.label.emphasis.show

是否显示标签。

series.line.markLine.data.0.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markLine.data.0.label.normal.position

标签位置,可选:

series.line.markLine.data.0.label.normal.show

是否显示标签。

series.line.markLine.data.0.lineStyle

该数据项线的样式,起点和终点项的 lineStyle会合并到一起。

series.line.markLine.data.0.lineStyle.emphasis.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.line.markLine.data.0.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markLine.data.0.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markLine.data.0.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markLine.data.0.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.markLine.data.0.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.0.lineStyle.emphasis.type

线的类型。

可选:

series.line.markLine.data.0.lineStyle.emphasis.width

线宽。

series.line.markLine.data.0.lineStyle.emphasis.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
)

series.line.markLine.data.0.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.line.markLine.data.0.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markLine.data.0.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markLine.data.0.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markLine.data.0.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.markLine.data.0.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.data.0.lineStyle.normal.type

线的类型。

可选:

series.line.markLine.data.0.lineStyle.normal.width

线宽。

series.line.markLine.data.0.lineStyle.normal.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
)

series.line.markLine.data.0.symbolOffset

起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.line.markLine.data.0.symbolRotate

起点标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.line.markLine.data.0.symbolSize

起点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series.line.markLine.data.0.symbol

起点标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.line.markLine.data.0.value

标注值,可以不设。

series.line.markLine.data.0.y

相对容器的屏幕 y 坐标,单位像素。

series.line.markLine.data.0.x

相对容器的屏幕 x 坐标,单位像素。

series.line.markLine.data.0.coord

起点或终点的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle

注:对于 axis.type'category' 类型的轴

例如:

{
    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, ...]
            }]
        }
    }
}

series.line.markLine.data.0.valueDim

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

series.line.markLine.data.0.valueIndex

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

series.line.markLine.data.0.type

特殊的标注类型,用于标注最大值最小值等。

可选:

series.line.markLine.lineStyle

标线的样式

series.line.markLine.lineStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markLine.lineStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markLine.lineStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markLine.lineStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.markLine.lineStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.lineStyle.emphasis.type

线的类型。

可选:

series.line.markLine.lineStyle.emphasis.width

线宽。

series.line.markLine.lineStyle.emphasis.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
)

series.line.markLine.lineStyle.normal.curveness

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series.line.markLine.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markLine.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markLine.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markLine.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.markLine.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markLine.lineStyle.normal.type

线的类型。

可选:

series.line.markLine.lineStyle.normal.width

线宽。

series.line.markLine.lineStyle.normal.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
)

series.line.markLine.label

标线的文本。

series.line.markLine.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markLine.label.emphasis.position

标签位置,可选:

series.line.markLine.label.emphasis.show

是否显示标签。

series.line.markLine.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markLine.label.normal.position

标签位置,可选:

series.line.markLine.label.normal.show

是否显示标签。

series.line.markLine.precision

标线数值的精度,在显示平均值线的时候有用。

series.line.markLine.symbolSize

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series.line.markLine.symbol

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

series.line.markLine.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.line.markPoint

图表标注。

series.line.markPoint.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

prefix

series.line.markPoint.animationEasingUpdate

数据更新动画的缓动效果。

series.line.markPoint.animationDurationUpdate

数据更新动画的时长。

series.line.markPoint.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series.line.markPoint.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series.line.markPoint.animationDuration

初始动画的时长。

series.line.markPoint.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series.line.markPoint.animation

是否开启动画,默认开启。

series.line.markPoint.data

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

  2. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时,优先级按上述的顺序。

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series.line.markPoint.itemStyle

标注的样式。

series.line.markPoint.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markPoint.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markPoint.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markPoint.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.markPoint.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markPoint.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markPoint.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.line.markPoint.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.line.markPoint.itemStyle.emphasis.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
)

series.line.markPoint.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.markPoint.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.markPoint.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.markPoint.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.markPoint.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.markPoint.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.markPoint.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.line.markPoint.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.line.markPoint.itemStyle.normal.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
)

series.line.markPoint.label

标注的文本。

series.line.markPoint.label.emphasis.textStyle

标签的字体样式。

series.line.markPoint.label.emphasis.textStyle.fontSize

文字的字体大小

series.line.markPoint.label.emphasis.textStyle.fontFamily

文字的字体系列

series.line.markPoint.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markPoint.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.line.markPoint.label.emphasis.textStyle.color

文字的颜色。

series.line.markPoint.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markPoint.label.emphasis.position

标签的位置。

可选:

series.line.markPoint.label.emphasis.show

是否显示标签。

series.line.markPoint.label.normal.textStyle

标签的字体样式。

series.line.markPoint.label.normal.textStyle.fontSize

文字的字体大小

series.line.markPoint.label.normal.textStyle.fontFamily

文字的字体系列

series.line.markPoint.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.line.markPoint.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.line.markPoint.label.normal.textStyle.color

文字的颜色。

series.line.markPoint.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.markPoint.label.normal.position

标签的位置。

可选:

series.line.markPoint.label.normal.show

是否显示标签。

series.line.markPoint.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series.line.markPoint.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.line.markPoint.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.line.markPoint.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.line.markPoint.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.line.data

系列中的数据内容数组。数组项通常为具体的数据项。数据格式有下面几种情况

  1. 在坐标系一个轴为类目轴的时候,数据可以是一维的数值,数组长度等于所使用类目轴文本标签数组 xAxis.data 的长度,并且他们间是一一对应的,如下:

     [12, 34, 56, 10, 23]
    
  2. 在坐标系两个轴都为数值轴的时候,每个数据项需要是一个数组,并且至少有两个值表示直角坐标系上的 xy 或者极坐标系上的 radiusangle,如下:

     [[3.4, 4.5, 15], [4.2, 2.3, 20], [10.8, 9.5, 30], [7.2, 8.8, 18]]
    

    每一项数值数组从第三个值开始可以表示数据的其它维度,配合 visualMap 组件可以将指定的一个或多个维度映射到颜色,大小等多个图形属性上。

  3. 在坐标系两个轴都为类目轴的时候,每个数据项也需要是一个数组,单个数据项至少要有两个值表示在两个轴上类目的索引或者类目的名称,如下:

     [[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),可用-表示,无数据在折线图中表现为该点是断开的,在其它图中表示为图形不存在。

series.line.sampling

折线图在数据量远大于像素点时候的降采样策略,开启后可以有效的优化图表的绘制效率,默认关闭,也就是全部绘制不过滤数据点。

可选:

series.line.smoothMonotone

折线平滑后是否在一个维度上保持单调性,可以设置成'x', 'y'来指明是在 x 轴或者 y 轴上保持单调性。

通常在双数值轴上使用。

下面两张图分别是双数值轴中的折线图smoothMonotone不设置以及设置为'x'的区别。

series.line.smooth

是否平滑曲线显示。

series.line.areaStyle

区域填充样式。

series.line.areaStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.areaStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.areaStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.areaStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.areaStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.areaStyle.normal.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
)

series.line.lineStyle

线条样式。

注: 修改 lineStyle 中的颜色不会影响图例颜色,如果需要图例颜色和折线图颜色一致,需修改 itemStyle.normal.color,线条颜色默认也会取改颜色。

series.line.lineStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.lineStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.lineStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.lineStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.lineStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.lineStyle.normal.type

线的类型。

可选:

series.line.lineStyle.normal.width

线宽。

series.line.lineStyle.normal.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
)

series.line.itemStyle

折线拐点标志的样式。

series.line.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

series.line.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

series.line.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

series.line.itemStyle.emphasis.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
)

series.line.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series.line.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

series.line.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

series.line.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

series.line.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series.line.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

series.line.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

series.line.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

series.line.itemStyle.normal.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 等各个参数。

series.line.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series.line.label.emphasis.textStyle

标签的字体样式。

series.line.label.emphasis.textStyle.fontSize

文字的字体大小

series.line.label.emphasis.textStyle.fontFamily

文字的字体系列

series.line.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

series.line.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

series.line.label.emphasis.textStyle.color

文字的颜色。

series.line.label.emphasis.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.label.emphasis.position

标签的位置。

可选:

series.line.label.emphasis.show

是否显示标签。

series.line.label.normal.textStyle

标签的字体样式。

series.line.label.normal.textStyle.fontSize

文字的字体大小

series.line.label.normal.textStyle.fontFamily

文字的字体系列

series.line.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

series.line.label.normal.textStyle.fontStyle

文字字体的风格

可选:

series.line.label.normal.textStyle.color

文字的颜色。

series.line.label.normal.formatter

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

series.line.label.normal.position

标签的位置。

可选:

series.line.label.normal.show

是否显示标签。

series.line.step

是否是阶梯线图。可以设置为 true 显示成阶梯线图,也支持设置成 'start', 'middle', 'end' 分别配置在当前点,当前点与下个点的中间点,下个点拐弯。

不同的配置效果如下:

series.line.clipOverflow

是否对超出部分裁剪,默认裁剪。

series.line.connectNulls

是否连接空数据。

series.line.stack

数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。

下面示例可以通过右上角 toolbox 中的堆叠切换看效果:

series.line.legendHoverLink

是否启用图例 hover 时的联动高亮。

series.line.hoverAnimation

是否开启 hover 在拐点标志上的提示动画效果。

series.line.showAllSymbol

标志图形默认只有主轴显示(随主轴标签间隔隐藏策略),如需全部显示可把 showAllSymbol 设为 true

series.line.showSymbol

是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。

series.line.symbolOffset

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series.line.symbolRotate

标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series.line.symbolSize

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

series.line.symbol

标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series.line.polarIndex

使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。

series.line.yAxisIndex

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

series.line.xAxisIndex

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

series.line.coordinateSystem

该系列使用的坐标系,可选:

series.line.name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

timeline

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


使用注意与最佳实践:


与 ECharts 2 的兼容性:

timeline.data

timeline 数据。Array 的每一项,可以是直接的数值。 如果需要对每个数据项单独进行样式定义,则数据项写成 ObjectObject中,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
    },
]

timeline.controlStyle

『控制按钮』的样式。『控制按钮』包括:『播放按钮』、『前进按钮』、『后退按钮』。

timeline.controlStyle.emphasis

控制按钮的『高亮状态』的样式(hover时)。

timeline.controlStyle.emphasis.borderWidth

按钮边框线宽。

timeline.controlStyle.emphasis.borderColor

按钮边框颜色。

timeline.controlStyle.emphasis.color

按钮颜色。

timeline.controlStyle.normal

控制按钮的『正常状态』的样式。

timeline.controlStyle.normal.borderWidth

按钮边框线宽。

timeline.controlStyle.normal.borderColor

按钮边框颜色。

timeline.controlStyle.normal.color

按钮颜色。

timeline.controlStyle.nextIcon

『前进按钮』的图形

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.controlStyle.prevIcon

『后退按钮』的图形

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.controlStyle.stopIcon

『播放按钮』的『可停止状态』的图形。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.controlStyle.playIcon

『播放按钮』的『可播放状态』的图形。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.controlStyle.position

『控制按钮』的位置。

timeline.controlStyle.itemGap

『控制按钮』的间隔,单位为像素(px)。

timeline.controlStyle.itemSize

『控制按钮』的尺寸,单位为像素(px)。

timeline.controlStyle.showNextBtn

是否显示『前进按钮』。

timeline.controlStyle.showPrevBtn

是否显示『后退按钮』。

timeline.controlStyle.showPlayBtn

是否显示『播放按钮』。

timeline.controlStyle.show

是否显示『控制按钮』。设置为 false 则全不显示。

timeline.checkpointStyle

『当前项』(checkpoint)的图形样式。

timeline.checkpointStyle.animationEasing

timeline组件中『当前项』(checkpoint)的动画的缓动效果。不同的缓动效果可以参考 缓动示例

timeline.checkpointStyle.animationDuration

timeline组件中『当前项』(checkpoint)的动画时长。

timeline.checkpointStyle.animation

timeline组件中『当前项』(checkpoint)在 timeline 播放切换中的移动,是否有动画。

timeline.checkpointStyle.borderColor

timeline组件中『当前项』(checkpoint)的边框颜色。

timeline.checkpointStyle.borderWidth

timeline组件中『当前项』(checkpoint)的边框宽度。

timeline.checkpointStyle.color

timeline组件中『当前项』(checkpoint)的颜色。

timeline.checkpointStyle.symbolOffset

timeline.checkpointStyle 标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

timeline.checkpointStyle.symbolRotate

timeline.checkpointStyle 标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

timeline.checkpointStyle.symbolSize

timeline.checkpointStyle 标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

timeline.checkpointStyle.symbol

timeline.checkpointStyle 标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.itemStyle

timeline 图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

timeline.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

timeline.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

timeline.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

timeline.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

timeline.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

timeline.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

timeline.itemStyle.emphasis.borderWidth

timeline 描边线宽。为 0 时无描边。

timeline.itemStyle.emphasis.borderColor

timeline 图形的描边颜色。支持的格式同 color

timeline.itemStyle.emphasis.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
)

timeline.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

timeline.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

timeline.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

timeline.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

timeline.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

timeline.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

timeline.itemStyle.normal.borderWidth

timeline 描边线宽。为 0 时无描边。

timeline.itemStyle.normal.borderColor

timeline 图形的描边颜色。支持的格式同 color

timeline.itemStyle.normal.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
)

timeline.label

轴的文本标签。有 normalemphasis 两个状态,normal 是文本正常的样式,emphasis 是文本高亮的样式,比如鼠标悬浮或者图例联动高亮的时候会使用 emphasis 作为文本的样式。

timeline.label.emphasis.textStyle.fontSize

timeline.lable.emphasis文字的字体大小

timeline.label.emphasis.textStyle.fontFamily

timeline.lable.emphasis文字的字体系列

timeline.label.emphasis.textStyle.fontWeight

timeline.lable.emphasis文字字体的粗细

可选:

timeline.label.emphasis.textStyle.fontStyle

timeline.lable.emphasis文字字体的风格

可选:

timeline.label.emphasis.textStyle.color

timeline.lable.emphasis文字的颜色。

timeline.label.emphasis.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

timeline.label.emphasis.rotate

label 的旋转角度。正值表示逆时针旋转。

timeline.label.emphasis.interval

label 的间隔。当指定为数值时,例如指定为 2,则每隔两个显示一个 label。

timeline.label.emphasis.show

是否显示 label。

timeline.label.normal.textStyle.fontSize

timeline.lable.normal文字的字体大小

timeline.label.normal.textStyle.fontFamily

timeline.lable.normal文字的字体系列

timeline.label.normal.textStyle.fontWeight

timeline.lable.normal文字字体的粗细

可选:

timeline.label.normal.textStyle.fontStyle

timeline.lable.normal文字字体的风格

可选:

timeline.label.normal.textStyle.color

timeline.lable.normal文字的颜色。

timeline.label.normal.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

timeline.label.normal.rotate

label 的旋转角度。正值表示逆时针旋转。

timeline.label.normal.interval

label 的间隔。当指定为数值时,例如指定为 2,则每隔两个显示一个 label。

timeline.label.normal.show

是否显示 label。

timeline.label.position

可选的配置方式:

timeline.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

timeline.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

timeline.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

timeline.lineStyle.shadowColor

阴影颜色。支持的格式同color

timeline.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

timeline.lineStyle.type

timeline 线的类型。

可选:

timeline.lineStyle.width

timeline 线宽。

timeline.lineStyle.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
)

timeline.lineStyle.show

是否显示轴线。可以设置为 false 不显示轴线,则可以做出不同的样式效果。

timeline.symbolOffset

timeline标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

timeline.symbolRotate

timeline标记的旋转角度。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

timeline.symbolSize

timeline标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

timeline.symbol

timeline标记的图形。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。

在 ECharts 3 里可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

timeline.inverse

timeline.orient

摆放方式,可选值有:

timeline.padding

timeline内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

timeline.bottom

timeline组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

timeline.right

timeline组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

timeline.top

timeline组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

timeline.left

timeline组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

timeline.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

timeline.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

timeline.controlPosition

表示『播放』按钮的位置。可选值:'left''right'

timeline.realtime

拖动圆点的时候,是否实时更新视图。

timeline.playInterval

表示播放的速度(跳动的间隔),单位毫秒(ms)。

timeline.loop

表示是否循环播放。

timeline.rewind

表示是否反向播放。

timeline.autoPlay

表示是否自动播放。

timeline.currentIndex

表示当前选中项是哪项。比如,currentIndex0 时,表示当前选中项为 timeline.data[0](即使用 options[0])。

timeline.axisType

轴的类型。可选值为:

timeline.type

这个属性目前只支持为 slider,不需要更改。

timeline.show

是否显示 timeline 组件。如果设置为false,不会显示,但是功能还存在。

singleAxis

单轴。可以被应用到散点图中展现一维数据,如下示例

singleAxis.data

类目数据,在类目轴(type: 'category')中有效。

示例:

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

singleAxis.splitArea

坐标轴在 grid 区域中的分隔区域,默认不显示。

singleAxis.splitArea.areaStyle

分隔区域的样式设置。

singleAxis.splitArea.areaStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

singleAxis.splitArea.areaStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

singleAxis.splitArea.areaStyle.shadowOffsetX

阴影水平方向上的偏移距离。

singleAxis.splitArea.areaStyle.shadowColor

阴影颜色。支持的格式同color

singleAxis.splitArea.areaStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.splitArea.areaStyle.color

分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。

singleAxis.splitArea.show

是否显示分隔区域。

singleAxis.splitArea.interval

坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

singleAxis.splitLine

坐标轴在 grid 区域中的分隔线。

singleAxis.splitLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

singleAxis.splitLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

singleAxis.splitLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

singleAxis.splitLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

singleAxis.splitLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.splitLine.lineStyle.type

分隔线线的类型。

可选:

singleAxis.splitLine.lineStyle.width

分隔线线宽。

singleAxis.splitLine.lineStyle.color

分隔线颜色,可以设置成单个颜色。

也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。

示例

splitLine: {
    lineStyle: {
        // 使用深浅的间隔色
        color: ['#aaa', '#ddd']
    }
}

singleAxis.splitLine.interval

坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

singleAxis.splitLine.show

是否显示分隔线。默认数值轴显示,类目轴不显示。

singleAxis.axisLabel

坐标轴刻度标签的相关设置。

singleAxis.axisLabel.textStyle.fontSize

文字的字体大小

singleAxis.axisLabel.textStyle.fontFamily

文字的字体系列

singleAxis.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

singleAxis.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

singleAxis.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

singleAxis.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

singleAxis.axisLabel.margin

刻度标签与轴线之间的距离。

singleAxis.axisLabel.rotate

刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

singleAxis.axisLabel.inside

刻度标签是否朝内,默认朝外。

singleAxis.axisLabel.interval

坐标轴刻度标签的显示间隔,在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

singleAxis.axisLabel.show

是否显示刻度标签。

singleAxis.axisTick

坐标轴刻度相关设置。

singleAxis.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

singleAxis.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

singleAxis.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

singleAxis.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

singleAxis.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

singleAxis.axisTick.lineStyle.width

坐标轴刻度线宽。

singleAxis.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

singleAxis.axisTick.length

坐标轴刻度的长度。

singleAxis.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

singleAxis.axisTick.interval

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

singleAxis.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

singleAxis.axisTick.show

是否显示坐标轴刻度。

singleAxis.axisLine

坐标轴轴线相关设置。

singleAxis.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

singleAxis.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

singleAxis.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

singleAxis.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

singleAxis.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

singleAxis.axisLine.lineStyle.width

坐标轴线线宽。

singleAxis.axisLine.lineStyle.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
)

singleAxis.axisLine.show

是否显示坐标轴轴线。

singleAxis.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

singleAxis.silent

坐标轴是否是静态无法交互。

singleAxis.logBase

对数轴的底数,只在对数轴中(type: 'log')有效。

singleAxis.interval

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 minmax 强制设定刻度划分,一般不建议使用。

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

singleAxis.minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

{
    minInterval: 1
}

只在数值轴中(type: 'value')有效。

singleAxis.splitNumber

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

singleAxis.scale

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 minmax 之后该配置项无效。

singleAxis.max

坐标轴刻度最大值,在类目轴中无效。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

singleAxis.min

坐标轴刻度最小值,在类目轴中无效。

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

singleAxis.boundaryGap

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 truefalse。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 minmax 后无效。 示例:

boundaryGap: ['20%', '20%']

singleAxis.inverse

是否是反向坐标轴。ECharts 3 中新加。

singleAxis.nameRotate

坐标轴名字旋转,角度值。

singleAxis.nameGap

坐标轴名称与轴线之间的距离。

singleAxis.nameTextStyle

坐标轴名称的文字样式。

singleAxis.nameTextStyle.fontSize

坐标轴名称文字的字体大小

singleAxis.nameTextStyle.fontFamily

坐标轴名称文字的字体系列

singleAxis.nameTextStyle.fontWeight

坐标轴名称文字字体的粗细

可选:

singleAxis.nameTextStyle.fontStyle

坐标轴名称文字字体的风格

可选:

singleAxis.nameTextStyle.color

坐标轴名称的颜色,默认取 axisLine.lineStyle.color

singleAxis.nameLocation

坐标轴名称显示位置。

可选:

singleAxis.name

坐标轴名称。

singleAxis.type

坐标轴类型。

可选:

singleAxis.orient

轴的朝向,默认水平朝向,可以设置成 'vertical' 垂直朝向。

singleAxis.height

grid 组件的高度。默认自适应。

singleAxis.width

grid 组件的宽度。默认自适应。

singleAxis.bottom

grid 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

singleAxis.right

grid 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

singleAxis.top

grid 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

singleAxis.left

grid 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

singleAxis.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

singleAxis.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

parallelAxis

这个组件是平行坐标系中的坐标轴。



平行坐标系介绍

平行坐标系(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, '优'],
                ...
            ]
        }
    ]
};

需要涉及到三个组件:parallelparallelAxisseries-parallel



配置注意和最佳实践

配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。

如果数据量很大并且发生卡顿

建议把 series-parallel.lineStyle.normal.width 设为 0.5(或更小), 可能显著改善性能。



高维数据的显示

维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。

可以通过 parallel.axisExpandable 来改善显示效果,如下例子:



parallelAxis.data

类目数据,在类目轴(type: 'category')中有效。

示例:

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

parallelAxis.axisLabel

坐标轴刻度标签的相关设置。

parallelAxis.axisLabel.textStyle.fontSize

文字的字体大小

parallelAxis.axisLabel.textStyle.fontFamily

文字的字体系列

parallelAxis.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

parallelAxis.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

parallelAxis.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

parallelAxis.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

parallelAxis.axisLabel.margin

刻度标签与轴线之间的距离。

parallelAxis.axisLabel.rotate

刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

parallelAxis.axisLabel.inside

刻度标签是否朝内,默认朝外。

parallelAxis.axisLabel.interval

坐标轴刻度标签的显示间隔,在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

parallelAxis.axisLabel.show

是否显示刻度标签。

parallelAxis.axisTick

坐标轴刻度相关设置。

parallelAxis.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

parallelAxis.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

parallelAxis.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

parallelAxis.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

parallelAxis.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallelAxis.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

parallelAxis.axisTick.lineStyle.width

坐标轴刻度线宽。

parallelAxis.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

parallelAxis.axisTick.length

坐标轴刻度的长度。

parallelAxis.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

parallelAxis.axisTick.interval

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

parallelAxis.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

parallelAxis.axisTick.show

是否显示坐标轴刻度。

parallelAxis.axisLine

坐标轴轴线相关设置。

parallelAxis.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

parallelAxis.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

parallelAxis.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

parallelAxis.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

parallelAxis.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallelAxis.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

parallelAxis.axisLine.lineStyle.width

坐标轴线线宽。

parallelAxis.axisLine.lineStyle.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
)

parallelAxis.axisLine.show

是否显示坐标轴轴线。

parallelAxis.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

parallelAxis.silent

坐标轴是否是静态无法交互。

parallelAxis.logBase

对数轴的底数,只在对数轴中(type: 'log')有效。

parallelAxis.interval

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 minmax 强制设定刻度划分,一般不建议使用。

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

parallelAxis.minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

{
    minInterval: 1
}

只在数值轴中(type: 'value')有效。

parallelAxis.splitNumber

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

parallelAxis.scale

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 minmax 之后该配置项无效。

parallelAxis.max

坐标轴刻度最大值,在类目轴中无效。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

parallelAxis.min

坐标轴刻度最小值,在类目轴中无效。

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

parallelAxis.boundaryGap

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 truefalse。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 minmax 后无效。 示例:

boundaryGap: ['20%', '20%']

parallelAxis.inverse

是否是反向坐标轴。ECharts 3 中新加。

parallelAxis.nameRotate

坐标轴名字旋转,角度值。

parallelAxis.nameGap

坐标轴名称与轴线之间的距离。

parallelAxis.nameTextStyle

坐标轴名称的文字样式。

parallelAxis.nameTextStyle.fontSize

坐标轴名称文字的字体大小

parallelAxis.nameTextStyle.fontFamily

坐标轴名称文字的字体系列

parallelAxis.nameTextStyle.fontWeight

坐标轴名称文字字体的粗细

可选:

parallelAxis.nameTextStyle.fontStyle

坐标轴名称文字字体的风格

可选:

parallelAxis.nameTextStyle.color

坐标轴名称的颜色,默认取 axisLine.lineStyle.color

parallelAxis.nameLocation

坐标轴名称显示位置。

可选:

parallelAxis.name

坐标轴名称。

parallelAxis.type

坐标轴类型。

可选:

parallelAxis.areaSelectStyle

在坐标轴上可以进行框选,这里是一些框选的设置。


parallelAxis.areaSelectStyle.opacity

选框的透明度。

parallelAxis.areaSelectStyle.color

选框的填充色。

parallelAxis.areaSelectStyle.borderColor

选框的边框颜色。

parallelAxis.areaSelectStyle.borderWidth

选框的边框宽度。

parallelAxis.areaSelectStyle.width

框选范围的宽度。

parallelAxis.realtime

是否坐标轴刷选的时候,实时刷新视图。如果设为 false,则在刷选动作结束时候,才刷新视图。

大数据量时,建议设置成 false,从而避免卡顿。

parallelAxis.parallelIndex

用于定义『坐标轴』对应到哪个『坐标系』中。

比如有如下配置:

myChart.setOption({
    parallel: [
        {...},                      // 第一个平行坐标系
        {...}                       // 第二个平行坐标系
    ],
    parallelAxis: [
        {parallelIndex: 1, ...},    // 第一个坐标轴,对应到第二个平行坐标系
        {parallelIndex: 0, ...},    // 第二个坐标轴,对应到第一个平行坐标系
        {parallelIndex: 1, ...},    // 第三个坐标轴,对应到第二个平行坐标系
        {parallelIndex: 0, ...}     // 第四个坐标轴,对应到第一个平行坐标系
    ],
    ...
});

只有一个平行坐标系时可不用设置,自动取默认值 0

parallelAxis.dim

坐标轴的维度序号。

例如 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 开始计数。例如,假设坐标轴的 dim1,则表示数据中的第二列会对应到此坐标轴上。

parallel



平行坐标系介绍

平行坐标系(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, '优'],
                ...
            ]
        }
    ]
};

需要涉及到三个组件:parallelparallelAxisseries-parallel



配置注意和最佳实践

配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。

如果数据量很大并且发生卡顿

建议把 series-parallel.lineStyle.normal.width 设为 0.5(或更小), 可能显著改善性能。



高维数据的显示

维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。

可以通过 parallel.axisExpandable 来改善显示效果,如下例子:



parallel.parallelAxisDefault

配置多个 parallelAxis 时,有些值一样的属性,如果书写多遍则比较繁琐,那么可以放置在 parallel.parallelAxisDefault 里。在坐标轴初始化前,parallel.parallelAxisDefault 里的配置项,会分别融合进 parallelAxis,形成最终的坐标轴的配置。

参见示例


parallel.parallelAxisDefault.data

类目数据,在类目轴(type: 'category')中有效。

示例:

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

parallel.parallelAxisDefault.axisLabel

坐标轴刻度标签的相关设置。

parallel.parallelAxisDefault.axisLabel.textStyle.fontSize

文字的字体大小

parallel.parallelAxisDefault.axisLabel.textStyle.fontFamily

文字的字体系列

parallel.parallelAxisDefault.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

parallel.parallelAxisDefault.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

parallel.parallelAxisDefault.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

parallel.parallelAxisDefault.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

parallel.parallelAxisDefault.axisLabel.margin

刻度标签与轴线之间的距离。

parallel.parallelAxisDefault.axisLabel.rotate

刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

parallel.parallelAxisDefault.axisLabel.inside

刻度标签是否朝内,默认朝外。

parallel.parallelAxisDefault.axisLabel.interval

坐标轴刻度标签的显示间隔,在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

parallel.parallelAxisDefault.axisLabel.show

是否显示刻度标签。

parallel.parallelAxisDefault.axisTick

坐标轴刻度相关设置。

parallel.parallelAxisDefault.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

parallel.parallelAxisDefault.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

parallel.parallelAxisDefault.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

parallel.parallelAxisDefault.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

parallel.parallelAxisDefault.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallel.parallelAxisDefault.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

parallel.parallelAxisDefault.axisTick.lineStyle.width

坐标轴刻度线宽。

parallel.parallelAxisDefault.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

parallel.parallelAxisDefault.axisTick.length

坐标轴刻度的长度。

parallel.parallelAxisDefault.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

parallel.parallelAxisDefault.axisTick.interval

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

parallel.parallelAxisDefault.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

parallel.parallelAxisDefault.axisTick.show

是否显示坐标轴刻度。

parallel.parallelAxisDefault.axisLine

坐标轴轴线相关设置。

parallel.parallelAxisDefault.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

parallel.parallelAxisDefault.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

parallel.parallelAxisDefault.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

parallel.parallelAxisDefault.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

parallel.parallelAxisDefault.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

parallel.parallelAxisDefault.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

parallel.parallelAxisDefault.axisLine.lineStyle.width

坐标轴线线宽。

parallel.parallelAxisDefault.axisLine.lineStyle.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
)

parallel.parallelAxisDefault.axisLine.show

是否显示坐标轴轴线。

parallel.parallelAxisDefault.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

parallel.parallelAxisDefault.silent

坐标轴是否是静态无法交互。

parallel.parallelAxisDefault.logBase

对数轴的底数,只在对数轴中(type: 'log')有效。

parallel.parallelAxisDefault.interval

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 minmax 强制设定刻度划分,一般不建议使用。

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

parallel.parallelAxisDefault.minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

{
    minInterval: 1
}

只在数值轴中(type: 'value')有效。

parallel.parallelAxisDefault.splitNumber

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

parallel.parallelAxisDefault.scale

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 minmax 之后该配置项无效。

parallel.parallelAxisDefault.max

坐标轴刻度最大值,在类目轴中无效。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

parallel.parallelAxisDefault.min

坐标轴刻度最小值,在类目轴中无效。

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

parallel.parallelAxisDefault.boundaryGap

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 truefalse。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 minmax 后无效。 示例:

boundaryGap: ['20%', '20%']

parallel.parallelAxisDefault.inverse

是否是反向坐标轴。ECharts 3 中新加。

parallel.parallelAxisDefault.nameRotate

坐标轴名字旋转,角度值。

parallel.parallelAxisDefault.nameGap

坐标轴名称与轴线之间的距离。

parallel.parallelAxisDefault.nameTextStyle

坐标轴名称的文字样式。

parallel.parallelAxisDefault.nameTextStyle.fontSize

坐标轴名称文字的字体大小

parallel.parallelAxisDefault.nameTextStyle.fontFamily

坐标轴名称文字的字体系列

parallel.parallelAxisDefault.nameTextStyle.fontWeight

坐标轴名称文字字体的粗细

可选:

parallel.parallelAxisDefault.nameTextStyle.fontStyle

坐标轴名称文字字体的风格

可选:

parallel.parallelAxisDefault.nameTextStyle.color

坐标轴名称的颜色,默认取 axisLine.lineStyle.color

parallel.parallelAxisDefault.nameLocation

坐标轴名称显示位置。

可选:

parallel.parallelAxisDefault.name

坐标轴名称。

parallel.parallelAxisDefault.type

坐标轴类型。

可选:

parallel.axisExpandWidth

在展开状态,轴的间距是多少,单位为像素。

参见 parallel.axisExpandable

parallel.axisExpandCount

初始时,有多少个轴会处于展开状态。建议根据你的维度个数而手动指定。

参见 parallel.axisExpandCenter 参见 parallel.axisExpandable

parallel.axisExpandCenter

初始时,以哪个轴为中心展开,这里给出轴的 index。没有默认值,需要手动指定。

参见 parallel.axisExpandable

parallel.axisExpandable

维度比较多时,比如有 50+ 的维度,那么就会有 50+ 个轴。那么可能会页面显示不下。

可以通过 parallel.axisExpandable 来改善显示效果,如下例子:

是否允许点击展开折叠 axis。

parallel.layout

布局方式,可选值为:

parallel.height

parallel 组件的高度。默认自适应。

parallel.width

parallel 组件的宽度。默认自适应。

parallel.bottom

parallel 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

parallel.right

parallel 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

parallel.top

parallel 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

parallel.left

parallel 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

parallel.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

parallel.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

geo

地理坐标系组件。

地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图线集

在地理坐标系中使用散点图的示例:

3.1.10 开始 geo 组件也支持鼠标事件。事件参数为

{
    componentType: 'geo',
    // Geo 组件在 option 中的 index
    geoIndex: number,
    // 点击区域的名称,比如"上海"
    name: string,
    // 传入的点击区域的 region 对象,见 geo.regions
    region: Object
}

geo.silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

geo.regions

在地图中对特定的区域配置样式。

例如:

regions: [{
    name: '广东',
    itemStyle: {
        normal: {
            color: 'red'
        }
    }
}]

geo.layoutSize

地图的大小,见 layoutCenter。支持相对于屏幕宽高的百分比或者绝对的像素大小。

geo.layoutCenter

layoutCenterlayoutSize 提供了除了 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 无效。

geo.bottom

组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

geo.right

组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

geo.top

组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

geo.left

组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

geo.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

geo.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

geo.itemStyle

地图区域的多边形 图形样式,有 normalemphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

geo.itemStyle.emphasis

高亮状态下的多边形样式。

geo.itemStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

geo.itemStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

geo.itemStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

geo.itemStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

geo.itemStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

geo.itemStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

geo.itemStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

geo.itemStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

geo.itemStyle.emphasis.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
)

geo.itemStyle.normal

普通状态下的多边形样式。

geo.itemStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

geo.itemStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

geo.itemStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

geo.itemStyle.normal.shadowColor

阴影颜色。支持的格式同color

geo.itemStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

geo.itemStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

geo.itemStyle.normal.borderWidth

描边线宽。为 0 时无描边。

geo.itemStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

geo.itemStyle.normal.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
)

geo.label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

geo.label.emphasis.textStyle

高亮状态下的标签文本样式。

geo.label.emphasis.textStyle.fontSize

文字的字体大小

geo.label.emphasis.textStyle.fontFamily

文字的字体系列

geo.label.emphasis.textStyle.fontWeight

文字字体的粗细

可选:

geo.label.emphasis.textStyle.fontStyle

文字字体的风格

可选:

geo.label.emphasis.textStyle.color

文字的颜色。

geo.label.emphasis.show

是否在高亮状态下显示标签。

geo.label.normal.textStyle

普通状态下的标签文本样式。

geo.label.normal.textStyle.fontSize

文字的字体大小

geo.label.normal.textStyle.fontFamily

文字的字体系列

geo.label.normal.textStyle.fontWeight

文字字体的粗细

可选:

geo.label.normal.textStyle.fontStyle

文字字体的风格

可选:

geo.label.normal.textStyle.color

文字的颜色。

geo.label.normal.show

是否在普通状态下显示标签。

geo.selectedMode

选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'表示单选,或者'multiple'表示多选。

geo.nameMap

自定义地区的名称映射,如:

{
    'China' : '中国'
}

geo.scaleLimit

滚轮缩放的极限控制,通过min, max最小和最大的缩放值,默认的缩放为1

geo.scaleLimit.max

最大的缩放值

geo.scaleLimit.min

最小的缩放值

geo.zoom

当前视角的缩放比例。

geo.center

当前视角的中心点,用经纬度表示

例如:

center: [115.97, 29.71]

geo.roam

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启

geo.map

地图类型。

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

geo.show

是否显示地理坐标系组件。

brush

brush 是区域选择组件,用户可以选择图中一部分数据,从而便于向用户展示被选中数据,或者他们的一些统计计算结果。

示例如下:



刷子的类型和启动按钮

目前 brush 组件支持的图表类型:scatterbarcandlestickparallel 本身自带刷选功能,但并非由 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.geoIndexbrush.xAxisIndexbrush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。

这几个配置项的取值可以是:

例如:

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 可以被联动。例如可以是:

注意

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.throttleTypebrush.throttleDelay 来解决这个问题。

throttleType 取值可以是:

例如这个 例子,就是使用了 debounce的效果:只有用户停止动作了,柱状图才更新。不然的话,如果柱状图的频繁更新,那么动画效果很差。



被选中项和未被选中项的视觉设置

参见 brush.inBrushbrush.outOfBrush



下面是详细配置。

brush.outOfBrush

定义 在选中范围外 的视觉元素。

可选的视觉元素有:

注意,如果 outOfBrush 没有指定,默认会设置 color: '#ddd',如果你不想要这个color,比如可以 换成:

brush: {
    ...,
    outOfBrush: {
        colorAlpha: 0.1
    }
}

brush.inBrush

定义 在选中范围中 的视觉元素。

可选的视觉元素有:

大多数情况下,inBrush 可以不指定,维持本来的视觉配置。

brush.removeOnClick

brush.brushMode'single' 的情况下,是否支持『单击清除所有选框』。

brush.throttleDelay

默认为 0 表示不开启 throttle。

默认情况,刷选或者移动选区的时候,会不断得发 brushSelected 事件,从而告诉外界选中的内容。

但是频繁的事件可能导致性能问题,或者动画效果很差。所以 brush 组件提供了 brush.throttleTypebrush.throttleDelay 来解决这个问题。

throttleType 取值可以是:

例如这个 例子,就是使用了 debounce的效果:只有用户停止动作了,柱状图才更新。不然的话,如果柱状图的频繁更新,那么动画效果很差。

brush.throttleType

默认情况,刷选或者移动选区的时候,会不断得发 brushSelected 事件,从而告诉外界选中的内容。

但是频繁的事件可能导致性能问题,或者动画效果很差。所以 brush 组件提供了 brush.throttleTypebrush.throttleDelay 来解决这个问题。

throttleType 取值可以是:

例如这个 例子,就是使用了 debounce的效果:只有用户停止动作了,柱状图才更新。不然的话,如果柱状图的频繁更新,那么动画效果很差。

brush.brushStyle

选框的默认样式,值为:

{
    borderWidth: 1,
    color: 'rgba(120,140,180,0.3)',
    borderColor: 'rgba(120,140,180,0.8)',
    width: null
},

brush.transformable

已经选好的选框是否可以被调整形状或平移。

brush.brushMode

默认的刷子的模式。可取值为:

brush.brushType

默认的刷子类型。

brush.yAxisIndex

指定哪些 yAxisIndex 可以被刷选。

可以设置 brush 是『全局的』还是『属于坐标系的』。

全局 brush

在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。

坐标系 brush

在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。

坐标系 brush 实际更为常用,尤其是在 geo 中。

通过指定 brush.geoIndexbrush.xAxisIndexbrush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。

这几个配置项的取值可以是:

例如:

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 所在的直角坐标系中刷选。
        ...
    }
};

brush.xAxisIndex

指定哪些 xAxisIndex 可以被刷选。

可以设置 brush 是『全局的』还是『属于坐标系的』。

全局 brush

在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。

坐标系 brush

在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。

坐标系 brush 实际更为常用,尤其是在 geo 中。

通过指定 brush.geoIndexbrush.xAxisIndexbrush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。

这几个配置项的取值可以是:

例如:

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 所在的直角坐标系中刷选。
        ...
    }
};

brush.geoIndex

指定哪些 geo 可以被刷选。

可以设置 brush 是『全局的』还是『属于坐标系的』。

全局 brush

在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』,就是『全局 brush』。

坐标系 brush

在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移(roam 和 dataZoom)而移动。

坐标系 brush 实际更为常用,尤其是在 geo 中。

通过指定 brush.geoIndexbrush.xAxisIndexbrush.yAxisIndex 来规定可以在哪些坐标系中进行刷选。

这几个配置项的取值可以是:

例如:

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 所在的直角坐标系中刷选。
        ...
    }
};

brush.seriesIndex

指定哪些 series 可以被刷选,可取值为:

brush.brushLink

不同系列间,选中的项可以联动。

参见如下效果(刷选一个 scatter,其他 scatter 以及 parallel 图都会有选中效果):

brushLink 配置项是一个数组,内容是 seriesIndex,指定了哪些 series 可以被联动。例如可以是:

注意

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.toolbox

使用在 toolbox 中的按钮。

brush 相关的 toolbox 按钮有:

toolbox

工具栏。内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。

如下示例:

toolbox.height

工具栏组件的高度。默认自适应。

toolbox.width

工具栏组件的宽度。默认自适应。

toolbox.bottom

工具栏组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

toolbox.right

工具栏组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

toolbox.top

工具栏组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

toolbox.left

工具栏组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

toolbox.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

toolbox.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

toolbox.iconStyle

公用的 icon 样式设置。

toolbox.iconStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.iconStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.iconStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.iconStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

toolbox.iconStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.iconStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.iconStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

toolbox.iconStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

toolbox.iconStyle.emphasis.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
)

toolbox.iconStyle.normal.textAlign

文本对齐方式,'left' / 'right'

toolbox.iconStyle.normal.textPosition

文本位置,'left' / 'right' / 'top' / 'bottom'

toolbox.iconStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.iconStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.iconStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.iconStyle.normal.shadowColor

阴影颜色。支持的格式同color

toolbox.iconStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.iconStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.iconStyle.normal.borderWidth

描边线宽。为 0 时无描边。

toolbox.iconStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

toolbox.iconStyle.normal.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
)

toolbox.feature

各工具配置项。

除了各个内置的工具按钮外,还可以自定义工具按钮。

注意,自定义的工具名字,只能以 my 开头,例如下例中的 myTool1myTool2

{
    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')
                }
            }
        }
    }
}

toolbox.feature.brush

选框组件的控制按钮。

也可以不在这里指定,而是在 brush.toolbox 中指定。

toolbox.feature.brush.title

标题文本。

toolbox.feature.brush.icon

每个按钮的 icon path。

toolbox.feature.brush.icon.clear

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.brush.icon.keep

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.brush.icon.lineY

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.brush.icon.lineX

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.brush.icon.polygon

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.brush.icon.rect

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.brush.type

使用的按钮,取值:

toolbox.feature.magicType

动态类型切换 示例:

feature: {
    magicType: {
        type: ['line', 'bar', 'stack', 'tiled']
    }
}

toolbox.feature.magicType.seriesIndex

各个类型对应的系列的列表。

toolbox.feature.magicType.option

各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项。

toolbox.feature.magicType.iconStyle

动态类型切换 icon 样式设置。

toolbox.feature.magicType.iconStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.magicType.iconStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.magicType.iconStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.magicType.iconStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.magicType.iconStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.magicType.iconStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.magicType.iconStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.magicType.iconStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.magicType.iconStyle.emphasis.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
)

toolbox.feature.magicType.iconStyle.normal.textAlign

文本对齐方式,'left' / 'right'

toolbox.feature.magicType.iconStyle.normal.textPosition

文本位置,'left' / 'right' / 'top' / 'bottom'

toolbox.feature.magicType.iconStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.magicType.iconStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.magicType.iconStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.magicType.iconStyle.normal.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.magicType.iconStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.magicType.iconStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.magicType.iconStyle.normal.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.magicType.iconStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.magicType.iconStyle.normal.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
)

toolbox.feature.magicType.icon

各个类型的 icon path,可以分别配置。

toolbox.feature.magicType.icon.tiled

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.magicType.icon.stack

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.magicType.icon.bar

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.magicType.icon.line

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.magicType.title

各个类型的标题文本,可以分别配置。

toolbox.feature.magicType.type

启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)。

toolbox.feature.magicType.show

是否显示该工具。

toolbox.feature.dataZoom

数据区域缩放。目前只支持直角坐标系的缩放。

toolbox.feature.dataZoom.yAxisIndex

指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 03 的y轴。

toolbox.feature.dataZoom.xAxisIndex

指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 03 的x轴。

toolbox.feature.dataZoom.iconStyle

数据区域缩放 icon 样式设置。

toolbox.feature.dataZoom.iconStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.dataZoom.iconStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.dataZoom.iconStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.dataZoom.iconStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.dataZoom.iconStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataZoom.iconStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.dataZoom.iconStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.dataZoom.iconStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.dataZoom.iconStyle.emphasis.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
)

toolbox.feature.dataZoom.iconStyle.normal.textAlign

文本对齐方式,'left' / 'right'

toolbox.feature.dataZoom.iconStyle.normal.textPosition

文本位置,'left' / 'right' / 'top' / 'bottom'

toolbox.feature.dataZoom.iconStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.dataZoom.iconStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.dataZoom.iconStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.dataZoom.iconStyle.normal.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.dataZoom.iconStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataZoom.iconStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.dataZoom.iconStyle.normal.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.dataZoom.iconStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.dataZoom.iconStyle.normal.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
)

toolbox.feature.dataZoom.icon

缩放和还原的 icon path。

toolbox.feature.dataZoom.icon.back

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.dataZoom.icon.zoom

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.dataZoom.title

缩放和还原的标题文本。

toolbox.feature.dataZoom.show

是否显示该工具。

toolbox.feature.dataView

数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。

toolbox.feature.dataView.buttonTextColor

按钮文本颜色。

toolbox.feature.dataView.buttonColor

按钮颜色。

toolbox.feature.dataView.textColor

文本颜色。

toolbox.feature.dataView.textareaBorderColor

数据视图浮层文本输入区边框颜色。

toolbox.feature.dataView.textareaColor

数据视图浮层文本输入区背景色。

toolbox.feature.dataView.backgroundColor

数据视图浮层背景色。

toolbox.feature.dataView.lang

数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']

toolbox.feature.dataView.contentToOption

(container:HTMLDomElement, option:Object) => Object

在使用 optionToContent 的情况下,如果支持数据编辑后的刷新,需要自行通过该函数实现组装 option 的逻辑。

toolbox.feature.dataView.optionToContent

(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;
}

toolbox.feature.dataView.readOnly

是否不可编辑(只读)。

toolbox.feature.dataView.iconStyle

数据视图 icon 样式设置。

toolbox.feature.dataView.iconStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.dataView.iconStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.dataView.iconStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.dataView.iconStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.dataView.iconStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataView.iconStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.dataView.iconStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.dataView.iconStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.dataView.iconStyle.emphasis.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
)

toolbox.feature.dataView.iconStyle.normal.textAlign

文本对齐方式,'left' / 'right'

toolbox.feature.dataView.iconStyle.normal.textPosition

文本位置,'left' / 'right' / 'top' / 'bottom'

toolbox.feature.dataView.iconStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.dataView.iconStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.dataView.iconStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.dataView.iconStyle.normal.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.dataView.iconStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.dataView.iconStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.dataView.iconStyle.normal.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.dataView.iconStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.dataView.iconStyle.normal.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
)

toolbox.feature.dataView.icon

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.dataView.show

是否显示该工具。

toolbox.feature.restore

配置项还原。

toolbox.feature.restore.iconStyle

还原 icon 样式设置。

toolbox.feature.restore.iconStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.restore.iconStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.restore.iconStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.restore.iconStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.restore.iconStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.restore.iconStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.restore.iconStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.restore.iconStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.restore.iconStyle.emphasis.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
)

toolbox.feature.restore.iconStyle.normal.textAlign

文本对齐方式,'left' / 'right'

toolbox.feature.restore.iconStyle.normal.textPosition

文本位置,'left' / 'right' / 'top' / 'bottom'

toolbox.feature.restore.iconStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.restore.iconStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.restore.iconStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.restore.iconStyle.normal.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.restore.iconStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.restore.iconStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.restore.iconStyle.normal.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.restore.iconStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.restore.iconStyle.normal.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
)

toolbox.feature.restore.icon

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.restore.show

是否显示该工具。

toolbox.feature.saveAsImage

保存为图片。

toolbox.feature.saveAsImage.pixelRatio

保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2。

toolbox.feature.saveAsImage.iconStyle

保存为图片 icon 样式设置。

toolbox.feature.saveAsImage.iconStyle.emphasis.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.saveAsImage.iconStyle.emphasis.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.saveAsImage.iconStyle.emphasis.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.saveAsImage.iconStyle.emphasis.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.saveAsImage.iconStyle.emphasis.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
)

toolbox.feature.saveAsImage.iconStyle.normal.textAlign

文本对齐方式,'left' / 'right'

toolbox.feature.saveAsImage.iconStyle.normal.textPosition

文本位置,'left' / 'right' / 'top' / 'bottom'

toolbox.feature.saveAsImage.iconStyle.normal.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetY

阴影垂直方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetX

阴影水平方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.normal.shadowColor

阴影颜色。支持的格式同color

toolbox.feature.saveAsImage.iconStyle.normal.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.saveAsImage.iconStyle.normal.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

toolbox.feature.saveAsImage.iconStyle.normal.borderWidth

描边线宽。为 0 时无描边。

toolbox.feature.saveAsImage.iconStyle.normal.borderColor

图形的描边颜色。支持的格式同 color

toolbox.feature.saveAsImage.iconStyle.normal.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
)

toolbox.feature.saveAsImage.icon

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.saveAsImage.show

是否显示该工具。

toolbox.feature.saveAsImage.excludeComponents

保存为图片时忽略的组件列表,默认忽略工具栏。

toolbox.feature.saveAsImage.backgroundColor

保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色。

toolbox.feature.saveAsImage.name

保存的文件名称,默认使用 title.text 作为名称。

toolbox.feature.saveAsImage.type

保存的图片格式。支持 'png''jpeg'

toolbox.showTitle

是否在鼠标 hover 的时候显示每个工具 icon 的标题。

toolbox.itemGap

工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。

toolbox.itemSize

工具栏 icon 的大小。

toolbox.orient

工具栏 icon 的布局朝向。

可选:

toolbox.show

是否显示工具栏组件。

tooltip

提示框组件。

tooltip.axisPointer

坐标轴指示器配置项,在 trigger'axis' 时有效。

tooltip.axisPointer.shadowStyle

axisPointer.type'shadow' 时有效。

tooltip.axisPointer.shadowStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

tooltip.axisPointer.shadowStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

tooltip.axisPointer.shadowStyle.shadowOffsetX

阴影水平方向上的偏移距离。

tooltip.axisPointer.shadowStyle.shadowColor

阴影颜色。支持的格式同color

tooltip.axisPointer.shadowStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

tooltip.axisPointer.shadowStyle.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
)

tooltip.axisPointer.crossStyle

axisPointer.type'cross' 时有效。

tooltip.axisPointer.crossStyle.textStyle

十字准星准星上的文字样式。

tooltip.axisPointer.crossStyle.textStyle.fontSize

文字的字体大小

tooltip.axisPointer.crossStyle.textStyle.fontFamily

文字的字体系列

tooltip.axisPointer.crossStyle.textStyle.fontWeight

文字字体的粗细

可选:

tooltip.axisPointer.crossStyle.textStyle.fontStyle

文字字体的风格

可选:

tooltip.axisPointer.crossStyle.textStyle.color

文字的颜色。

tooltip.axisPointer.crossStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

tooltip.axisPointer.crossStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

tooltip.axisPointer.crossStyle.shadowOffsetX

阴影水平方向上的偏移距离。

tooltip.axisPointer.crossStyle.shadowColor

阴影颜色。支持的格式同color

tooltip.axisPointer.crossStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

tooltip.axisPointer.crossStyle.type

线的类型。

可选:

tooltip.axisPointer.crossStyle.width

线宽。

tooltip.axisPointer.crossStyle.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
)

tooltip.axisPointer.lineStyle

axisPointer.type'line' 时有效。

tooltip.axisPointer.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

tooltip.axisPointer.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

tooltip.axisPointer.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

tooltip.axisPointer.lineStyle.shadowColor

阴影颜色。支持的格式同color

tooltip.axisPointer.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

tooltip.axisPointer.lineStyle.type

线的类型。

可选:

tooltip.axisPointer.lineStyle.width

线宽。

tooltip.axisPointer.lineStyle.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
)

tooltip.axisPointer.animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

tooltip.axisPointer.animationEasingUpdate

数据更新动画的缓动效果。

tooltip.axisPointer.animationDurationUpdate

数据更新动画的时长。

tooltip.axisPointer.animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

tooltip.axisPointer.animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

tooltip.axisPointer.animationDuration

初始动画的时长。

tooltip.axisPointer.animationThreshold = 2000

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

tooltip.axisPointer.animation

是否开启动画,默认开启。

tooltip.axisPointer.axis

指示器的坐标轴。可以是 'x', 'y', 'radius', 'angle'。默认取类目轴或者时间轴。

tooltip.axisPointer.type

指示器类型。

可选

tooltip.extraCssText

额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:

extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'

tooltip.textStyle

提示框浮层的文本样式。

tooltip.textStyle.fontSize

文字的字体大小

tooltip.textStyle.fontFamily

文字的字体系列

tooltip.textStyle.fontWeight

文字字体的粗细

可选:

tooltip.textStyle.fontStyle

文字字体的风格

可选:

tooltip.textStyle.color

文字的颜色。

tooltip.padding

提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

tooltip.borderWidth

提示框浮层的边框宽。

tooltip.borderColor

提示框浮层的边框颜色。

tooltip.backgroundColor

提示框浮层的背景颜色。

tooltip.formatter

提示框浮层内容格式器,支持字符串模板和回调函数两种形式。

  1. 字符串模板。

    模板变量有 {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}'
      
  2. 回调函数。

    回调函数格式:

     (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 传入上述的 tickethtml 更新提示框浮层内容。

    示例:

     formatter: function (params, ticket, callback) {
         $.get('detail?name=' + params.name, function (content) {
             callback(ticket, toHTML(content));
         });
         return 'Loading';
     }
    

tooltip.transitionDuration

提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动。

tooltip.position

提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。

可选:

tooltip.enterable

鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true

tooltip.hideDelay

浮层隐藏的延迟,单位为 ms,在 alwaysShowContenttrue 的时候无效。

tooltip.showDelay

浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn'mousemove' 时有效。

tooltip.alwaysShowContent

是否永远显示提示框内容,默认情况下在移出可触发提示框区域后 一定时间 后隐藏,设置为 true 可以保证一直显示提示框内容。

该属性为 ECharts 3.0 中新加。

tooltip.triggerOn

提示框触发的条件,可选:

该属性为 ECharts 3.0 中新加。

tooltip.trigger

触发类型。

可选:

tooltip.showContent

是否显示提示框浮层,默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false

tooltip.show

是否显示提示框组件,包括提示框浮层和 axisPointer

visualMap

visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。

视觉元素可以是:

visualMap 组件可以定义多个,从而可以同时对数据中的多个维度进行视觉映射。

visualMap 组件可以定义为 分段型(visualMapPiecewise)连续型(visualMapContinuous),通过 type 来区分。例如:

option = {
    visualMap: [
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 viusalMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};


✦ 视觉映射方式的配置 ✦

既然是『数据』到『视觉元素』的映射,visualMap 中可以指定数据的『哪个维度』(参见visualMap.dimension)映射到哪些『视觉元素』(参见visualMap.inRangevisualMap.outOfRange)中。


✦ 与 ECharts2 中 dataRange 的关系 ✦

visualMap 是由 ECharts2 中的 dataRange 组件改名以及扩展而来。ECharts3里 option 中的 dataRange 配置项仍然被兼容,会自动转换成 visualMap 配置项。在option中推荐写 visualMap 而非 dataRange


✦ 以下是visualMap各组件的详细介绍 ✦



visualMap.piecewise

分段型视觉映射组件(visualMapPiecewise)

(参考视觉映射组件(visualMap)的介绍

展现形式如下图:

分段型视觉映射组件,有三种模式:



visualMap.piecewise.formatter

标签的格式化工具。

formatter: function (value, value2) {
    return 'aaaa' + value + 'bbbb' + value2; // 范围标签显示内容。
}

visualMap.piecewise.textStyle.fontSize

visualMap 文字的字体大小

visualMap.piecewise.textStyle.fontFamily

visualMap 文字的字体系列

visualMap.piecewise.textStyle.fontWeight

visualMap 文字字体的粗细

可选:

visualMap.piecewise.textStyle.fontStyle

visualMap 文字字体的风格

可选:

visualMap.piecewise.textStyle.color

visualMap 文字的颜色。

visualMap.piecewise.color

这个配置项,是为了兼容 ECharts2 而存在,ECharts3 中已经不推荐使用。它的功能已经移到了 visualMap-piecewise.inRangevisualMap-piecewise.outOfRange 中。

如果要使用,则须注意,color属性中的顺序是由数值 ,但是 visualMap-piecewise.inRangevisualMap-piecewise.outOfRangecolor 的顺序,总是由数值 。二者不一致。

visualMap.piecewise.borderWidth

边框线宽,单位px。

visualMap.piecewise.borderColor

边框颜色。

visualMap.piecewise.backgroundColor

背景色。

visualMap.piecewise.padding

visualMap-piecewise内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

visualMap.piecewise.orient

如何放置 visualMap 组件,水平('horizontal')或者竖直('vertical')。

visualMap.piecewise.bottom

visualMap 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

visualMap.piecewise.right

visualMap 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

visualMap.piecewise.top

visualMap 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

visualMap.piecewise.left

visualMap 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

visualMap.piecewise.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

visualMap.piecewise.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

visualMap.piecewise.controller

visualMap 组件中,控制器inRange outOfRange 设置。如果没有这个 controller 设置,控制器 会使用外层的 inRange outOfRange 设置;如果有这个 controller 设置,则会采用这个设置。适用于一些控制器视觉效果需要特殊定制或调整的场景。

visualMap.piecewise.controller.outOfRange

定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.piecewise.controller.inRange

定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.piecewise.outOfRange

定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.piecewise.inRange

定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.piecewise.hoverLink

打开 hoverLink 功能时,鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮。

反之,鼠标悬浮到图表中的图形元素上时,在 visualMap 组件的相应位置会有三角提示其所对应的数值。

visualMap.piecewise.seriesIndex

指定取哪个系列的数据,即哪个系列的 series.data

默认取所有系列。

visualMap.piecewise.dimension

指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 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.show

是否显示 visualMap-piecewise 组件。如果设置为 false,不会显示,但是数据映射的功能还存在。

visualMap.piecewise.itemSymbol

默认的图形。可选值为: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

symbol的设置参见 visualMap-piecewise.inRangevisualMap-piecewise.outOfRange

当他们没有进行指定时,取此 itemSymbol 为默认值(但是只在 visualMap 组件上使用,不在 chart 中使用)。

visualMap.piecewise.itemGap

每两个图元之间的间隔距离,单位为px。

visualMap.piecewise.textGap

两端文字主体之间的距离,单位为px。参见 visualMap-piecewise.text

visualMap.piecewise.text

两端的文本,如['High', 'Low']。参见例子

text 中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse

兼容 ECharts2,当有 text 时,label不显示。

visualMap.piecewise.align

指定组件中图形(比如小方块)和文字的摆放关系,可选值为:

visualMap.piecewise.itemHeight

图形的高度,即每个小块的高度。

visualMap.piecewise.itemWidth

图形的宽度,即每个小块的宽度。

visualMap.piecewise.precision

数据展示的小数精度。

visualMap.piecewise.inverse

是否反转。

其实没有那么复杂,使用时候,试试就知道了。

visualMap.piecewise.selectedMode

选择模式,可以是:

visualMap.piecewise.maxOpen

typepiecewise 且使用 min/max/splitNumber 时,此参数有效。当值为 true 时,界面上会额外多出一个『> max』的选块。

visualMap.piecewise.minOpen

typepiecewise 且使用 min/max/splitNumber 时,此参数有效。当值为 true 时,界面上会额外多出一个『< min』的选块。

visualMap.piecewise.max

指定 visualMapPiecewise 组件的最大值。参见 visualMap-piecewise.splitNumber

连续型数据自定义分段 模式(即 visualMap-piecewise.pieces 被使用)或 离散数据根据类别分段 模式(即 visualMap-piecewise.categories 被使用),maxmin 不需指定。

连续型数据平均分段 模式(即 (that is, when visualMap-piecewise.splitNumber 被使用时)需指定 minmax,如果不指定,则默认为 [0, 200](注意并不是默认为 series.data 的 dataMindataMax)。

visualMap.piecewise.min

指定 visualMapPiecewise 组件的最小值。

连续型数据自定义分段 模式(即 visualMap-piecewise.pieces 被使用)或 离散数据根据类别分段 模式(即 visualMap-piecewise.categories 被使用)时,maxmin 不需指定。

连续型数据平均分段 模式(即 (that is, when visualMap-piecewise.splitNumber 被使用时)需指定 minmax,如果不指定,则默认为 [0, 200](注意并不是默认为 series.data 的 dataMindataMax)。

visualMap.piecewise.categories

用于表示离散型数据(或可以称为类别型数据、枚举型数据)的全集。

当所指定的维度(visualMap-piecewise.dimension)的数据为离散型数据时,例如数据值为『优』、『良』等,那么可如下配置:

categories: ['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],

参见示例

categories 中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse

visualMap.piecewise.pieces

自定义『分段式视觉映射组件(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 属性有:

参见示例

(注:在 ECharts2 中,pieces 叫做 splitList。现在后者仍兼容,但推荐使用 pieces

pieces 中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse

visualMap.piecewise.splitNumber

对于连续型数据,自动平均切分成几段。默认为5段。 连续数据的范围需要 maxmin 来指定。

如果设置了 visualMap-piecewise.pieces 或者 visualMap-piecewise.categories,则 splitNumber 无效。

visualMap.piecewise.type

类型为分段型。

visualMap.continuous

连续型视觉映射组件(visualMapContinuous)

(参考视觉映射组件(visualMap)的介绍

展现形式如下图:

visualMapContinuous中,可以通过 visualMap.calculable 来显示或隐藏手柄(手柄能拖拽改变值域)。



visualMap.continuous.formatter

标签的格式化工具。

formatter: function (value) {
    return 'aaaa' + value; // 范围标签显示内容。
}

visualMap.continuous.textStyle.fontSize

visualMap 文字的字体大小

visualMap.continuous.textStyle.fontFamily

visualMap 文字的字体系列

visualMap.continuous.textStyle.fontWeight

visualMap 文字字体的粗细

可选:

visualMap.continuous.textStyle.fontStyle

visualMap 文字字体的风格

可选:

visualMap.continuous.textStyle.color

visualMap 文字的颜色。

visualMap.continuous.color

这个配置项,是为了兼容 ECharts2 而存在,ECharts3 中已经不推荐使用。它的功能已经移到了 visualMap-continuous.inRangevisualMap-continuous.outOfRange 中。

如果要使用,则须注意,color属性中的顺序是由数值 ,但是 visualMap-continuous.inRangevisualMap-continuous.outOfRangecolor 的顺序,总是由数值 。二者不一致。

visualMap.continuous.borderWidth

边框线宽,单位px。

visualMap.continuous.borderColor

边框颜色。

visualMap.continuous.backgroundColor

背景色。

visualMap.continuous.padding

visualMap-continuous内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

visualMap.continuous.orient

如何放置 visualMap 组件,水平('horizontal')或者竖直('vertical')。

visualMap.continuous.bottom

visualMap 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

visualMap.continuous.right

visualMap 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

visualMap.continuous.top

visualMap 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

visualMap.continuous.left

visualMap 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

visualMap.continuous.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

visualMap.continuous.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

visualMap.continuous.controller

visualMap 组件中,控制器inRange outOfRange 设置。如果没有这个 controller 设置,控制器 会使用外层的 inRange outOfRange 设置;如果有这个 controller 设置,则会采用这个设置。适用于一些控制器视觉效果需要特殊定制或调整的场景。

visualMap.continuous.controller.outOfRange

定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.continuous.controller.inRange

定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.continuous.outOfRange

定义 在选中范围外 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.continuous.inRange

定义 在选中范围中 的视觉元素。(用户可以和 visualMap 组件交互,用鼠标或触摸选择范围)

可选的视觉元素有:


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]
            }
        }
    }
]

✦ 关于视觉通道 ✦

✦ 视觉通道 -- 线性映射 ✦

线性映射 表示 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 中的 dataMindataMax

如何设定为线性映射?以下情况时,会设定为 线性映射

视觉通道的值(visual value):

visual value 的取值范围:

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

如何设定为查表映射?当 visualMapvisualMap-piecewise 且 设置了 visualMap-piecewise.categories 时,会进行查表映射。

视觉通道的值(visual value):一般使用 ObjectArray 来表示,例如:

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']}
    }
});

但请注意:

// 不推荐这样做(尽管也能达到和上面的例子相同的结果):
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.continuous.hoverLink

打开 hoverLink 功能时,鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮。

反之,鼠标悬浮到图表中的图形元素上时,在 visualMap 组件的相应位置会有三角提示其所对应的数值。

visualMap.continuous.seriesIndex

指定取哪个系列的数据,即哪个系列的 series.data

默认取所有系列。

visualMap.continuous.dimension

指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 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.show

是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在。

visualMap.continuous.textGap

两端文字主体之间的距离,单位为px。参见 visualMap-continuous.text

visualMap.continuous.text

两端的文本,如 ['High', 'Low']参见例子

text 中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse

visualMap.continuous.align

指定组件中手柄和文字的摆放位置,可选值为:

visualMap.continuous.itemHeight

图形的高度,即长条的高度。

visualMap.continuous.itemWidth

图形的宽度,即长条的宽度。

visualMap.continuous.precision

数据展示的小数精度,默认为0,无小数点。

visualMap.continuous.inverse

是否反转 visualMap 组件。

inversefalse时,数据大小的位置规则,和直角坐标系相同,即:

inversetrue时,相反。

visualMap.continuous.realtime

拖拽时,是否实时更新。

visualMap.continuous.calculable

是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。

(注:为兼容 ECharts2,当 visualMap.type 未指定时,假如设置了 'calculable',则type自动被设置为'continuous',无视 visualMap-piecewise.splitNumber 等设置。所以,建议使用者不要不指定 visualMap.type,否则表意不清晰。)

visualMap.continuous.range

指定手柄对应数值的位置。range 应在 min max 范围内。例如:

chart.setOption({
    visualMap: {
        min: 0,
        max: 100,
        // 两个手柄对应的数值是 4 和 15
        range: [4, 15],
        ...
    }
});

setOption 改变 min、max 时 range 的自适应

例如:
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]。
例如:
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,不会为 nullundefined

visualMap.continuous.max

指定 visualMapContinuous 组件的允许的最大值。'max' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。

visualMap.continuous.min

指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。

visualMap.continuous.type

类型为连续型。

dataZoom

dataZoom 组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。

现在支持这几种类型的 dataZoom 组件:

如下例子:



✦ dataZoom 和 数轴的关系 ✦

dataZoom 主要是对 数轴(axis) 进行操作(控制数轴的显示范围,或称窗口(window))。

可以通过 dataZoom.xAxisIndexdataZoom.yAxisIndexdataZoom.radiusAxisIndexdataZoom.angleAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

dataZoom 组件可 同时存在多个,起到共同控制的作用。如果多个 dataZoom 组件共同控制同一个数轴,他们会自动联动。



✦ dataZoom 组件如何影响轴和数据 ✦

dataZoom 的运行原理是通过 数据过滤 以及在内部设置轴的显示窗口来达到 数据窗口缩放 的效果。

数据过滤模式(dataZoom.filterMode)的设置不同,效果也不同。

可选值为:

如何设置,由用户根据场景和需求自己决定。经验来说:

下面是个具体例子:

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]
        ]
    }
}

上例中,dataZoomXfilterMode 设置为 '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 轴的值有 2480911,过滤后,只剩下 249,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 minmax 固定其显示范围的话)。

所以,filterMode: 'filter' 的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。

再从头来,上例中 dataZoomYfilterMode 设置为 '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 轴的值仍然全部保留不受影响,为 129031。那么用户对 dataZoomY 的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。

如下面的例子:

另外,如果在任一个数轴上设置了 minmax(如设置 yAxis: {min: 0, max: 400}),那么这个数轴无论如何也不会被其他数轴的 dataZoom 行为影响了。



✦ 数据窗口的设置 ✦

dataZoom 的数据窗口范围的设置,目前支持两种形式:

注意:当使用百分比形式指定 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]
        ]
    }
}

在上例中,dataZoomYstart: 20, end: 80 到底表示什么意思?



下面是详细介绍:

dataZoom.slider

滑动条型数据区域缩放组件(dataZoomSlider)

(参考数据区域缩放组件(dataZoom)的介绍



dataZoom.slider.bottom

dataZoom-slider组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

dataZoom.slider.right

dataZoom-slider组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

dataZoom.slider.top

dataZoom-slider组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

dataZoom.slider.left

dataZoom-slider组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

dataZoom.slider.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

dataZoom.slider.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

dataZoom.slider.throttle

设置触发视图刷新的频率。单位为毫秒(ms)。

如果 animation 设为 trueanimationDurationUpdate 大于 0,可以保持 throttle 为默认值 100(或者设置为大于 0 的值),否则拖拽时有可能画面感觉卡顿。

如果 animation 设为 false 或者 animationDurationUpdate 设为 0,且在数据量不大时,拖拽时画面感觉卡顿,可以把尝试把 throttle 设为 0 来改善。

dataZoom.slider.zoomLock

是否锁定选择区域(或叫做数据窗口)的大小。

如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。

dataZoom.slider.orient

布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。

可选值为:

dataZoom.slider.endValue

数据窗口范围的结束数值。如果设置了 dataZoom-slider.endendValue 失效。

dataZoom-slider.startValuedataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。

注意,如果轴的类型为 category,则 endValue 即可以设置为 axis.data 数组的 index,也可以设置为数组值本身。 但是如果设置为数组值本身,会在内部自动转化为数组的 index。

dataZoom.slider.startValue

数据窗口范围的起始数值。如果设置了 dataZoom-slider.startstartValue 失效。

dataZoom-slider.startValuedataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。

注意,如果轴的类型为 category,则 startValue 既可以设置为 axis.data 数组的 index,也可以设置为数组值本身。 但是如果设置为数组值本身,会在内部自动转化为数组的 index。

dataZoom.slider.end

数据窗口范围的结束百分比。范围是:0 ~ 100。

dataZoom-slider.startdataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。

dataZoom.slider.start

数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。

dataZoom-slider.startdataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。

dataZoom.slider.filterMode

dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同,效果也不同。

可选值为:

如何设置,由用户根据场景和需求自己决定。经验来说:

下面是个具体例子:

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]
        ]
    }
}

上例中,dataZoomXfilterMode 设置为 '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 轴的值有 2480911,过滤后,只剩下 249,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 minmax 固定其显示范围的话)。

所以,filterMode: 'filter' 的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。

再从头来,上例中 dataZoomYfilterMode 设置为 '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 轴的值仍然全部保留不受影响,为 129031。那么用户对 dataZoomY 的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。

如下面的例子:

dataZoom.slider.angleAxisIndex

设置 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.radiusAxisIndex

设置 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.yAxisIndex

设置 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.xAxisIndex

设置 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.slider.textStyle.fontSize

dataZoom 文字的字体大小

dataZoom.slider.textStyle.fontFamily

dataZoom 文字的字体系列

dataZoom.slider.textStyle.fontWeight

dataZoom 文字字体的粗细

可选:

dataZoom.slider.textStyle.fontStyle

dataZoom 文字字体的风格

可选:

dataZoom.slider.textStyle.color

dataZoom 文字的颜色。

dataZoom.slider.realtime

拖动时,是否实时更新系列的视图。如果设置为 false,则只在拖拽结束的时候更新。

dataZoom.slider.showDataShadow

是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。

dataZoom.slider.showDetail

是否显示detail,即拖拽时候显示详细数值信息。

dataZoom.slider.labelFormatter

显示的label的格式化器。

/**
 * @param {*} value 如果 axis.type 为 'category',则 `value` 为 axis.data 的 index。
 *                  否则 `value` 是当前值。
 * @param {strign} valueStr 内部格式化的结果。
 * @return {string} 返回最终的label内容。
 */
labelFormatter: function (value) {
    return 'aaa' + value + 'bbb';
}

dataZoom.slider.labelPrecision

显示label的小数精度。默认根据数据自动决定。

dataZoom.slider.handleStyle

手柄的样式配置,见 示例 area-simple

dataZoom.slider.handleStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

dataZoom.slider.handleStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

dataZoom.slider.handleStyle.shadowOffsetX

阴影水平方向上的偏移距离。

dataZoom.slider.handleStyle.shadowColor

阴影颜色。支持的格式同color

dataZoom.slider.handleStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

dataZoom.slider.handleStyle.borderType

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

dataZoom.slider.handleStyle.borderWidth

描边线宽。为 0 时无描边。

dataZoom.slider.handleStyle.borderColor

图形的描边颜色。支持的格式同 color

dataZoom.slider.handleStyle.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.slider.handleSize

控制手柄的尺寸,可以是像素大小,也可以是相对于 dataZoom 组件宽度的百分比,默认跟 dataZoom 宽度相同。

dataZoom.slider.handleIcon

手柄的 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

dataZoom.slider.borderColor

边框颜色。

dataZoom.slider.fillerColor

选中范围的填充颜色。

dataZoom.slider.dataBackground

数据阴影的样式。

dataZoom.slider.dataBackground.areaStyle

阴影的填充样式

dataZoom.slider.dataBackground.areaStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

dataZoom.slider.dataBackground.areaStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

dataZoom.slider.dataBackground.areaStyle.shadowOffsetX

阴影水平方向上的偏移距离。

dataZoom.slider.dataBackground.areaStyle.shadowColor

阴影颜色。支持的格式同color

dataZoom.slider.dataBackground.areaStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

dataZoom.slider.dataBackground.areaStyle.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.slider.dataBackground.lineStyle

阴影的线条样式

dataZoom.slider.dataBackground.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

dataZoom.slider.dataBackground.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

dataZoom.slider.dataBackground.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

dataZoom.slider.dataBackground.lineStyle.shadowColor

阴影颜色。支持的格式同color

dataZoom.slider.dataBackground.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

dataZoom.slider.dataBackground.lineStyle.type

线的类型。

可选:

dataZoom.slider.dataBackground.lineStyle.width

线宽。

dataZoom.slider.dataBackground.lineStyle.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.slider.backgroundColor

组件的背景颜色。

dataZoom.slider.show

是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。

dataZoom.inside

内置型数据区域缩放组件(dataZoomInside)

(参考数据区域缩放组件(dataZoom)的介绍

所谓『内置』,即内置在坐标系中。



dataZoom.inside.throttle

设置触发视图刷新的频率。单位为毫秒(ms)。

如果 animation 设为 trueanimationDurationUpdate 大于 0,可以保持 throttle 为默认值 100(或者设置为大于 0 的值),否则拖拽时有可能画面感觉卡顿。

如果 animation 设为 false 或者 animationDurationUpdate 设为 0,且在数据量不大时,拖拽时画面感觉卡顿,可以把尝试把 throttle 设为 0 来改善。

dataZoom.inside.zoomLock

是否锁定选择区域(或叫做数据窗口)的大小。

如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。

dataZoom.inside.orient

布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。

可选值为:

dataZoom.inside.endValue

数据窗口范围的结束数值。如果设置了 dataZoom-inside.endendValue 失效。

dataZoom-inside.startValuedataZoom-inside.endValue 共同用 绝对数值 的形式定义了数据窗口范围。

注意,如果轴的类型为 category,则 endValue 即可以设置为 axis.data 数组的 index,也可以设置为数组值本身。 但是如果设置为数组值本身,会在内部自动转化为数组的 index。

dataZoom.inside.startValue

数据窗口范围的起始数值。如果设置了 dataZoom-inside.startstartValue 失效。

dataZoom-inside.startValuedataZoom-inside.endValue 共同用 绝对数值 的形式定义了数据窗口范围。

注意,如果轴的类型为 category,则 startValue 既可以设置为 axis.data 数组的 index,也可以设置为数组值本身。 但是如果设置为数组值本身,会在内部自动转化为数组的 index。

dataZoom.inside.end

数据窗口范围的结束百分比。范围是:0 ~ 100。

dataZoom-inside.startdataZoom-inside.end 共同用 百分比 的形式定义了数据窗口范围。

dataZoom.inside.start

数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。

dataZoom-inside.startdataZoom-inside.end 共同用 百分比 的形式定义了数据窗口范围。

dataZoom.inside.filterMode

dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同,效果也不同。

可选值为:

如何设置,由用户根据场景和需求自己决定。经验来说:

下面是个具体例子:

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]
        ]
    }
}

上例中,dataZoomXfilterMode 设置为 '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 轴的值有 2480911,过滤后,只剩下 249,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 minmax 固定其显示范围的话)。

所以,filterMode: 'filter' 的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。

再从头来,上例中 dataZoomYfilterMode 设置为 '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 轴的值仍然全部保留不受影响,为 129031。那么用户对 dataZoomY 的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。

如下面的例子:

dataZoom.inside.angleAxisIndex

设置 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.radiusAxisIndex

设置 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.yAxisIndex

设置 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.xAxisIndex

设置 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
        }
    ]
}

dataZoom.inside.disabled

是否停止组件的功能。

radar

雷达图坐标系组件,只适用于雷达图。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件,为避免混淆,雷达图使用 radar 组件作为其坐标系。

雷达图坐标系与极坐标系不同的是它的每一个轴(indicator 指示器)都是一个单独的维度,可以通过 nameaxisLineaxisTickaxisLabelsplitLinesplitArea 几个配置项配置指示器坐标轴线的样式。

下面是一个 radar 组件的一个自定义例子。

radar.indicator

雷达图的指示器,用来指定雷达图中的多个变量(维度),如下示例。

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}
]

radar.splitArea

坐标轴在 grid 区域中的分隔区域,默认不显示。

radar.splitArea.areaStyle

分隔区域的样式设置。

radar.splitArea.areaStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radar.splitArea.areaStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radar.splitArea.areaStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radar.splitArea.areaStyle.shadowColor

阴影颜色。支持的格式同color

radar.splitArea.areaStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.splitArea.areaStyle.color

分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。

radar.splitArea.show

是否显示分隔区域。

radar.splitLine

坐标轴在 grid 区域中的分隔线。

radar.splitLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radar.splitLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radar.splitLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radar.splitLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

radar.splitLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.splitLine.lineStyle.type

分隔线线的类型。

可选:

radar.splitLine.lineStyle.width

分隔线线宽。

radar.splitLine.lineStyle.color

分隔线颜色,可以设置成单个颜色。

也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。

示例

splitLine: {
    lineStyle: {
        // 使用深浅的间隔色
        color: ['#aaa', '#ddd']
    }
}

radar.splitLine.show

是否显示分隔线。默认数值轴显示,类目轴不显示。

radar.axisLabel

坐标轴刻度标签的相关设置。

radar.axisLabel.textStyle.fontSize

文字的字体大小

radar.axisLabel.textStyle.fontFamily

文字的字体系列

radar.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

radar.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

radar.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

radar.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

radar.axisLabel.margin

刻度标签与轴线之间的距离。

radar.axisLabel.rotate

刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

radar.axisLabel.inside

刻度标签是否朝内,默认朝外。

radar.axisLabel.show

是否显示刻度标签。

radar.axisTick

坐标轴刻度相关设置。

radar.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radar.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radar.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radar.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

radar.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

radar.axisTick.lineStyle.width

坐标轴刻度线宽。

radar.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

radar.axisTick.length

坐标轴刻度的长度。

radar.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

radar.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

radar.axisTick.show

是否显示坐标轴刻度。

radar.axisLine

坐标轴轴线相关设置。

radar.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radar.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radar.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radar.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

radar.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radar.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

radar.axisLine.lineStyle.width

坐标轴线线宽。

radar.axisLine.lineStyle.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
)

radar.axisLine.show

是否显示坐标轴轴线。

radar.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

radar.silent

坐标轴是否是静态无法交互。

radar.scale

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

radar.shape

雷达图绘制类型,支持 'polygon''circle'

radar.splitNumber

指示器轴的分割段数。

radar.nameGap

指示器名称和指示器轴的距离。

radar.name

雷达图每个指示器名称的配置项。

radar.name.textStyle.fontSize

文字的字体大小

radar.name.textStyle.fontFamily

文字的字体系列

radar.name.textStyle.fontWeight

文字字体的粗细

可选:

radar.name.textStyle.fontStyle

文字字体的风格

可选:

radar.name.textStyle.color

文字的颜色。

radar.name.formatter

指示器名称显示的格式器。支持字符串和回调函数,如下示例:

// 使用字符串模板,模板变量为指示器名称 {value}
formatter: '【{value}】'
// 使用回调函数,第一个参数是指示器名称,第二个参数是指示器配置项
formatter: function (value, indicator) {
    return '【' + value + '】';
}

radar.name.show

是否显示指示器名称。

radar.startAngle

坐标系起始角度,也就是第一个指示器轴的角度。

radar.radius

的半径,数组的第一项是内半径,第二项是外半径。

支持设置成百分比,相对于容器高宽中较小的一项的一半。

radar.center

的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。

支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。

使用示例:

// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

radar.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

radar.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

angleAxis

极坐标系的角度轴。

angleAxis.z

角度轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

angleAxis.zlevel

角度轴所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

angleAxis.data

类目数据,在类目轴(type: 'category')中有效。

示例:

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

angleAxis.splitArea

坐标轴在 grid 区域中的分隔区域,默认不显示。

angleAxis.splitArea.areaStyle

分隔区域的样式设置。

angleAxis.splitArea.areaStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

angleAxis.splitArea.areaStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

angleAxis.splitArea.areaStyle.shadowOffsetX

阴影水平方向上的偏移距离。

angleAxis.splitArea.areaStyle.shadowColor

阴影颜色。支持的格式同color

angleAxis.splitArea.areaStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.splitArea.areaStyle.color

分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。

angleAxis.splitArea.show

是否显示分隔区域。

angleAxis.splitArea.interval

坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

angleAxis.splitLine

坐标轴在 grid 区域中的分隔线。

angleAxis.splitLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

angleAxis.splitLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

angleAxis.splitLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

angleAxis.splitLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

angleAxis.splitLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.splitLine.lineStyle.type

分隔线线的类型。

可选:

angleAxis.splitLine.lineStyle.width

分隔线线宽。

angleAxis.splitLine.lineStyle.color

分隔线颜色,可以设置成单个颜色。

也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。

示例

splitLine: {
    lineStyle: {
        // 使用深浅的间隔色
        color: ['#aaa', '#ddd']
    }
}

angleAxis.splitLine.interval

坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

angleAxis.splitLine.show

是否显示分隔线。默认数值轴显示,类目轴不显示。

angleAxis.axisLabel

坐标轴刻度标签的相关设置。

angleAxis.axisLabel.textStyle.fontSize

文字的字体大小

angleAxis.axisLabel.textStyle.fontFamily

文字的字体系列

angleAxis.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

angleAxis.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

angleAxis.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

angleAxis.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

angleAxis.axisLabel.margin

刻度标签与轴线之间的距离。

angleAxis.axisLabel.inside

刻度标签是否朝内,默认朝外。

angleAxis.axisLabel.interval

坐标轴刻度标签的显示间隔,在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

angleAxis.axisLabel.show

是否显示刻度标签。

angleAxis.axisTick

坐标轴刻度相关设置。

angleAxis.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

angleAxis.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

angleAxis.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

angleAxis.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

angleAxis.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

angleAxis.axisTick.lineStyle.width

坐标轴刻度线宽。

angleAxis.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

angleAxis.axisTick.length

坐标轴刻度的长度。

angleAxis.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

angleAxis.axisTick.interval

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

angleAxis.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

angleAxis.axisTick.show

是否显示坐标轴刻度。

angleAxis.axisLine

坐标轴轴线相关设置。

angleAxis.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

angleAxis.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

angleAxis.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

angleAxis.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

angleAxis.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

angleAxis.axisLine.lineStyle.width

坐标轴线线宽。

angleAxis.axisLine.lineStyle.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
)

angleAxis.axisLine.show

是否显示坐标轴轴线。

angleAxis.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

angleAxis.silent

坐标轴是否是静态无法交互。

angleAxis.logBase

对数轴的底数,只在对数轴中(type: 'log')有效。

angleAxis.interval

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 minmax 强制设定刻度划分,一般不建议使用。

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

angleAxis.minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

{
    minInterval: 1
}

只在数值轴中(type: 'value')有效。

angleAxis.splitNumber

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

angleAxis.scale

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 minmax 之后该配置项无效。

angleAxis.max

坐标轴刻度最大值,在类目轴中无效。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

angleAxis.min

坐标轴刻度最小值,在类目轴中无效。

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

angleAxis.boundaryGap

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 truefalse。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 minmax 后无效。 示例:

boundaryGap: ['20%', '20%']

angleAxis.type

坐标轴类型。

可选:

angleAxis.clockwise

刻度增长是否按顺时针,默认顺时针。

如下示例是 clockwise 为 false (逆时针)的效果:

angleAxis.startAngle

起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。

如下示例是 startAngle 为 45 的效果:

angleAxis.polarIndex

角度轴所在的极坐标系的索引,默认使用第一个极坐标系。

radiusAxis

极坐标系的径向轴。

radiusAxis.z

半径轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

radiusAxis.zlevel

半径轴所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

radiusAxis.data

类目数据,在类目轴(type: 'category')中有效。

示例:

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

radiusAxis.splitArea

坐标轴在 grid 区域中的分隔区域,默认不显示。

radiusAxis.splitArea.areaStyle

分隔区域的样式设置。

radiusAxis.splitArea.areaStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radiusAxis.splitArea.areaStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radiusAxis.splitArea.areaStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radiusAxis.splitArea.areaStyle.shadowColor

阴影颜色。支持的格式同color

radiusAxis.splitArea.areaStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.splitArea.areaStyle.color

分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。

radiusAxis.splitArea.show

是否显示分隔区域。

radiusAxis.splitArea.interval

坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

radiusAxis.splitLine

坐标轴在 grid 区域中的分隔线。

radiusAxis.splitLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radiusAxis.splitLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radiusAxis.splitLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radiusAxis.splitLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

radiusAxis.splitLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.splitLine.lineStyle.type

分隔线线的类型。

可选:

radiusAxis.splitLine.lineStyle.width

分隔线线宽。

radiusAxis.splitLine.lineStyle.color

分隔线颜色,可以设置成单个颜色。

也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。

示例

splitLine: {
    lineStyle: {
        // 使用深浅的间隔色
        color: ['#aaa', '#ddd']
    }
}

radiusAxis.splitLine.interval

坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

radiusAxis.splitLine.show

是否显示分隔线。默认数值轴显示,类目轴不显示。

radiusAxis.axisLabel

坐标轴刻度标签的相关设置。

radiusAxis.axisLabel.textStyle.fontSize

文字的字体大小

radiusAxis.axisLabel.textStyle.fontFamily

文字的字体系列

radiusAxis.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

radiusAxis.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

radiusAxis.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

radiusAxis.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

radiusAxis.axisLabel.margin

刻度标签与轴线之间的距离。

radiusAxis.axisLabel.rotate

刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

radiusAxis.axisLabel.inside

刻度标签是否朝内,默认朝外。

radiusAxis.axisLabel.interval

坐标轴刻度标签的显示间隔,在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

radiusAxis.axisLabel.show

是否显示刻度标签。

radiusAxis.axisTick

坐标轴刻度相关设置。

radiusAxis.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radiusAxis.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radiusAxis.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radiusAxis.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

radiusAxis.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

radiusAxis.axisTick.lineStyle.width

坐标轴刻度线宽。

radiusAxis.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

radiusAxis.axisTick.length

坐标轴刻度的长度。

radiusAxis.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

radiusAxis.axisTick.interval

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

radiusAxis.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

radiusAxis.axisTick.show

是否显示坐标轴刻度。

radiusAxis.axisLine

坐标轴轴线相关设置。

radiusAxis.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

radiusAxis.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

radiusAxis.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

radiusAxis.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

radiusAxis.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

radiusAxis.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

radiusAxis.axisLine.lineStyle.width

坐标轴线线宽。

radiusAxis.axisLine.lineStyle.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
)

radiusAxis.axisLine.show

是否显示坐标轴轴线。

radiusAxis.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

radiusAxis.silent

坐标轴是否是静态无法交互。

radiusAxis.logBase

对数轴的底数,只在对数轴中(type: 'log')有效。

radiusAxis.interval

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 minmax 强制设定刻度划分,一般不建议使用。

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

radiusAxis.minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

{
    minInterval: 1
}

只在数值轴中(type: 'value')有效。

radiusAxis.splitNumber

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

radiusAxis.scale

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 minmax 之后该配置项无效。

radiusAxis.max

坐标轴刻度最大值,在类目轴中无效。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

radiusAxis.min

坐标轴刻度最小值,在类目轴中无效。

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

radiusAxis.boundaryGap

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 truefalse。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 minmax 后无效。 示例:

boundaryGap: ['20%', '20%']

radiusAxis.inverse

是否是反向坐标轴。ECharts 3 中新加。

radiusAxis.nameRotate

坐标轴名字旋转,角度值。

radiusAxis.nameGap

坐标轴名称与轴线之间的距离。

radiusAxis.nameTextStyle

坐标轴名称的文字样式。

radiusAxis.nameTextStyle.fontSize

坐标轴名称文字的字体大小

radiusAxis.nameTextStyle.fontFamily

坐标轴名称文字的字体系列

radiusAxis.nameTextStyle.fontWeight

坐标轴名称文字字体的粗细

可选:

radiusAxis.nameTextStyle.fontStyle

坐标轴名称文字字体的风格

可选:

radiusAxis.nameTextStyle.color

坐标轴名称的颜色,默认取 axisLine.lineStyle.color

radiusAxis.nameLocation

坐标轴名称显示位置。

可选:

radiusAxis.name

坐标轴名称。

radiusAxis.type

坐标轴类型。

可选:

radiusAxis.polarIndex

径向轴所在的极坐标系的索引,默认使用第一个极坐标系。

polar

极坐标系,可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴

示例:

polar.radius

极坐标系的半径,数组的第一项是内半径,第二项是外半径。

支持设置成百分比,相对于容器高宽中较小的一项的一半。

polar.center

极坐标系的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。

支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。

使用示例:

// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

polar.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

polar.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

yAxis

直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

yAxis.z

Y 轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

yAxis.zlevel

Y 轴所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

yAxis.data

类目数据,在类目轴(type: 'category')中有效。

示例:

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

yAxis.splitArea

坐标轴在 grid 区域中的分隔区域,默认不显示。

yAxis.splitArea.areaStyle

分隔区域的样式设置。

yAxis.splitArea.areaStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

yAxis.splitArea.areaStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

yAxis.splitArea.areaStyle.shadowOffsetX

阴影水平方向上的偏移距离。

yAxis.splitArea.areaStyle.shadowColor

阴影颜色。支持的格式同color

yAxis.splitArea.areaStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.splitArea.areaStyle.color

分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。

yAxis.splitArea.show

是否显示分隔区域。

yAxis.splitArea.interval

坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

yAxis.splitLine

坐标轴在 grid 区域中的分隔线。

yAxis.splitLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

yAxis.splitLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

yAxis.splitLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

yAxis.splitLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

yAxis.splitLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.splitLine.lineStyle.type

分隔线线的类型。

可选:

yAxis.splitLine.lineStyle.width

分隔线线宽。

yAxis.splitLine.lineStyle.color

分隔线颜色,可以设置成单个颜色。

也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。

示例

splitLine: {
    lineStyle: {
        // 使用深浅的间隔色
        color: ['#aaa', '#ddd']
    }
}

yAxis.splitLine.interval

坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

yAxis.splitLine.show

是否显示分隔线。默认数值轴显示,类目轴不显示。

yAxis.axisLabel

坐标轴刻度标签的相关设置。

yAxis.axisLabel.textStyle.fontSize

文字的字体大小

yAxis.axisLabel.textStyle.fontFamily

文字的字体系列

yAxis.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

yAxis.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

yAxis.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

yAxis.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

yAxis.axisLabel.margin

刻度标签与轴线之间的距离。

yAxis.axisLabel.rotate

刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

yAxis.axisLabel.inside

刻度标签是否朝内,默认朝外。

yAxis.axisLabel.interval

坐标轴刻度标签的显示间隔,在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

yAxis.axisLabel.show

是否显示刻度标签。

yAxis.axisTick

坐标轴刻度相关设置。

yAxis.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

yAxis.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

yAxis.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

yAxis.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

yAxis.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

yAxis.axisTick.lineStyle.width

坐标轴刻度线宽。

yAxis.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

yAxis.axisTick.length

坐标轴刻度的长度。

yAxis.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

yAxis.axisTick.interval

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

yAxis.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

yAxis.axisTick.show

是否显示坐标轴刻度。

yAxis.axisLine

坐标轴轴线相关设置。

yAxis.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

yAxis.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

yAxis.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

yAxis.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

yAxis.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

yAxis.axisLine.lineStyle.width

坐标轴线线宽。

yAxis.axisLine.lineStyle.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
)

yAxis.axisLine.onZero

X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。

yAxis.axisLine.show

是否显示坐标轴轴线。

yAxis.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

yAxis.silent

坐标轴是否是静态无法交互。

yAxis.logBase

对数轴的底数,只在对数轴中(type: 'log')有效。

yAxis.interval

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 minmax 强制设定刻度划分,一般不建议使用。

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

yAxis.minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

{
    minInterval: 1
}

只在数值轴中(type: 'value')有效。

yAxis.splitNumber

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

yAxis.scale

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 minmax 之后该配置项无效。

yAxis.max

坐标轴刻度最大值,在类目轴中无效。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

yAxis.min

坐标轴刻度最小值,在类目轴中无效。

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

yAxis.boundaryGap

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 truefalse。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 minmax 后无效。 示例:

boundaryGap: ['20%', '20%']

yAxis.inverse

是否是反向坐标轴。ECharts 3 中新加。

yAxis.nameRotate

坐标轴名字旋转,角度值。

yAxis.nameGap

坐标轴名称与轴线之间的距离。

yAxis.nameTextStyle

坐标轴名称的文字样式。

yAxis.nameTextStyle.fontSize

坐标轴名称文字的字体大小

yAxis.nameTextStyle.fontFamily

坐标轴名称文字的字体系列

yAxis.nameTextStyle.fontWeight

坐标轴名称文字字体的粗细

可选:

yAxis.nameTextStyle.fontStyle

坐标轴名称文字字体的风格

可选:

yAxis.nameTextStyle.color

坐标轴名称的颜色,默认取 axisLine.lineStyle.color

yAxis.nameLocation

坐标轴名称显示位置。

可选:

yAxis.name

坐标轴名称。

yAxis.type

坐标轴类型。

可选:

yAxis.offset

Y 轴相对于默认位置的偏移,在相同的 position 上有多个 Y 轴的时候有用。

yAxis.position

y 轴的位置。

可选:

默认 grid 中的第一个 y 轴在 grid 的左侧('left'),第二个 y 轴视第一个 y 轴的位置放在另一侧。

yAxis.gridIndex

y 轴所在的 grid 的索引,默认位于第一个 grid。

xAxis

直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放左右两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

xAxis.z

X 轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

xAxis.zlevel

X 轴所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

xAxis.data

类目数据,在类目轴(type: 'category')中有效。

示例:

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

xAxis.splitArea

坐标轴在 grid 区域中的分隔区域,默认不显示。

xAxis.splitArea.areaStyle

分隔区域的样式设置。

xAxis.splitArea.areaStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

xAxis.splitArea.areaStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

xAxis.splitArea.areaStyle.shadowOffsetX

阴影水平方向上的偏移距离。

xAxis.splitArea.areaStyle.shadowColor

阴影颜色。支持的格式同color

xAxis.splitArea.areaStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.splitArea.areaStyle.color

分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。

xAxis.splitArea.show

是否显示分隔区域。

xAxis.splitArea.interval

坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

xAxis.splitLine

坐标轴在 grid 区域中的分隔线。

xAxis.splitLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

xAxis.splitLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

xAxis.splitLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

xAxis.splitLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

xAxis.splitLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.splitLine.lineStyle.type

分隔线线的类型。

可选:

xAxis.splitLine.lineStyle.width

分隔线线宽。

xAxis.splitLine.lineStyle.color

分隔线颜色,可以设置成单个颜色。

也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。

示例

splitLine: {
    lineStyle: {
        // 使用深浅的间隔色
        color: ['#aaa', '#ddd']
    }
}

xAxis.splitLine.interval

坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

xAxis.splitLine.show

是否显示分隔线。默认数值轴显示,类目轴不显示。

xAxis.axisLabel

坐标轴刻度标签的相关设置。

xAxis.axisLabel.textStyle.fontSize

文字的字体大小

xAxis.axisLabel.textStyle.fontFamily

文字的字体系列

xAxis.axisLabel.textStyle.fontWeight

文字字体的粗细

可选:

xAxis.axisLabel.textStyle.fontStyle

文字字体的风格

可选:

xAxis.axisLabel.textStyle.color

刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下

(val: string) => Color

参数是标签的文本,返回颜色值,如下示例:

textStyle: {
    color: function (val) {
        return val >= 0 ? 'green' : 'red';
    }
}

xAxis.axisLabel.formatter

刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为刻度默认标签 {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('/');
}

xAxis.axisLabel.margin

刻度标签与轴线之间的距离。

xAxis.axisLabel.rotate

刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

xAxis.axisLabel.inside

刻度标签是否朝内,默认朝外。

xAxis.axisLabel.interval

坐标轴刻度标签的显示间隔,在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

xAxis.axisLabel.show

是否显示刻度标签。

xAxis.axisTick

坐标轴刻度相关设置。

xAxis.axisTick.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

xAxis.axisTick.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

xAxis.axisTick.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

xAxis.axisTick.lineStyle.shadowColor

阴影颜色。支持的格式同color

xAxis.axisTick.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.axisTick.lineStyle.type

坐标轴刻度线的类型。

可选:

xAxis.axisTick.lineStyle.width

坐标轴刻度线宽。

xAxis.axisTick.lineStyle.color

刻度线的颜色,默认取 axisLine.lineStyle.color

xAxis.axisTick.length

坐标轴刻度的长度。

xAxis.axisTick.inside

坐标轴刻度是否朝内,默认朝外。

xAxis.axisTick.interval

坐标轴刻度的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false

xAxis.axisTick.alignWithLabel

类目轴中在 boundaryGaptrue 的时候有效,可以保证刻度线和标签对齐。如下图:

xAxis.axisTick.show

是否显示坐标轴刻度。

xAxis.axisLine

坐标轴轴线相关设置。

xAxis.axisLine.lineStyle.opacity

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

xAxis.axisLine.lineStyle.shadowOffsetY

阴影垂直方向上的偏移距离。

xAxis.axisLine.lineStyle.shadowOffsetX

阴影水平方向上的偏移距离。

xAxis.axisLine.lineStyle.shadowColor

阴影颜色。支持的格式同color

xAxis.axisLine.lineStyle.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

xAxis.axisLine.lineStyle.type

坐标轴线线的类型。

可选:

xAxis.axisLine.lineStyle.width

坐标轴线线宽。

xAxis.axisLine.lineStyle.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
)

xAxis.axisLine.onZero

X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。

xAxis.axisLine.show

是否显示坐标轴轴线。

xAxis.triggerEvent

坐标轴的标签是否响应和触发鼠标事件,默认不响应。

事件参数如下:

{
    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

xAxis.silent

坐标轴是否是静态无法交互。

xAxis.logBase

对数轴的底数,只在对数轴中(type: 'log')有效。

xAxis.interval

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 minmax 强制设定刻度划分,一般不建议使用。

无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。

xAxis.minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

{
    minInterval: 1
}

只在数值轴中(type: 'value')有效。

xAxis.splitNumber

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

xAxis.scale

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 minmax 之后该配置项无效。

xAxis.max

坐标轴刻度最大值,在类目轴中无效。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

xAxis.min

坐标轴刻度最小值,在类目轴中无效。

可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

xAxis.boundaryGap

坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 truefalse。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 minmax 后无效。 示例:

boundaryGap: ['20%', '20%']

xAxis.inverse

是否是反向坐标轴。ECharts 3 中新加。

xAxis.nameRotate

坐标轴名字旋转,角度值。

xAxis.nameGap

坐标轴名称与轴线之间的距离。

xAxis.nameTextStyle

坐标轴名称的文字样式。

xAxis.nameTextStyle.fontSize

坐标轴名称文字的字体大小

xAxis.nameTextStyle.fontFamily

坐标轴名称文字的字体系列

xAxis.nameTextStyle.fontWeight

坐标轴名称文字字体的粗细

可选:

xAxis.nameTextStyle.fontStyle

坐标轴名称文字字体的风格

可选:

xAxis.nameTextStyle.color

坐标轴名称的颜色,默认取 axisLine.lineStyle.color

xAxis.nameLocation

坐标轴名称显示位置。

可选:

xAxis.name

坐标轴名称。

xAxis.type

坐标轴类型。

可选:

xAxis.offset

X 轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用。

xAxis.position

x 轴的位置。

可选:

默认 grid 中的第一个 x 轴在 grid 的下方('bottom'),第二个 x 轴视第一个 x 轴的位置放在另一侧。

xAxis.gridIndex

x 轴所在的 grid 的索引,默认位于第一个 grid。

grid

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图柱状图散点图(气泡图)

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件,在 ECharts 3 中可以存在任意个 grid 组件。

例如下面这个 Anscombe Quartet 的示例:

grid.shadowOffsetY

阴影垂直方向上的偏移距离。

注意:此配置项生效的前提是,设置了 show: true

grid.shadowOffsetX

阴影水平方向上的偏移距离。

注意:此配置项生效的前提是,设置了 show: true

grid.shadowColor

阴影颜色。支持的格式同color

注意:此配置项生效的前提是,设置了 show: true

grid.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor

grid.borderWidth

网格的边框线宽。

注意:此配置项生效的前提是,设置了 show: true

grid.borderColor

网格的边框颜色。支持的颜色格式同 backgroundColor。

注意:此配置项生效的前提是,设置了 show: true

grid.backgroundColor

网格背景色,默认透明。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'

注意:此配置项生效的前提是,设置了 show: true

grid.containLabel

grid 区域是否包含坐标轴的刻度标签,在无法确定坐标轴标签的宽度,容器又比较小无法预留较多空间的时候,可以设为 true 防止标签溢出容器。

grid.height

grid 组件的高度。默认自适应。

grid.width

grid 组件的宽度。默认自适应。

grid.bottom

grid 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

grid.right

grid 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

grid.top

grid 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

grid.left

grid 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

grid.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

grid.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

grid.show

是否显示直角坐标系网格。

legend

图例组件。

图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

ECharts 3 中单个 echarts 实例中可以存在多个图例组件,会方便多个图例的布局。

legend.shadowOffsetY

阴影垂直方向上的偏移距离。

注意:此配置项生效的前提是,设置了 show: true

legend.shadowOffsetX

阴影水平方向上的偏移距离。

注意:此配置项生效的前提是,设置了 show: true

legend.shadowColor

阴影颜色。支持的格式同color

注意:此配置项生效的前提是,设置了 show: true

legend.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor

legend.borderWidth

图例的边框线宽。

legend.borderColor

图例的边框颜色。支持的颜色格式同 backgroundColor。

legend.backgroundColor

图例背景色,默认透明。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'

legend.data

图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name(如果是饼图,也可以是饼图单个数据的 name)。图例组件会自动获取对应系列的颜色,图形标记(symbol)作为自己绘制的颜色和标记,特殊字符串 ''(空字符串)或者 '\n'(换行字符串)用于图例的换行。

如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name

示例

data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
    }
}]

legend.tooltip

图例的 tooltip 配置,配置项同 tooltip。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip,如下示例:

legend: {
    formatter: function (name) {
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}

legend.textStyle

图例的公用文本样式。

legend.textStyle.fontSize

文字的字体大小

legend.textStyle.fontFamily

文字的字体系列

legend.textStyle.fontWeight

文字字体的粗细

可选:

legend.textStyle.fontStyle

文字字体的风格

可选:

legend.textStyle.color

文字的颜色。

legend.selected

图例选中状态表。

示例:

selected: {
    // 选中'系列1'
    '系列1': true,
    // 不选中'系列2'
    '系列2': false
}

legend.inactiveColor

图例关闭时的颜色。

legend.selectedMode

图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。

除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。

legend.formatter

用来格式化图例文本,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

legend.itemHeight

图例标记的图形高度。

legend.itemWidth

图例标记的图形宽度。

legend.itemGap

图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。

legend.padding

图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

legend.align

图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的 left 值为 'right' 以及纵向布局(orient 为 'vertical')的时候为右对齐,及为 'right'。

可选:

legend.orient

图例列表的布局朝向。

可选:

legend.height

图例组件的高度。默认自适应。

legend.width

图例组件的宽度。默认自适应。

legend.bottom

图例组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

legend.right

图例组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

legend.top

图例组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

legend.left

图例组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

legend.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

legend.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

title

标题组件,包含主标题和副标题。

在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用。

例如下面不同缓动函数效果的示例,每一个缓动效果图都带有一个标题组件:

title.shadowOffsetY

阴影垂直方向上的偏移距离。

注意:此配置项生效的前提是,设置了 show: true

title.shadowOffsetX

阴影水平方向上的偏移距离。

注意:此配置项生效的前提是,设置了 show: true

title.shadowColor

阴影颜色。支持的格式同color

注意:此配置项生效的前提是,设置了 show: true

title.shadowBlur

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor

title.borderWidth

标题的边框线宽。

title.borderColor

标题的边框颜色。支持的颜色格式同 backgroundColor。

title.backgroundColor

标题背景色,默认透明。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'

title.bottom

grid 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

title.right

grid 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

title.top

grid 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

title.left

grid 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

title.z

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

title.zlevel

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

title.itemGap

主副标题之间的间距。

title.padding

标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

title.subtextStyle.fontSize

副标题文字的字体大小

title.subtextStyle.fontFamily

副标题文字的字体系列

title.subtextStyle.fontWeight

副标题文字字体的粗细

可选:

title.subtextStyle.fontStyle

副标题文字字体的风格

可选:

title.subtextStyle.color

副标题文字的颜色。

title.subtarget

指定窗口打开副标题超链接,可选:

title.sublink

副标题文本超链接。

title.subtext

副标题文本,支持使用 \n 换行。

title.textBaseline

标题文本垂直对齐,支持 'top', 'middle', 'bottom',默认根据标题位置决定。

title.textAlign

标题文本水平对齐,支持 'left', 'center', 'right',默认根据标题位置决定。

title.textStyle.fontSize

主标题文字的字体大小

title.textStyle.fontFamily

主标题文字的字体系列

title.textStyle.fontWeight

主标题文字字体的粗细

可选:

title.textStyle.fontStyle

主标题文字字体的风格

可选:

title.textStyle.color

主标题文字的颜色。

title.target

指定窗口打开主标题超链接。

可选:

title.link

主标题文本超链接。

title.text

主标题文本,支持使用 \n 换行。

title.show

是否显示标题组件。