目录
itemStyle.borderColor = inherit
itemStyle.borderType = inherit
itemStyle.borderDashOffset = inherit
textStyle.textBorderColor、textBorderWidth、textBorderType、textBorderDashOffset
textStyle.textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY
legend.borderColor、borderWidth、borderRadius
legend.shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
legend
图例组件
图例组件展现了不同系列的标记，颜色和名字
可以通过点击图例控制哪些系列不显示
legend.type
图例的类型。可选值：
- ' plain '：普通图例，默认
- ' scroll '：可滚动翻页的图例。当图例数量较多时可使用
legend.zlevel
所有图形的 zlevel 值
用于 Canvas 分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
legend.z = 2
组件的所有图形的 z 值。控制图形的前后顺序
z 值小的图形会被 z 值大的图形覆盖
z 相比 zlevel 优先级更低，而且不会创建新的 Canvas
legend.left，right
图例组件离容器左侧、右侧的距离
可选值：'20'(px)、'20%'，'left'，'center'，'right'
当值为后三个时，组件会根据相应的位置自动对齐
legend.top，bottom
图例组件离容器上侧，下侧的距离
可选值：'20'(px)，'20%'，'top'，'middle'，'bottom'
当值为后三个时，组件会根据相应的位置自动对齐
legend.width，height
图例组件的宽高，默认自适应
legend.orient = 'horizontal'
图例列表的布局朝向。可选值
- 'horizontal'：横向
- 'vertical'：纵向
legend.align = 'auto'
图例标记和文本的对齐。
默认自动，根据组件的位置和 orient 决定
当组件的 left 值为 'right'，以及纵向布局（orient 为 'vertical'）的时候为右对齐，即默认为 'right'
可选值：
- 'auto'
- 'left'
- 'right'
legend.padding = 5
图例内边距，单位 px，默认各方向为 5
接受数组分别设定上右下左边距
legend.itemGap = 10
图例每项之间的间隔
横向布局时为水平间隔，纵向布局时为纵向间隔
legend.itemWidth = 10
legend.itemHeight = 10
图例标记的图形宽高
legend.itemStyle
图例的图形样式
属性取值 'inherit' 时，表示继承系列中的属性值
itemStyle.color = inherit
图形的颜色
支持使用纯色，也可设置为渐变色和纹理填充
itemStyle.borderColor = inherit
图形的描边颜色。支持颜色格式同 color，不支持回调函数
itemStyle.borderWidth = auto
取值可以为 auto 和数字
当值为 'auto' 时，如果系列有 borderWidth 取 2，如果系列没有 borderWidth 则取 0。
itemStyle.borderType = inherit
描边类型。可选：
- ' solid '
- ' dashed '
- ' dotted '
也可以使用 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果
{
borderType: [5, 10],
borderDashOffset: 5
}itemStyle.borderDashOffset = inherit
用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果
itemStyle.borderCap = inherit
用于指定线段末端的绘制方式。可选值：
- ' butt '：线段末端以方形结束。默认
- ' round '：线段末端以圆形结束
- ' square '：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
itemStyle.shadowBlur
图形阴影的模糊大小，该属性配合 shadowColor，shadowOffsetX，shadowOffsetY 一起设置图形的阴影效果
itemStyle.shadowColor
阴影颜色
itemStyle.shadowOffsetX
itemStyle.shadowOffsetY
阴影水平、垂直方向上的偏移距离
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5
}itemStyle.opacity = inherit
图形透明度。
支持从 0 到 1 的数字，为 0 时不绘制该图形
itemStyle.decal = inherit
图形的贴花图案，在 aria.enabled 与 aria.decal.show 都是 true 的情况下才生效
如果为 'none' 表示不使用贴花图案
所有属性
{
symbol, symbolSize, symbolKeepAspect, color, backgroundColor,
dashArrayX, dashArrayY,rotation, maxTileWidth, maxTileHeight
}legend.lineStyle
图例图形中线的样式，用于诸如折线图图例横线的样式设置
属性值取 'inherit' 时，表示继承系列中的属性值
lineStyle.color
线的颜色
支持纯色和渐变色与纹理填充
lineStyle.width
线宽
lineStyle.type
线的类型。可选：
- solid
- dashed
- dotted
也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 dashOffset 可实现更灵活的虚线效果
lineStyle.dashOffset
用于设置虚线的偏移量，可搭配 type 指定 dash array 实现灵活的虚线效果
lineStyle.cap
用于指定线段末端的绘制方式
lineStyle.shadowBlur
图形阴影的模糊大小
lineStyle.shadowColor
阴影颜色
lineStyle.shadowOffsetX
lineStyle.shadowOffsetY
阴影水平、垂直方向的偏移量
lineStyle.opacity
图形透明度。0 到 1
legend.symbolRotate
图形旋转角度
legend.formatter
用来格式化图例文本，支持字符串模板和回调函数两种形式
// 示例
// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function(name) {
return 'Legend' + name;
}legend.selectedMode
图例选择的模式
控制是否可以通过点击图例改变系列的显示状态
默认开启图例选择，可以设为 false 关闭
除此之外也可以设成 ' single '，' multiple ' 使用单选或者多选模式
legend.inactiveColor
图例关闭时的颜色
legend.inactiveBorderColor
图例关闭时的描边颜色
legend.inactiveBorderWidth
图例关闭时的描边粗细
legend.selected
图例选中状态表
// 示例
selected: {
// 选中系列1
'系列1': true,
// 不选中系列2
'系列2': false
}legend.textStyle
图例的公用文本样式
textStyle.color
文字的颜色
textStyle.fontStyle
文字字体的风格。可选：
- normal
- italic
- oblique
textStyle.fontWeight
文字字体的粗细。可选：
- normal
- bold
- bolder
- lighter
- 100 | 200 | 300 | 400 ......
textStyle.fontFamily
文字的字体系列
'sans-serif' , 'serif' , 'monospace' , 'Arial' , 'Courier New' , 'Microsoft YaHei' , ...
textStyle.fontSize
文字的字体大小
textStyle.lineHeight
行高
rich 中如果没有设置 lineHeigh，则取父层级的 lineHeight
{
lineHeight: 20,
rich: {
a: {
// 不设置 lineHeight，继承父层级的 lineHeight
}
}
}textStyle.backgroundColor
文字块背景色
可以使用颜色值和图片
backgroundColor: { image: 'xxx/xxx.png' }当使用图片的时候，可以使用 width 或者 height 指定宽高，也可以不指定自适应
textStyle.borderColor
文字块边框颜色
textStyle.borderWidth
文字块边框宽度
textStyle.borderType
文字块边框描边类型。可选：
- solid
- dashed
- dotted
也可以是 number 或者 number 数组，用于指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果
textStyle.borderDashOffset
用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果
textStyle.borderRadius
文字块的圆角
textStyle.padding
文字块的内边距
文字块的 width 和 height 指定的是内容高度，不包含 padding
textStyle.shadowColor
文字块的背景颜色
textStyle.shadowBlur
文字块的背景阴影长度
textStyle.shadowOffsetX
textStyle.shadowOffsetY
文字块的背景阴影 X、Y 偏移
textStyle.width / height
文本的显示宽度/高度
textStyle.textBorderColor、textBorderWidth、textBorderType、textBorderDashOffset
文字本身的描边颜色，描边宽度、描边类型、虚线偏移量
textStyle.textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY
文字本身的阴影颜色、阴影长度、阴影 X 偏移、阴影 Y 偏移
textStyle.overflow
文字超出宽度是否截断或者换行。配置 width 时有效
- truncate：截断，并在末尾显示 ellipsis 配置的文本，默认为 ...
- break：换行
- breakAll：换行。与break 不同的是，在英语等拉丁文中，breakAll 还会强制单词内换行
textStyle.ellipsis = '...'
在 overflow 配置为 'truncate' 时，可以通过该属性配置末尾显示的文本
textStyle.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.png'
},
height: 30
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#339922',
borderRadius: 4
},
...
}
}legend.tooltip
图例的 tooltip 配置，配置项同 tooltip
默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip
legend: {
formatter: function(name) {
return echarts.format.truncateText(name, 40, '14px Microsoft YaHei', '...');
},
tooltip: {
show: true
}
}legend.icon
图例项的 icon
Echarts 提供的标记类型包括
- circle：圆形
- rect：矩形
- roundRect：圆角矩形
- triangle：三角形
- diamond：菱形
- pin：圆形
- arrow：箭头
- none
- 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURL
URL 为图片链接：
'image://http://xxx.xxx.xxx/a/b.png'legend.data
图例的数据数组。数组项通常为一个字符串，每一项代表一系列的 name
图例组件会自动根据对应系列的图形标记来绘制自己的颜色和标记，特殊字符串 ' '（空字符串）或者 '\n'（换行字符串）用于图例的换行
如果设置单独一项的样式，也可以把该项携程配置项对象
此时必须使用 name 属性对应表示系列的 name
data: [{
name: '系列1',
// 强制设置图形为圆
icon: 'circle',
// 设置文本为红色
textStyle: {
color: red
}
}]所有属性
{ name, icon, itemStyle, lineStyle, symbolRotate(图形旋转角度), textStyle }legend.backgroundColor
图例背景颜色。默认透明
legend.borderColor、borderWidth、borderRadius
图例的边框颜色、边框宽度、圆角半径
borderRadius: 5,
borderRadius: [5, 0, 0, 5]legend.shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
图例阴影的模糊大小、阴影颜色、阴影水平、竖直方向上的偏移距离
- shadowBlur 生效前提：设置 show: true 以及值不为 transpatent 的背景颜色 backgroundColor
扫一扫
933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
