通用属性
-
title
说明:标题组件(主标题、副标题),ECharts 2.x单实例只能拥有一个标题组件,ECharts 3可以拥有多个。
属性:- id:指定则可用于在 option 或者 API 中引用组件
- show
主标题
- text:标题文本,支持
\n
换行 - padding:number、array
- left、top、right、bottom:距离容器的距离(像素值、auto、百分比)
- textAlign:主标题与副标题的水平对齐方式,auto、left、right、center
- textVerticalAlign:主标题与副标题的垂直对齐方式,auto、top、bottom、middle
- itemGap:主副之间间距
- backgroundColor
- borderColor、borderWidth、borderRadius
- textStyle:作用在字体本身
对象
- color:主标题颜色(字符串)
- fontStyle(normal、italic、oblique)、fontWeight、fontFamily、fontSize、lineHeight
- width、height:指定内容宽高(不指定rich则不能设置此项)
- textBorderColor、textBorderWidth
- textShadowColor、textShadowBlur(阴影长度)、textShadowOffsetX、textShadowOffsetY(偏移量)
- rich:自定义富文本样式
- shadowBlur:图形阴影模糊大小,配合shadowColor,shadowOffsetX, shadowOffsetY一起使用,生效前提:show: true 以及backgroundColor不为 tranparent
- shadowColor、shadowOffsetX、shadowOffsetY
- triggerEvent:是否触发事件
- target:指定打开主标题超链接方式:self、blank
- zlevel:不同值的图形放置在不同的 Canvas 中,Canvas 分层是优化手段,经常变化的设置统一zlevel,但注重多Canvas 会引起内存开销增大。
- z:比zlevel的优先级低,且不会创建新的Canvas
副标题
- subtext:副标题文本,支持
\n
换行 - sublink:副标题超链接
- subtarget:打开方式
- subtextStyle:与主标题一致
对象
- align:left、center、right
- `verticalAlign:top、middle、bottom
-
legend
说明:图例组件,展示标记(symbol)、颜色、名字,点击控制系列的显示隐藏
属性:- type:图例的类型,plain(默认)、scroll(图例过多时)
- width、height:默认自适应
- orient:图例列表的布局朝向,horizontal、vertical
- align:图例与文本的对齐方式,auto、left、right
- itemGap:图例每项之间的间隔
- itemWidth、itemHeight:图例标记的图形宽高
- symbolKeepAspect:图标形式是 path://时 ,缩放时是否保持图形长宽比。
- formatter:格式化图例文本,支持字符串模板和回调函数
// 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' // 使用回调函数 formatter: function (name) { return 'Legend ' + name; }
- selectedMode:图例选择的模式,single、multiple、true、false
- inactiveColor:图例关闭时的颜色
- selected:图例选中状态表
selected: { // 选中'系列1' '系列1': true, // 不选中'系列2' '系列2': false }
- textStyle:legend图标文字
对象
- color、backgroundColor(支持照片)
- width、height:指定内容宽高(不指定rich则不能设置此项)、padding
- fontStyle(normal、italic、oblique)、fontWeight、fontFamily、fontSize、lineHeight
- borderColor、borderWidth、borderRadius
- textBorderColor、textBorderWidth、textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY
- shadowColor、shadowBlur(阴影长度)、shadowOffsetX、shadowOffsetY(偏移量)
- rich:自定义富文本样式
- tooltip:legend 文字很多的时候对文字做裁剪开启提示框
- icon:circle,rect,roundRect,triangle,diamond,pin,arrow,none,image://url(图片的链接、dataURI)
- data:图例的数据
数组
- name:图例项的名称,应等于某系列的name值(如果是饼图,也可以是饼图单个数据的 name)。
- icon
- textStyle
- animation:图例翻页是否使用动画
- animationDurationUpdate:翻页动画时长
- emphasis:标签
对象
- selectorLabel
对象
- show
- width , height , padding
- distance(距离图形元素的距离), rotate , offset
- color , backgroundColor
- fontStyle , fontWeight , fontFamily , fontSize
- align , verticalAlign , lineHeight
- borderColor , borderWidth , borderRadius
- shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY
- textBorderColor , textBorderWidth
- textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY
- rich
- selectorLabel
- selector:选择器按钮,包括全选和反选功能
selector: [{ type: 'all or inverse', title: '全选' }, { type: 'inverse', title: '反选' }] // 或 selector: true // 或 selector: ['all', 'inverse']
- selectorLabel:选择器按钮的文本标签样式,同
emphasis
- selectorPosition:选择器的位置,
start
、end
- selectorItemGap:选择器按钮之间的间隔
- selectorButtonGap:选择器按钮与图例组件之间的间隔
与title相同属性
- id、show
- padding
- left、top、right、bottom
- backgroundColor
- borderColor、borderWidth、borderRadius
- shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
- zlevel、z
以下type为'scroll'时生效
- scrollDataIndex:可指定图例滚动到哪里
示例: https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1
- pageButtonItemGap:分页控制块中,按钮和页信息之间的间隔
- pageButtonGap:分页控制块与图例之间的间隔
- pageButtonPosition:分页控制块放置位置,
'start'、 'end'
- pageFormatter:分页控制块格式,
{current}/{total}
- pageIcons:分页控制块图标
对象
- horizontal
- vertical
- pageIconColor:翻页按钮的颜色
- pageIconInactiveColor:翻页按钮不激活时的颜色
- pageIconSize:翻页按钮的大小,数字或数组
- pageTextStyle:图例页信息的文字样式
对象
- color
- width、height:文字块宽高(不指定rich则不能设置此项)
- fontStyle(normal、italic、oblique)、fontWeight、fontFamily、fontSize、lineHeight
- textBorderColor、textBorderWidth、textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY