series-graph
关系图
用于展现节点以及节点之间的关系数据。
示例:
所有属性
series-graph. type = 'graph'
series-graph. coordinateSystem
该系列使用的坐标系,可选:
null
或者'none'
无坐标系。
'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。
'calendar'
使用日历坐标系,通过 calendarIndex 指定相应的日历坐标系组件。
'none'
不使用坐标系。
series-graph. center 试一试
当前视角的中心点。可以是包含两个 number
类型(表示像素值)或 string
类型(表示相对容器的百分比)的数组。
从 5.3.3
版本开始支持 string
类型。
例如:
center: [115.97, '30%']
series-graph. layout = 'none' 试一试
图的布局。
可选:
'circular'
采用环形布局,见示例 Les Miserables,布局相关的配置项见 graph.circular'force'
采用力引导布局,见示例 Force,布局相关的配置项见 graph.force
series-graph. force
力引导布局相关的配置项,力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力,每条边的两个节点之间添加一个引力,每次迭代节点会在各个斥力和引力的作用下移动位置,多次迭代后节点会静止在一个受力平衡的位置,达到整个模型的能量最小化。
力引导布局的结果有良好的对称性和局部聚合性,也比较美观。
series-graph.force. initLayout
series-graph.force. repulsion = 50 试一试
节点之间的斥力因子。
支持设置成数组表达斥力的范围,此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
series-graph.force. edgeLength = 30 试一试
边的两个节点之间的距离,这个距离也会受 repulsion。
支持设置成数组表达边长的范围,此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例
// 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
edgeLength: [10, 50]
series-graph.force. layoutAnimation = true 试一试
因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。
series-graph.force. friction = 0.6 试一试
series-graph. roam 试一试
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale'
或者 'move'
。设置成 true
为都开启
series-graph. symbol 试一试
节点标记的图形。
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'
series-graph. symbolSize 试一试
节点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
series-graph. symbolRotate 试一试
节点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
series-graph. symbolOffset = [0, 0] 试一试
节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '-50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
series-graph. edgeSymbol = ['none', 'none']
边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头,如下:
edgeSymbol: ['circle', 'arrow']
series-graph. itemStyle
图形样式。
series-graph.itemStyle. color = 自适应 试一试
图形的颜色。 默认从全局调色盘 option.color 获取颜色。
支持使用
rgb(255,255,255)
,rgba(255,255,255,1)
,#fff
等方式设置为纯色,也支持设置为渐变色和纹理填充,具体见option.color
支持使用回调函数。回调函数格式如下:
(params: Object) => Color
传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
series-graph.itemStyle. borderType = 'solid' 试一试
描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合
borderDashOffset
可实现更灵活的虚线效果。
例如:
{
borderType: [5, 10],
borderDashOffset: 5
}
series-graph.itemStyle. borderDashOffset 试一试
series-graph.itemStyle. borderCap = 'butt' 试一试
从
v5.0.0
开始支持
用于指定线段末端的绘制方式,可以是:
'butt'
: 线段末端以方形结束。'round'
: 线段末端以圆形结束。'square'
: 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
默认值为 'butt'
。 更多详情可以参考 MDN lineCap。
series-graph.itemStyle. borderJoin = 'bevel' 试一试
从
v5.0.0
开始支持
用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。
可以是:
'bevel'
: 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。'round'
: 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。'miter'
: 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过borderMiterLimit
属性看到效果。
默认值为 'bevel'
。 更多详情可以参考 MDN lineJoin。
series-graph.itemStyle. borderMiterLimit = 10 试一试
从
v5.0.0
开始支持
用于设置斜接面限制比例。只有当
borderJoin
为 miter
时,
borderMiterLimit
才有效。
默认值为 10
。负数、0
、Infinity
和 NaN
均会被忽略。
更多详情可以参考 MDN miterLimit。
series-graph.itemStyle. shadowBlur 试一试
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
series-graph. lineStyle
关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'
或者'target'
特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。
series-graph.lineStyle. color = '#aaa' 试一试
线的颜色。
支持使用
rgb(255,255,255)
,rgba(255,255,255,1)
,#fff
等方式设置为纯色,也支持设置为渐变色和纹理填充,具体见option.color
series-graph.lineStyle. type = 'solid' 试一试
线的类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合
dashOffset
可实现更灵活的虚线效果。
例如:
{
type: [5, 10],
dashOffset: 5
}
series-graph.lineStyle. dashOffset 试一试
series-graph.lineStyle. cap = 'butt' 试一试
从
v5.0.0
开始支持
用于指定线段末端的绘制方式,可以是:
'butt'
: 线段末端以方形结束。'round'
: 线段末端以圆形结束。'square'
: 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
默认值为 'butt'
。 更多详情可以参考 MDN lineCap。
series-graph.lineStyle. join = 'bevel' 试一试
从
v5.0.0
开始支持
用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。
可以是:
'bevel'
: 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。'round'
: 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。'miter'
: 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过miterLimit
属性看到效果。
默认值为 'bevel'
。 更多详情可以参考 MDN lineJoin。
series-graph.lineStyle. miterLimit = 10 试一试
从
v5.0.0
开始支持
用于设置斜接面限制比例。只有当
join
为 miter
时,
miterLimit
才有效。
默认值为 10
。负数、0
、Infinity
和 NaN
均会被忽略。
更多详情可以参考 MDN miterLimit。
series-graph.lineStyle. shadowBlur 试一试
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
series-graph. label
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
series-graph.label. position = 'inside' 试一试
标签的位置。
可以通过内置的语义声明位置:
示例:
position: 'top'
支持:
top
/left
/right
/bottom
/inside
/insideLeft
/insideRight
/insideTop
/insideBottom
/insideTopLeft
/insideBottomLeft
/insideTopRight
/insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
示例:
// 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%']
参见:label position。
series-graph.label. distance = 5 试一试
series-graph.label. formatter
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \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-graph.label. fontWeight = 'normal' 试一试
文字字体的粗细。
可选:
'normal'
'bold'
'bolder'
'lighter'
- 100 | 200 | 300 | 400...
series-graph.label. fontFamily = 'sans-serif' 试一试
文字的字体系列。
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
series-graph.label. align 试一试
文字水平对齐方式,默认自动。
可选:
'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{
align: right,
rich: {
a: {
// 没有设置 `align`,则 `align` 为 right
}
}
}
series-graph.label. verticalAlign 试一试
文字垂直对齐方式,默认自动。
可选:
'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{
verticalAlign: bottom,
rich: {
a: {
// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
}
}
}
series-graph.label. lineHeight 试一试
行高。
rich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{
lineHeight: 56,
rich: {
a: {
// 没有设置 `lineHeight`,则 `lineHeight` 为 56
}
}
}
series-graph.label. backgroundColor = 'transparent' 试一试
文字块背景色。
可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
backgroundColor: {
image: 'xxx/xxx.png'
// 这里可以是图片的 URL,
// 或者图片的 dataURI,
// 或者 HTMLImageElement 对象,
// 或者 HTMLCanvasElement 对象。
}
当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
series-graph.label. borderType = 'solid' 试一试
文字块边框描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合
borderDashOffset
可实现更灵活的虚线效果。
例如:
{
borderType: [5, 10],
borderDashOffset: 5
}
series-graph.label. borderDashOffset 试一试
series-graph.label. padding 试一试
文字块的内边距。例如:
padding: [3, 4, 5, 6]
:表示[上, 右, 下, 左]
的边距。padding: 4
:表示padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示padding: [3, 4, 3, 4]
。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
series-graph.label. textBorderType = 'solid' 试一试
文字本身的描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合
textBorderDashOffset
可实现更灵活的虚线效果。
例如:
{
textBorderType: [5, 10],
textBorderDashOffset: 5
}
series-graph.label. textBorderDashOffset 试一试
series-graph.label. overflow = 'none' 试一试
文字超出宽度是否截断或者换行。配置width
时有效
'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
'break'
换行'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行
series-graph.label. rich
在 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
},
...
}
}
详情参见教程:富文本标签
所有属性
series-graph. edgeLabel
series-graph.edgeLabel. position = 'middle'
标签位置,可选:
'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。
series-graph.edgeLabel. formatter
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \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-graph.edgeLabel. fontWeight = 'normal' 试一试
文字字体的粗细。
可选:
'normal'
'bold'
'bolder'
'lighter'
- 100 | 200 | 300 | 400...
series-graph.edgeLabel. fontFamily = 'sans-serif' 试一试
文字的字体系列。
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
series-graph.edgeLabel. align 试一试
文字水平对齐方式,默认自动。
可选:
'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{
align: right,
rich: {
a: {
// 没有设置 `align`,则 `align` 为 right
}
}
}
series-graph.edgeLabel. verticalAlign 试一试
文字垂直对齐方式,默认自动。
可选:
'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{
verticalAlign: bottom,
rich: {
a: {
// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
}
}
}
series-graph.edgeLabel. lineHeight 试一试
行高。
rich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{
lineHeight: 56,
rich: {
a: {
// 没有设置 `lineHeight`,则 `lineHeight` 为 56
}
}
}
series-graph.edgeLabel. backgroundColor = 'transparent' 试一试
文字块背景色。
可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
backgroundColor: {
image: 'xxx/xxx.png'
// 这里可以是图片的 URL,
// 或者图片的 dataURI,
// 或者 HTMLImageElement 对象,
// 或者 HTMLCanvasElement 对象。
}
当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
series-graph.edgeLabel. borderType = 'solid' 试一试
文字块边框描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合
borderDashOffset
可实现更灵活的虚线效果。
例如:
{
borderType: [5, 10],
borderDashOffset: 5
}
series-graph.edgeLabel. borderDashOffset 试一试
series-graph.edgeLabel. padding 试一试
文字块的内边距。例如:
padding: [3, 4, 5, 6]
:表示[上, 右, 下, 左]
的边距。padding: 4
:表示padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示padding: [3, 4, 3, 4]
。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
series-graph.edgeLabel. textBorderType = 'solid' 试一试
文字本身的描边类型。
可选:
'solid'
'dashed'
'dotted'
自 v5.0.0
开始,也可以是 number
或者 number
数组,用以指定线条的 dash array,配合
textBorderDashOffset
可实现更灵活的虚线效果。
例如:
{
textBorderType: [5, 10],
textBorderDashOffset: 5
}
series-graph.edgeLabel. textBorderDashOffset 试一试
series-graph.edgeLabel. overflow = 'none' 试一试
文字超出宽度是否截断或者换行。配置width
时有效
'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
'break'
换行'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行
series-graph.edgeLabel. rich
在 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
},
...
}
}
详情参见教程:富文本标签
所有属性
series-graph. labelLayout
从
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-graph.labelLayout. moveOverlap
在标签重叠的时候是否挪动标签位置以防止重叠。
目前支持配置为:
'shiftX'
水平方向依次位移,在水平方向对齐时使用'shiftY'
垂直方向依次位移,在垂直方向对齐时使用
下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。
series-graph.labelLayout. labelLinePoints
标签引导线三个点的位置。格式为:
[[x, y], [x, y], [x, y]]
在饼图中常用来微调已经计算好的引导线,其它情况一般不建议设置。
series-graph. emphasis
高亮状态的图形样式。
series-graph.emphasis. disabled 试一试
从
v5.3.0
开始支持
是否关闭高亮状态。
关闭高亮状态可以在鼠标移到图形上,tooltip 触发,或者图例联动的时候不再触发高亮效果。在图形非常多的时候可以关闭以提升交互流畅性。
series-graph.emphasis. scale = true 试一试
从
v5.0.0
开始支持
是否开启高亮后节点的放大效果。从 5.3.2
版本开始支持 number
,用以设置高亮放大倍数,默认放大 1.1 倍。
series-graph.emphasis. focus = 'none'
从
v5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。
'series'
聚焦当前高亮的数据所在的系列的所有图形。
'adjacency'
聚焦关系图中的邻接点和边的图形。
示例:
下面代码配置了柱状图在高亮一个图形的时候,淡出当前直角坐标系所有其它的系列。
emphasis: {
focus: 'series',
blurScope: 'coordinateSystem'
}
series-graph.emphasis. blurScope = 'coordinateSystem'
从
v5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。
series-graph.emphasis. itemStyle
所有属性
series-graph.emphasis. lineStyle
所有属性
series-graph.emphasis. label
所有属性
series-graph.emphasis. edgeLabel
所有属性
series-graph. blur
从
v5.0.0
开始支持
淡出状态的图形样式。开启 emphasis.focus 后有效。
series-graph.blur. itemStyle
所有属性
series-graph.blur. lineStyle
所有属性
series-graph.blur. label
所有属性
series-graph.blur. edgeLabel
所有属性
series-graph. select
从
v5.0.0
开始支持
选中状态的图形样式。开启 selectedMode 后有效。
series-graph.select. disabled 试一试
从
v5.3.0
开始支持
是否可以被选中。在开启 selectedMode
的时候有效,可以用于关闭部分数据。
series-graph.select. itemStyle
所有属性
series-graph.select. lineStyle
所有属性
series-graph.select. label
所有属性
series-graph.select. edgeLabel
所有属性
series-graph. selectedMode 试一试
从
v5.0.0
开始支持
选中模式的配置,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'
,'multiple'
,'series'
分别表示单选,多选以及选择整个系列。
从 v5.3.0 开始支持
'series'
。
series-graph. categories
节点分类的类目,可选。
如果节点有分类的话可以通过 data[i].category 指定每个节点的类目,类目的样式会被应用到节点样式上。图例也可以基于categories
名字展现和筛选。
series-graph.categories. symbol 试一试
该类目节点标记的图形。
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'
series-graph.categories. symbolSize 试一试
该类目节点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
series-graph.categories. symbolRotate 试一试
该类目节点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
series-graph.categories. symbolOffset = [0, 0] 试一试
该类目节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '-50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
series-graph.categories. itemStyle
该类目节点的样式。
所有属性
series-graph.categories. label
该类目节点标签的样式。
所有属性
series-graph. autoCurveness
针对节点之间存在多边的情况,自动计算各边曲率,默认不开启。
设置为 true
时,开启自动曲率计算,默认边曲率数组长度为 20
,如果两点间边数大于 20
,请使用 number
或 Array
设置边曲率数组。
设置为 number
时,表示两点间边曲率数组的长度,由内部算法给出计算结果。
设置为 Array
时,表示直接指定边曲率数组,多边曲率会从数组中直接按顺序选取。
注意: 如果设置 lineStyle.curveness 则此属性失效。
series-graph. data
关系图的节点数据列表。
data: [{
name: '1',
x: 10,
y: 10,
value: 10
}, {
name: '2',
x: 100,
y: 100,
value: 20,
symbolSize: 20,
itemStyle: {
color: 'red'
}
}]
注意: 节点的name
不能重复。
所有属性
series-graph. links
节点间的关系数据。示例:
links: [{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}]
series-graph.links. lineStyle
关系边的线条样式。
所有属性
series-graph.links. label
所有属性
series-graph. markPoint
图表标注。
所有属性
series-graph. markLine
图表标线。
所有属性
series-graph. zlevel
所有图形的 zlevel 值。
zlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
series-graph. left = 'center' 试一试
组件离容器左侧的距离。
left
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为 'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
series-graph. top = 'middle' 试一试
组件离容器上侧的距离。
top
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为 'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
series-graph. right = 'auto' 试一试
组件离容器右侧的距离。
right
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
series-graph. bottom = 'auto' 试一试
组件离容器下侧的距离。
bottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
series-graph. animationDuration = 1000 试一试
初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:
animationDuration: function (idx) {
// 越往后的数据时长越大
return idx * 100;
}
series-graph. animationDelay
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelay: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
series-graph. animationDurationUpdate = 300 试一试
数据更新动画的时长。
支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:
animationDurationUpdate: function (idx) {
// 越往后的数据时长越大
return idx * 100;
}
series-graph. animationDelayUpdate
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
series-graph. tooltip
本系列特定的 tooltip 设定。