echarts属性之series-scatter
数组项可用对象,其中的。
series-scatter
散点(气泡)图。直角坐标系上的散点图可以用来展现数据的 x
,y
之间的关系,如果数据项有多个维度,其它维度的值可以通过不同大小的 symbol 展现成气泡图,也可以用颜色来表现。这些可以配合 visualMap 组件完成。
所有属性
series-scatter. type = 'scatter'
string
series-scatter. id
string
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
series-scatter. name
string
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
series-scatter. colorBy = 'series' 试一试
string
从
v5.2.0
开始支持
从调色盘 option.color 中取色的策略,可取值为:
'series'
:按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色;'data'
:按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。
series-scatter. coordinateSystem = 'cartesian2d'
string
该系列使用的坐标系,可选:
-
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
-
'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
-
'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。
-
'calendar'
使用日历坐标系,通过 calendarIndex 指定相应的日历坐标系组件。
series-scatter. xAxisIndex
number
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
series-scatter. yAxisIndex
number
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
series-scatter. polarIndex
number
使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
series-scatter. geoIndex
number
使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
series-scatter. calendarIndex
number
使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。
series-scatter. legendHoverLink = true 试一试
boolean
是否启用图例 hover 时的联动高亮。
series-scatter. symbol = 'circle' 试一试
stringFunction
标记的图形。
ECharts 提供的标记类型包括
'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
'image://http://example.website/a/b.png'
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
如果需要每个数据的图形不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => string
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
series-scatter. symbolSize = 10 试一试
numberArrayFunction
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
series-scatter. symbolRotate 试一试
numberFunction
标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
如果需要每个数据的旋转角度不一样,可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number
其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
从 4.8.0 开始支持回调函数。
series-scatter. symbolKeepAspect 试一试
boolean
如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
series-scatter. symbolOffset = [0, 0] 试一试
Array
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '-50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
series-scatter. large 试一试
boolean
是否开启大数据量优化,在数据图形特别多而出现卡顿时候可以开启。
开启后配合 largeThreshold
在数据量大于指定阈值的时候对绘制进行优化。
缺点:优化后不能自定义设置单个数据项的样式。
series-scatter. largeThreshold = 2000 试一试
number
开启绘制优化的阈值。
series-scatter. cursor = 'pointer' 试一试
string
鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor
。
series-scatter. label
Object
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
series-scatter.label. show 试一试
boolean
是否显示标签。
series-scatter.label. position = 'inside' 试一试
stringArray
标签的位置。
-
可以通过内置的语义声明位置:
示例:
position: 'top'
支持:
top
/left
/right
/bottom
/inside
/insideLeft
/insideRight
/insideTop
/insideBottom
/insideTopLeft
/insideBottomLeft
/insideTopRight
/insideBottomRight
-
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
示例:
// 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%']
参见:label position。
series-scatter.label. distance = 5 试一试
number
距离图形元素的距离。
当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
series-scatter.label. rotate 试一试
number
标签旋转。从 -90 度到 90 度。正值是逆时针。
参见:label rotation。
series-scatter.label. offset 试一试
Array
是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
series-scatter.label. minMargin
number
从
v5.0.0
开始支持
用于控制标签之间的最小距离,当启用 labelLayout 时可能会用到。
series-scatter.label. formatter
stringFunction
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n
换行。
字符串模板 模板变量有:
{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}
:数据中名为'xxx'
的维度的值,如{@product}
表示名为'product'
的维度的值。{@[n]}
:数据中维度n
的值,如{@[3]}
表示维度 3 的值,从 0 开始计数。
示例:
formatter: '{b}: {@score}'
回调函数
回调函数格式:
(params: Object|Array) => string
参数 params
是 formatter 需要的单个数据集。格式如下:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)
value: number|Array|Object,
// 坐标轴 encode 映射信息,
// key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)
// value 必然为数组,不会为 null/undefined,表示 dimension index 。
// 其内容如:
// {
// x: [2] // dimension index 为 2 的数据映射到 x 轴
// y: [0] // dimension index 为 0 的数据映射到 y 轴
// }
encode: Object,
// 维度名列表
dimensionNames: Array<String>,
// 数据的维度 index,如 0 或 1 或 2 ...
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
color: string
}
注:encode 和 dimensionNames 的使用方式,例如:
如果数据为:
dataset: {
source: [
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
}
则可这样得到 y 轴对应的 value:
params.value[params.encode.y[0]]
如果数据为:
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
}
则可这样得到 y 轴对应的 value:
params.value[params.dimensionNames[params.encode.y[0]]]
series-scatter.label. color = '#fff' 试一试
Color
文字的颜色。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
series-scatter.label. fontStyle = 'normal' 试一试
string
文字字体的风格。
可选:
'normal'
'italic'
'oblique'
series-scatter.label. fontWeight = 'normal' 试一试
stringnumber
文字字体的粗细。
可选:
'normal'
'bold'
'bolder'
'lighter'
- 100 | 200 | 300 | 400...
series-scatter.label. fontFamily = 'sans-serif' 试一试
string
文字的字体系列。
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
series-scatter.label. fontSize = 12 试一试
number
文字的字体大小。
series-scatter.label. align 试一试
string
文字水平对齐方式,默认自动。
可选:
'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{
align: right,
rich: {
a: {
// 没有设置 `align`,则 `align` 为 right
}
}
}
series-scatter.label. verticalAlign 试一试
string
文字垂直对齐方式,默认自动。
可选:
'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{
verticalAlign: bottom,
rich: {
a: {
// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
}
}
}
series-scatter.label. lineHeight 试一试
number
行高。
rich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{
lineHeight: 56,
rich: {
a: {
// 没有设置 `lineHeight`,则 `lineHeight` 为 56
}
}
}
series-scatter.label. backgroundColor = 'transparent' 试一试
stringObject
文字块背景色。
可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
backgroundColor: {
image: 'xxx/xxx.png'
// 这里可以是图片的 URL,
// 或者图片的 dataURI,
// 或者 HTMLImageElement 对象,
// 或者 HTMLCanvasElement 对象。
}
当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
series-scatter.label. borderColor 试一试
Color
文字块边框颜色。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
series-scatter.label. borderWidth 试一试
number
文字块边框宽度。
series-scatter.label. borderType = 'solid' 试一试
stringnumberArray
文字块边框描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合 borderDashOffset
可实现更灵活的虚线效果。
例如:
{
borderType: [5, 10],
borderDashOffset: 5
}
series-scatter.label. borderDashOffset 试一试
number
从
v5.0.0
开始支持
用于设置虚线的偏移量,可搭配 borderType
指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。
series-scatter.label. borderRadius 试一试
numberArray
文字块的圆角。
series-scatter.label. padding 试一试
numberArray
文字块的内边距。例如:
padding: [3, 4, 5, 6]
:表示[上, 右, 下, 左]
的边距。padding: 4
:表示padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示padding: [3, 4, 3, 4]
。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
series-scatter.label. shadowColor = 'transparent' 试一试
Color
文字块的背景阴影颜色。
series-scatter.label. shadowBlur 试一试
number
文字块的背景阴影长度。
series-scatter.label. shadowOffsetX 试一试
number
文字块的背景阴影 X 偏移。
series-scatter.label. shadowOffsetY 试一试
number
文字块的背景阴影 Y 偏移。
series-scatter.label. width 试一试
number
文本显示宽度。
series-scatter.label. height 试一试
number
文本显示高度。
series-scatter.label. textBorderColor 试一试
Color
文字本身的描边颜色。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
series-scatter.label. textBorderWidth 试一试
number
文字本身的描边宽度。
series-scatter.label. textBorderType = 'solid' 试一试
stringnumberArray
文字本身的描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合 textBorderDashOffset
可实现更灵活的虚线效果。
例如:
{
textBorderType: [5, 10],
textBorderDashOffset: 5
}
series-scatter.label. textBorderDashOffset 试一试
number
从
v5.0.0
开始支持
用于设置虚线的偏移量,可搭配 textBorderType
指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。
series-scatter.label. textShadowColor = 'transparent' 试一试
Color
文字本身的阴影颜色。
series-scatter.label. textShadowBlur 试一试
number
文字本身的阴影长度。
series-scatter.label. textShadowOffsetX 试一试
number
文字本身的阴影 X 偏移。
series-scatter.label. textShadowOffsetY 试一试
number
文字本身的阴影 Y 偏移。
series-scatter.label. overflow = 'none' 试一试
string
文字超出宽度是否截断或者换行。配置width
时有效
'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
'break'
换行'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行
series-scatter.label. ellipsis = '...'
string
在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
series-scatter.label. rich
Object
在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
label: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{styleName|text content text content}` 标记样式名。
// 注意,换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
详情参见教程:富文本标签
所有属性
{ <style_name> }
series-scatter. labelLine
Object
从
v5.0.0
开始支持
标签的视觉引导线配置。
series-scatter.labelLine. show 试一试
boolean
是否显示视觉引导线。
series-scatter.labelLine. showAbove
boolean
从
v5.0.0
开始支持
是否显示在图形上方。
series-scatter.labelLine. length2 试一试
number
视觉引导项第二段的长度。
series-scatter.labelLine. smooth 试一试
booleannumber
是否平滑视觉引导线,默认不平滑,可以设置成 true
平滑显示,也可以设置为 0 到 1 的值,表示平滑程度。
series-scatter.labelLine. minTurnAngle
number
从
v5.0.0
开始支持
通过调整第二段线的长度,限制引导线两端之间最小的夹角,以防止过小的夹角导致显示不美观。
可以设置为 0 - 180 度。
series-scatter.labelLine. lineStyle
Object
所有属性
{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
series-scatter. labelLayout
ObjectFunction
从
v5.0.0
开始支持
标签的统一布局配置。
该配置项是在每个系列默认的标签布局基础上,统一调整标签的(x, y)
位置,标签对齐等属性以实现想要的标签布局效果。
该配置项也可以是一个有如下参数的回调函数
// 标签对应数据的 dataIndex
dataIndex: number
// 标签对应的数据类型,只在关系图中会有 node 和 edge 数据类型的区分
dataType?: string
// 标签对应的系列的 index
seriesIndex: number
// 标签显示的文本
text: string
// 默认的标签的包围盒,由系列默认的标签布局决定
labelRect: {x: number, y: number, width: number, height: number}
// 默认的标签水平对齐
align: 'left' | 'center' | 'right'
// 默认的标签垂直对齐
verticalAlign: 'top' | 'middle' | 'bottom'
// 标签所对应的数据图形的包围盒,可用于定位标签位置
rect: {x: number, y: number, width: number, height: number}
// 默认引导线的位置,目前只有饼图(pie)和漏斗图(funnel)有默认标签位置
// 如果没有该值则为 null
labelLinePoints?: number[][]
示例:
将标签显示在图形右侧 10px 的位置,并且垂直居中:
labelLayout(params) {
return {
x: params.rect.x + 10,
y: params.rect.y + params.rect.height / 2,
verticalAlign: 'middle',
align: 'left'
}
}
根据图形的包围盒尺寸决定文本尺寸
labelLayout(params) {
return {
fontSize: Math.max(params.rect.width / 10, 5)
};
}
series-scatter.labelLayout. hideOverlap
boolean
是否隐藏重叠的标签。
下面示例演示了在关系图中开启该配置后,在缩放时可以实现自动的标签隐藏。
series-scatter.labelLayout. moveOverlap
string
在标签重叠的时候是否挪动标签位置以防止重叠。
目前支持配置为:
'shiftX'
水平方向依次位移,在水平方向对齐时使用'shiftY'
垂直方向依次位移,在垂直方向对齐时使用
下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。
series-scatter.labelLayout. x
numberstring
标签的 x 位置。支持绝对的像素值或者'20%'
这样的相对值。
series-scatter.labelLayout. y
numberstring
标签的 y 位置。支持绝对的像素值或者'20%'
这样的相对值。
series-scatter.labelLayout. dx
number
标签在 x 方向上的像素偏移。可以和x
一起使用。
series-scatter.labelLayout. dy
number
标签在 y 方向上的像素偏移。可以和y
一起使用
series-scatter.labelLayout. rotate
number
标签旋转角度。
series-scatter.labelLayout. width
number
标签显示的宽度。可以配合overflow
使用控制标签显示在固定宽度内
series-scatter.labelLayout. height
number
标签显示的高度。
series-scatter.labelLayout. align
string
标签水平对齐方式。可以设置'left'
, 'center'
, 'right'
。
series-scatter.labelLayout. verticalAlign
string
标签垂直对齐方式。可以设置'top'
, 'middle'
, 'bottom'
。
series-scatter.labelLayout. fontSize
number
The text size of the label.
series-scatter.labelLayout. draggable
boolean
标签是否可以允许用户通过拖拽二次调整位置。
series-scatter.labelLayout. labelLinePoints
Array
标签引导线三个点的位置。格式为:
[[x, y], [x, y], [x, y]]
在饼图中常用来微调已经计算好的引导线,其它情况一般不建议设置。
series-scatter. itemStyle
Object
图形样式。
series-scatter.itemStyle. color = 自适应 试一试
ColorFunction
图形的颜色。 默认从全局调色盘 option.color 获取颜色。
支持使用
rgb(255,255,255)
,rgba(255,255,255,1)
,#fff
等方式设置为纯色,也支持设置为渐变色和纹理填充,具体见option.color
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
series-scatter.itemStyle. borderColor = '#000' 试一试
Color
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
series-scatter.itemStyle. borderWidth 试一试
number
描边线宽。为 0 时无描边。
series-scatter.itemStyle. borderType = 'solid' 试一试
stringnumberArray
描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合 borderDashOffset
可实现更灵活的虚线效果。
例如:
{
borderType: [5, 10],
borderDashOffset: 5
}
series-scatter.itemStyle. borderDashOffset 试一试
number
从
v5.0.0
开始支持
用于设置虚线的偏移量,可搭配 borderType
指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。
series-scatter.itemStyle. borderCap = 'butt' 试一试
string
从
v5.0.0
开始支持
用于指定线段末端的绘制方式,可以是:
'butt'
: 线段末端以方形结束。'round'
: 线段末端以圆形结束。'square'
: 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
默认值为 'butt'
。 更多详情可以参考 MDN lineCap。
series-scatter.itemStyle. borderJoin = 'bevel' 试一试
string
从
v5.0.0
开始支持
用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。
可以是:
'bevel'
: 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。'round'
: 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。'miter'
: 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过borderMiterLimit
属性看到效果。
默认值为 'bevel'
。 更多详情可以参考 MDN lineJoin。
series-scatter.itemStyle. borderMiterLimit = 10 试一试
number
从
v5.0.0
开始支持
用于设置斜接面限制比例。只有当 borderJoin
为 miter
时, borderMiterLimit
才有效。
默认值为 10
。负数、0
、Infinity
和 NaN
均会被忽略。
更多详情可以参考 MDN miterLimit。
series-scatter.itemStyle. shadowBlur 试一试
number
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
series-scatter.itemStyle. shadowColor 试一试
Color
阴影颜色。支持的格式同color
。
series-scatter.itemStyle. shadowOffsetX 试一试
number
阴影水平方向上的偏移距离。
series-scatter.itemStyle. shadowOffsetY 试一试
number
阴影垂直方向上的偏移距离。
series-scatter.itemStyle. opacity = 0.8 试一试
number
图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
series-scatter. emphasis
Object
高亮的图形和标签样式。
series-scatter.emphasis. disabled 试一试
boolean
从
v5.3.0
开始支持
是否关闭高亮状态。
关闭高亮状态可以在鼠标移到图形上,tooltip 触发,或者图例联动的时候不再触发高亮效果。在图形非常多的时候可以关闭以提升交互流畅性。
series-scatter.emphasis. scale = true 试一试
booleannumber
从
v5.0.0
开始支持
是否开启高亮后的放大效果。从 5.3.2
版本开始支持 number
,用以设置高亮放大倍数,默认放大 1.1 倍。
series-scatter.emphasis. focus = 'none'
string
从
v5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。
'series'
聚焦当前高亮的数据所在的系列的所有图形。
示例:
下面代码配置了柱状图在高亮一个图形的时候,淡出当前直角坐标系所有其它的系列。
emphasis: {
focus: 'series',
blurScope: 'coordinateSystem'
}
series-scatter.emphasis. blurScope = 'coordinateSystem'
string
从
v5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。
series-scatter.emphasis. label
Object
所有属性
{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }
series-scatter.emphasis. labelLine
Object
从
v5.0.0
开始支持
标签的视觉引导线配置。
所有属性
series-scatter.emphasis. itemStyle
Object
所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
series-scatter. blur
Object
从
v5.0.0
开始支持
淡出状态的配置。开启 emphasis.focus 后有效。
series-scatter.blur. label
Object
所有属性
{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }
series-scatter.blur. labelLine
Object
从
v5.0.0
开始支持
标签的视觉引导线配置。
所有属性
series-scatter.blur. itemStyle
Object
所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
series-scatter. select
Object
从
v5.0.0
开始支持
选中状态的配置。开启 selectedMode 后有效。
series-scatter.select. disabled 试一试
boolean
从
v5.3.0
开始支持
是否可以被选中。在开启selectedMode
的时候有效,可以用于关闭部分数据。
series-scatter.select. label
Object
所有属性
{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }
series-scatter.select. labelLine
Object
从
v5.0.0
开始支持
标签的视觉引导线配置。
所有属性
series-scatter.select. itemStyle
Object
所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
series-scatter. selectedMode 试一试
booleanstring
从
v5.0.0
开始支持
选中模式的配置,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'
,'multiple'
,'series'
分别表示单选,多选以及选择整个系列。
从 v5.3.0 开始支持
'series'
。
series-scatter. progressive = 400
number
渐进式渲染时每一帧绘制图形数量,设为 0 时不启用渐进式渲染,支持每个系列单独配置。
在图中有数千到几千万图形元素的时候,一下子把图形绘制出来,或者交互重绘的时候可能会造成界面的卡顿甚至假死。ECharts 4 开始全流程支持渐进渲染(progressive rendering),渲染的时候会把创建好的图形分到数帧中渲染,每一帧渲染只渲染指定数量的图形。
该配置项就是用于配置该系列每一帧渲染的图形数,可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢,这个数字就可以设置小一点,而线宽小于等于 1 的 polyline 绘制非常快,该配置项就可以相对调得比较大。
series-scatter. progressiveThreshold = 3000
number
启用渐进式渲染的图形数量阈值,在单个系列的图形数量超过该阈值时启用渐进式渲染。
series-scatter. dimensions
Array
使用 dimensions 定义 series.data
或者 dataset.source
的每个维度的信息。
注意:如果使用了 dataset,那么可以在 dataset.dimensions 中定义 dimension ,或者在 dataset.source 的第一行/列中给出 dimension 名称。于是就不用在这里指定 dimension。但如果在这里指定了 dimensions
,那么优先使用这里的。
例如:
option = {
dataset: {
source: [
// 有了上面 dimensions 定义后,下面这五个维度的名称分别为:
// 'date', 'open', 'close', 'highest', 'lowest'
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
},
series: {
type: 'xxx',
// 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。
dimensions: ['date', 'open', 'close', 'highest', 'lowest']
}
}
series: {
type: 'xxx',
dimensions: [
null, // 如果此维度不想给出定义,则使用 null 即可
{type: 'ordinal'}, // 只定义此维度的类型。
// 'ordinal' 表示离散型,一般文本使用这种类型。
// 如果类型没有被定义,会自动猜测类型。
{name: 'good', type: 'number'},
'bad' // 等同于 {name: 'bad'}
]
}
dimensions
数组中的每一项可以是:
string
,如'someName'
,等同于{name: 'someName'}
Object
,属性可以有:- name:
string
。 - type:
string
,支持number
,默认,表示普通数据。ordinal
,对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的,所以使用者也可以手动强制指定。float
,即 Float64Array。int
,即 Int32Array。time
,表示时间类型。设置成 'time' 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。时间类型的支持参见 data。
- displayName: 一般用于 tooltip 中维度名的展示。
string
如果没有指定,默认使用 name 来展示。
- name:
值得一提的是,当定义了 dimensions
后,默认 tooltip
中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。如果没有定义 dimensions
,则默认 tooltip
会横排显示,且只显示数值没有维度名称可显示。
series-scatter. encode
Object
可以定义 data
的哪个维度被编码成什么。比如:
option = {
dataset: {
source: [
// 每一列称为一个『维度』。
// 这里分别是维度 0、1、2、3、4。
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
},
series: {
type: 'xxx',
encode: {
x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。
y: 2, // 表示维度 2 映射到 y 轴。
tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。
}
}
}
当使用 dimensions 给维度定义名称后,encode
中可直接引用名称,例如:
series: {
type: 'xxx',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
encode: {
x: 'date',
y: ['open', 'close', 'highest', 'lowest']
}
}
encode
声明的基本结构如下,其中冒号左边是坐标系、标签等特定名称,如 'x'
, 'y'
, 'tooltip'
等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。
下面是 encode 支持的属性:
// 在任何坐标系和系列中,都支持:
encode: {
// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
tooltip: ['product', 'score']
// 使用第一个维度和第三个维度的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字)
seriesName: [1, 3],
// 表示使用第二个维度中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。
itemId: 2,
// 指定数据项的名称使用第三个维度在饼图等图表中有用,可以使这个名字显示在图例(legend)中。
itemName: 3,
// 指定数据项的组 ID (groupId)。当全局过渡动画功能开启时,setOption 前后拥有相同 groupId 的数据项会进行动画过渡。
itemGroupId: 4,
// 指定数据项对应的子数据组 ID (childGroupId),用于实现多层下钻和聚合。详见 childGroupId。
// 从 v5.5.0 开始支持
itemChildGroupId: 5
}
// 直角坐标系(grid/cartesian)特有的属性:
encode: {
// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:
x: [1, 5, 'score'],
// 把“维度0”映射到 Y 轴。
y: 0
}
// 单轴(singleAxis)特有的属性:
encode: {
single: 3
}
// 极坐标系(polar)特有的属性:
encode: {
radius: 3,
angle: 2
}
// 地理坐标系(geo)特有的属性:
encode: {
lng: 3,
lat: 2
}
// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:
encode: {
value: 3
}
这是个更丰富的 encode
的示例:
特殊地,在 自定义系列(custom series) 中,encode
中轴可以不指定或设置为 null/undefined
,从而使系列免于受这个轴控制,也就是说,轴的范围(extent)不会受此系列数值的影响,轴被 dataZoom 控制时也不会过滤掉这个系列:
var option = {
xAxis: {},
yAxis: {},
dataZoom: [{
xAxisIndex: 0
}, {
yAxisIndex: 0
}],
series: {
type: 'custom',
renderItem: function (params, api) {
return {
type: 'circle',
shape: {
cx: 100, // x 位置永远为 100
cy: api.coord([0, api.value(0)])[1],
r: 30
},
style: {
fill: 'blue'
}
};
},
encode: {
// 这样这个系列就不会被 x 轴以及 x
// 轴上的 dataZoom 控制了。
x: -1,
y: 1
},
data: [ ... ]
}
};
series-scatter. seriesLayoutBy = 'column'
string
当使用 dataset 时,seriesLayoutBy
指定了 dataset
中用行还是列对应到系列上,也就是说,系列“排布”到 dataset
的行还是列上。可取值:
- 'column':默认,
dataset
的列对应于系列,从而dataset
中每一列是一个维度(dimension)。 - 'row':
dataset
的行对应于系列,从而dataset
中每一行是一个维度(dimension)。
参见这个 示例
series-scatter. datasetIndex
number
如果 series.data 没有指定,并且 dataset 存在,那么就会使用 dataset。datasetIndex
指定本系列使用哪个 dataset。
series-scatter. dataGroupId
string
该系列所有数据项的组 ID,优先级低于groupId
。详见series.data.groupId
。
series-scatter. data
Array
系列中的数据内容数组。数组项通常为具体的数据项。
注意,如果系列没有指定 data
,并且 option 有 dataset,那么默认使用第一个 dataset。如果指定了 data
,则不会再使用 dataset。
可以使用 series.datasetIndex
指定其他的 dataset。
通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』。
series: [{
data: [
// 维度X 维度Y 其他维度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]
- 在 直角坐标系 (grid) 中『维度X』和『维度Y』会默认对应于 xAxis 和 yAxis。
- 在 极坐标系 (polar) 中『维度X』和『维度Y』会默认对应于 radiusAxis 和 angleAxis。
- 后面的其他维度是可选的,可以在别处被使用,例如:
- 在 visualMap 中可以将一个或多个维度映射到颜色,大小等多个图形属性上。
- 在 series.symbolSize 中可以使用回调函数,基于某个维度得到 symbolSize 值。
- 使用 tooltip.formatter 或 series.label.formatter 可以把其他维度的值展示出来。
特别地,当只有一个轴为类目轴(axis.type 为 'category'
)的时候,数据可以简化用一个一维数组表示。例如:
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 与 xAxis.data 一一对应。
data: [23, 44, 55, 19]
// 它其实是下面这种形式的简化:
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]
『值』与 轴类型 的关系:
-
当某维度对应于数值轴(axis.type 为
'value'
或者'log'
)的时候:其值可以为
number
(例如12
)。(也可以兼容string
形式的 number,例如'12'
) -
当某维度对应于类目轴(axis.type 为
'category'
)的时候:其值须为类目的『序数』(从
0
开始)或者类目的『字符串值』。例如:xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ] }]
双类目轴的示例可以参考 Github Punchcard 示例。
-
当某维度对应于时间轴(type 为
'time'
)的时候,值可以为:- 一个时间戳,如
1484141700832
,表示 UTC 时间。 - 或者字符串形式的时间描述:
- ISO 8601 的子集,只包含这些形式(这几种格式,除非指明时区,否则均表示本地时间,与 moment 一致):
- 部分年月日时间:
'2012-03'
,'2012-03-01'
,'2012-03-01 05'
,'2012-03-01 05:06'
. - 使用
'T'
或空格分割:'2012-03-01T12:22:33.123'
,'2012-03-01 12:22:33.123'
. - 时区设定:
'2012-03-01T12:22:33Z'
,'2012-03-01T12:22:33+8000'
,'2012-03-01T12:22:33-05:00'
.
- 部分年月日时间:
- 其他的时间字符串,包括(均表示本地时间):
'2012'
,'2012-3-1'
,'2012/3/1'
,'2012/03/01'
,'2009/6/12 2:00'
,'2009/6/12 2:05:08'
,'2009/6/12 2:05:08.123'
- ISO 8601 的子集,只包含这些形式(这几种格式,除非指明时区,否则均表示本地时间,与 moment 一致):
- 或者用户自行初始化的 Date 实例:
- 注意,用户自行初始化 Date 实例的时候,浏览器的行为有差异,不同字符串的表示也不同。
- 例如:在 chrome 中,
new Date('2012-01-01')
表示 UTC 时间的 2012 年 1 月 1 日,而new Date('2012-1-1')
和new Date('2012/01/01')
表示本地时间的 2012 年 1 月 1 日。在 safari 中,不支持new Date('2012-1-1')
这种表示方法。 - 所以,使用
new Date(dataString)
时,可使用第三方库解析(如 moment),或者使用echarts.time.parse
,或者参见 这里。
- 一个时间戳,如
当需要对个别数据进行个性化定义时:
数组项可用对象,其中的 value
像表示具体的数值,如:
[
12,
34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]
空值:
当某数据不存在时(ps:不存在不代表值为 0),可以用 '-'
或者 null
或者 undefined
或者 NaN
表示。
例如,无数据在折线图中可表现为该点是断开的,在其它图中可表示为图形不存在。
所有属性
{ name , value , groupId , childGroupId , symbol , symbolSize , symbolRotate , symbolKeepAspect , symbolOffset , label , labelLine , itemStyle , emphasis , blur , select , tooltip }
series-scatter. markPoint
Object
图表标注。
所有属性
{ symbol , symbolSize , symbolRotate , symbolKeepAspect , symbolOffset , silent , label , itemStyle , emphasis , blur , data , animation , animationThreshold , animationDuration , animationEasing , animationDelay , animationDurationUpdate , animationEasingUpdate , animationDelayUpdate }
series-scatter. markLine
Object
图表标线。
所有属性
{ silent , symbol , symbolSize , precision , label , lineStyle , emphasis , blur , data , animation , animationThreshold , animationDuration , animationEasing , animationDelay , animationDurationUpdate , animationEasingUpdate , animationDelayUpdate }
series-scatter. markArea
Object
图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
所有属性
{ silent , label , itemStyle , emphasis , blur , data , animation , animationThreshold , animationDuration , animationEasing , animationDelay , animationDurationUpdate , animationEasingUpdate , animationDelayUpdate }
series-scatter. clip = true 试一试
boolean
从
v4.4.0
开始支持
是否裁剪超出坐标系部分的图形,具体裁剪效果根据系列决定:
- 散点图/带有涟漪特效动画的散点(气泡)图:忽略中心点超出坐标系的图形,但是不裁剪单个图形
- 柱状图:裁掉完全超出的柱子,但是不会裁剪只超出部分的柱子
- 折线图:裁掉所有超出坐标系的折线部分,拐点图形的逻辑按照散点图处理
- 路径图:裁掉所有超出坐标系的部分
- K 线图:忽略整体都超出坐标系的图形,但是不裁剪单个图形
- 象形柱图:裁掉所有超出坐标系的部分(从 v5.5.0 开始支持)
- 自定义系列:裁掉所有超出坐标系的部分
除了象形柱图和自定义系列,其它系列的默认值都为 true,及开启裁剪,如果你觉得不想要裁剪的话,可以设置成 false 关闭。
series-scatter. zlevel
number
散点图所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
series-scatter. z = 2
number
散点图组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
series-scatter. silent 试一试
boolean
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
series-scatter. animation = true 试一试
boolean
是否开启动画。
series-scatter. animationThreshold = 2000
number
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
series-scatter. animationDuration = 1000 试一试
numberFunction
初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:
animationDuration: function (idx) {
// 越往后的数据时长越大
return idx * 100;
}
series-scatter. animationEasing = 'cubicOut' 试一试
string
初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
series-scatter. animationDelay
numberFunction
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelay: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
series-scatter. animationDurationUpdate = 300 试一试
numberFunction
数据更新动画的时长。
支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:
animationDurationUpdate: function (idx) {
// 越往后的数据时长越大
return idx * 100;
}
series-scatter. animationEasingUpdate = 'cubicInOut' 试一试
string
数据更新动画的缓动效果。
series-scatter. animationDelayUpdate
numberFunction
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
series-scatter. universalTransition
object
从
v5.2.0
开始支持
全局过渡动画相关的配置。
全局过渡动画(Universal Transition)提供了任意系列之间进行变形动画的功能。开启该功能后,每次setOption
,相同id
的系列之间会自动关联进行动画的过渡,更细粒度的关联配置见universalTransition.seriesKey
配置。
通过配置数据项的groupId
和childGroupId
,还可以实现诸如下钻,聚合等一对多或者多对一的动画。
可以直接在系列中配置 universalTransition: true
开启该功能。也可以提供一个对象进行更多属性的配置。
series-scatter.universalTransition. enabled
boolean
是否开启全局过渡动画。
series-scatter.universalTransition. seriesKey
stringArray
seriesKey
决定了如何关联需要动画的系列,未配置时会默认取系列的id
。
通常该配置为一个字符串,配置为相同seriesKey
的系列之间会进行动画的过渡。也可以像下面配置为一个数组:
seriesKey: ['male', 'female']
配置为数组意味着在动画的时候所有数组项指定的系列会合并为当前系列。比如该配置是指id
或者seriesKey
为'male'
和'female'
的系列会合并成当前系列。
series-scatter.universalTransition. divideShape
string
divideShape
决定在一对多或者多对一的动画中,当前系列的图形如何分裂成多个图形。目前支持
'split'
通过一定的算法将分割图形成为多个。'clone'
从当前图形克隆得到多个。
为了较好的效果,不同的系列会默认有不同的配置,比如散点图这种图形比较小且复杂的默认采用了'clone'
,而柱状图这种更加规则的则默认是'split'
。你可以根据你自己的场景需求设置为需要的分裂策略。
series-scatter.universalTransition. delay
Function
(index: number, count: number) => number
配置一对多或者多对一的动画中每个图形的动画延时,设置不同的动画延时可以给动画带来一定的趣味性。比如下面代码每个图形通过一个随机的延时造成一种错落的效果:
delay: function (index, count) {
return Math.random() * 1000;
}
series-scatter. tooltip
Object
本系列特定的 tooltip 设定。
所有属性
{ position , formatter , valueFormatter , backgroundColor , borderColor , borderWidth , padding , textStyle , extraCssText }
更多推荐
所有评论(0)