{ "id": { "desc": "
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
\n" }, "name": { "desc": "系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
是否启用图例 hover 时的联动高亮。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "coordinateSystem": { "desc": "该系列使用的坐标系,可选:
\nnull
或者 'none'
无坐标系。
\n'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
\n'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
\n'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。
\n'none'
不使用坐标系。
\n使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
\n" }, "yAxisIndex": { "desc": "使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
\n" }, "polarIndex": { "desc": "使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
\n" }, "geoIndex": { "desc": "使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
\n" }, "calendarIndex": { "desc": "使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。
\n" }, "hoverAnimation": { "desc": "是否开启鼠标 hover 节点的提示动画效果。
\n" }, "center": { "desc": "\n\n当前视角的中心点
\n例如:
\ncenter: [115.97, 29.71]\n
\n",
"uiControl": {
"type": "vector",
"default": "0,0",
"dims": "x,y"
}
},
"zoom": {
"desc": "\n\n当前视角的缩放比例。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "step": "0.1" } }, "layout": { "desc": "\n\n图的布局。
\n可选:
\n'circular'
采用环形布局,见示例 Les Miserables,布局相关的配置项见 graph.circular
'force'
采用力引导布局,见示例 Force,布局相关的配置项见 graph.force
环形布局相关配置
\n" }, "circular.rotateLabel": { "desc": "\n\n是否旋转标签,默认不旋转
\n", "uiControl": { "type": "boolean" } }, "force": { "desc": "力引导布局相关的配置项,力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力,每条边的两个节点之间添加一个引力,每次迭代节点会在各个斥力和引力的作用下移动位置,多次迭代后节点会静止在一个受力平衡的位置,达到整个模型的能量最小化。
\n力引导布局的结果有良好的对称性和局部聚合性,也比较美观。
\n" }, "force.initLayout": { "desc": "进行力引导布局前的初始化布局,初始化布局会影响到力引导的效果。
\n默认不进行任何布局,使用节点中提供的 x, y 作为节点的位置。如果不存在的话会随机生成一个位置。
\n也可以选择使用环形布局 'circular'
。
节点之间的斥力因子。
\n支持设置成数组表达斥力的范围,此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
\n", "uiControl": { "type": "number", "min": "0", "step": "5", "default": "50" } }, "force.gravity": { "desc": "\n\n节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.01", "default": "0.1" } }, "force.edgeLength": { "desc": "\n\n边的两个节点之间的距离,这个距离也会受 repulsion。
\n支持设置成数组表达边长的范围,此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例
\n// 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50\nedgeLength: [10, 50]\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "5",
"default": "30"
}
},
"force.layoutAnimation": {
"desc": "\n\n因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "force.friction": { "desc": "\n\n\n\n\n\n从
\nv4.5.0
开始支持
这个参数能减缓节点的移动速度。取值范围 0 到 1。
\n但是仍然是个试验性的参数,参见 #11024。
\n", "uiControl": { "type": "number", "min": "0", "max": "1", "step": "0.01", "default": "0.6" } }, "roam": { "desc": "\n\n是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale'
或者 'move'
。设置成 true
为都开启
鼠标漫游缩放时节点的相应缩放比例,当设为0
时节点不随着鼠标的缩放而缩放
节点是否可拖拽,只在使用力引导布局的时候有用。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "focusNodeAdjacency": { "desc": "\n\n是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "symbol": { "desc": "\n\n关系图节点标记的图形。
\nECharts 提供的标记类型包括 \n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'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'\n
如果需要每个数据的图形不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => string\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
关系图节点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number|Array\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
关系图节点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
如果需要每个数据的旋转角度不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
\n\n", "uiControl": { "type": "angle", "min": "-180", "max": "180", "step": "1" } }, "symbolKeepAspect": { "desc": "\n\n从 4.8.0 开始支持回调函数。
\n
如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
关系图节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头,如下:
\nedgeSymbol: ['circle', 'arrow']\n
\n"
},
"edgeSymbolSize": {
"desc": "\n\n边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
\n", "uiControl": { "type": "vector", "min": "0", "default": "10" } }, "cursor": { "desc": "\n\n鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor
。
图形样式。
\n" }, "itemStyle.color": { "desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
支持使用回调函数。回调函数格式如下:
\n(params: Object) => Color\n
\n传入的是数据项 seriesIndex
, dataIndex
, data
, value
等各个参数。
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "lineStyle": { "desc": "关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'
或者'target'
特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。
线的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "lineStyle.width": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
线宽。
\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "lineStyle.type": { "desc": "\n\n线的类型。
\n可选:
\n'solid'
'dashed'
'dotted'
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "lineStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "lineStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "0.5", "min": "0", "max": "1", "step": "0.01" } }, "lineStyle.curveness": { "desc": "\n\n边的曲度,支持从 0 到 1 的值,值越大曲度越大。
\n", "uiControl": { "type": "number", "min": "0", "max": "1", "step": "0.01", "default": "0" } }, "label": { "desc": "图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 emphasis
状态。
是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "label.position": { "desc": "\n\n\n标签的位置。
\n可以通过内置的语义声明位置:
\n示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.show": { "desc": "是否显示标签。
\n" }, "edgeLabel.position": { "desc": "标签位置,可选:
\n'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"edgeLabel.color": {
"desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "edgeLabel.fontStyle": { "desc": "\n\n文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "edgeLabel.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "edgeLabel.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"edgeLabel.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"edgeLabel.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"edgeLabel.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "edgeLabel.borderWidth": { "desc": "\n\n文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "edgeLabel.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "edgeLabel.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "edgeLabel.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "edgeLabel.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "edgeLabel.rich.文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "edgeLabel.rich.文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "edgeLabel.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "edgeLabel.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"edgeLabel.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"edgeLabel.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"edgeLabel.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "edgeLabel.rich.文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "edgeLabel.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "edgeLabel.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "edgeLabel.rich.文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "edgeLabel.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "edgeLabel.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "edgeLabel.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis": { "desc": "高亮的图形样式。
\n" }, "emphasis.itemStyle.color": { "desc": "\n\n图形的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "emphasis.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "emphasis.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "emphasis.itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "emphasis.itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "emphasis.lineStyle.color": { "desc": "\n\n线的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "emphasis.lineStyle.width": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
线宽。
\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "emphasis.lineStyle.type": { "desc": "\n\n线的类型。
\n可选:
\n'solid'
'dashed'
'dotted'
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"emphasis.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "emphasis.lineStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "emphasis.lineStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "emphasis.label.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "emphasis.label.position": { "desc": "\n\n\n标签的位置。
\n可以通过内置的语义声明位置:
\n示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "emphasis.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "emphasis.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "emphasis.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "emphasis.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"emphasis.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"emphasis.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "emphasis.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "emphasis.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"emphasis.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"emphasis.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.show": { "desc": "是否显示标签。
\n" }, "emphasis.edgeLabel.position": { "desc": "标签位置,可选:
\n'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"emphasis.edgeLabel.color": {
"desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "emphasis.edgeLabel.fontStyle": { "desc": "\n\n文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "emphasis.edgeLabel.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.edgeLabel.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"emphasis.edgeLabel.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.edgeLabel.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"emphasis.edgeLabel.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "emphasis.edgeLabel.borderWidth": { "desc": "\n\n文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.edgeLabel.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.edgeLabel.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.edgeLabel.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.edgeLabel.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "emphasis.edgeLabel.rich.文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "emphasis.edgeLabel.rich.文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "emphasis.edgeLabel.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.edgeLabel.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"emphasis.edgeLabel.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.edgeLabel.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"emphasis.edgeLabel.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "emphasis.edgeLabel.rich.文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.edgeLabel.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.edgeLabel.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.edgeLabel.rich.文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.edgeLabel.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.edgeLabel.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.edgeLabel.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories": { "desc": "节点分类的类目,可选。
\n如果节点有分类的话可以通过 data[i].category 指定每个节点的类目,类目的样式会被应用到节点样式上。图例也可以基于categories
名字展现和筛选。
类目名称,用于和 legend 对应以及格式化 tooltip 的内容。
\n" }, "categories.symbol": { "desc": "\n\n该类目节点标记的图形。
\nECharts 提供的标记类型包括 \n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'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'\n
",
"uiControl": {
"type": "icon",
"default": "circle"
}
},
"categories.symbolSize": {
"desc": "\n\n该类目节点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
该类目节点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
该类目节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
该类目节点的样式。
\n" }, "categories.itemStyle.color": { "desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n\n", "uiControl": { "type": "color" } }, "categories.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "categories.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"categories.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "categories.itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "categories.itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "categories.label": { "desc": "该类目节点标签的样式。
\n" }, "categories.label.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "categories.label.position": { "desc": "\n\n\n标签的位置。
\n可以通过内置的语义声明位置:
\n示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "categories.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "categories.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "categories.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "categories.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "categories.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"categories.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"categories.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"categories.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "categories.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "categories.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "categories.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "categories.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "categories.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "categories.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"categories.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"categories.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"categories.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "categories.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "categories.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "categories.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.itemStyle.color": { "desc": "\n\n图形的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "categories.emphasis.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "categories.emphasis.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"categories.emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "categories.emphasis.itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "categories.emphasis.itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "categories.emphasis.label.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "categories.emphasis.label.position": { "desc": "\n\n\n标签的位置。
\n可以通过内置的语义声明位置:
\n示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "categories.emphasis.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "categories.emphasis.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "categories.emphasis.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "categories.emphasis.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "categories.emphasis.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"categories.emphasis.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"categories.emphasis.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"categories.emphasis.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "categories.emphasis.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "categories.emphasis.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "categories.emphasis.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "categories.emphasis.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "categories.emphasis.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "categories.emphasis.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"categories.emphasis.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"categories.emphasis.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"categories.emphasis.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "categories.emphasis.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "categories.emphasis.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "categories.emphasis.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "categories.emphasis.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "categories.emphasis.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "autoCurveness": { "desc": "针对节点之间存在多边的情况,自动计算各边曲率。
\n设置为 number
时,表示两点间边曲率数组的长度,由内部算法给出计算结果。
设置为 Array
时,表示直接指定曲率数组,多边曲率会从数组中直接按顺序选取。
注意: 如果设置 lineStyle.curveness 则此属性失效。
\n" }, "data": { "desc": "关系图的节点数据列表。
\ndata: [{\n name: '1',\n x: 10,\n y: 10,\n value: 10\n}, {\n name: '2',\n x: 100,\n y: 100,\n value: 20,\n symbolSize: 20,\n itemStyle: {\n color: 'red'\n }\n}]\n
\n注意: 节点的name
不能重复。
数据项名称。
\n" }, "data.x": { "desc": "节点的初始 x 值。在不指定的时候需要指明layout
属性选择布局方式。
节点的初始 y 值。在不指定的时候需要指明layout
属性选择布局方式。
节点在力引导布局中是否固定。
\n" }, "data.value": { "desc": "数据项值。
\n" }, "data.category": { "desc": "数据项所在类目的 index。
\n" }, "data.symbol": { "desc": "\n\n该类目节点标记的图形。
\nECharts 提供的标记类型包括 \n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'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'\n
",
"uiControl": {
"type": "icon",
"default": "circle"
}
},
"data.symbolSize": {
"desc": "\n\n该类目节点标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
该类目节点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
该类目节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
该节点的样式。
\n" }, "data.itemStyle.color": { "desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n\n", "uiControl": { "type": "color" } }, "data.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "data.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"data.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "data.label": { "desc": "该节点标签的样式。
\n" }, "data.label.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "data.label.position": { "desc": "\n\n\n标签的位置。
\n可以通过内置的语义声明位置:
\n示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "data.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "data.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "data.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "data.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "data.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "data.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "data.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "data.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "data.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "data.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.itemStyle.color": { "desc": "\n\n图形的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "data.emphasis.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "data.emphasis.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.emphasis.itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.emphasis.itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "data.emphasis.label.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "data.emphasis.label.position": { "desc": "\n\n\n标签的位置。
\n可以通过内置的语义声明位置:
\n示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "data.emphasis.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "data.emphasis.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "data.emphasis.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "data.emphasis.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.emphasis.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.emphasis.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.emphasis.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.emphasis.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.emphasis.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "data.emphasis.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "data.emphasis.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "data.emphasis.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "data.emphasis.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.emphasis.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.emphasis.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.emphasis.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.emphasis.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.emphasis.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "data.emphasis.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "data.emphasis.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.tooltip": { "desc": "本系列每个数据项中特定的 tooltip 设定。
\n" }, "data.tooltip.position": { "desc": "\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。
\n可选:
\nArray
通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置。
\n示例:
\n // 绝对位置,相对于容器左侧 10px, 上侧 10 px\n position: [10, 10]\n // 相对位置,放置在容器正中间\n position: ['50%', '50%']\n
\nFunction
回调函数,格式如下:
\n (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
\n 参数:
\n point: 鼠标位置,如 [20, 40]。
\n params: 同 formatter 的参数相同。
\n dom: tooltip 的 dom 对象。
\n rect: 只有鼠标在图形上时有效,是一个用x
, y
, width
, height
四个属性表达的图形包围盒。
\n size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}
。
返回值:
\n 可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相 百分比。
\n 也可以是一个对象,如:{left: 10, top: 30}
,或者 {right: '20%', bottom: 40}
。
如下示例:
\n position: function (point, params, dom, rect, size) {\n // 固定在顶部\n return [point[0], '10%'];\n }\n
\n或者:
\n position: function (pos, params, dom, rect, size) {\n // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n
\n'inside'
鼠标所在图形的内部中心位置,只在 trigger 为'item'
的时候有效。
'top'
鼠标所在图形上侧,只在 trigger 为'item'
的时候有效。
'left'
鼠标所在图形左侧,只在 trigger 为'item'
的时候有效。
'right'
鼠标所在图形右侧,只在 trigger 为'item'
的时候有效。
'bottom'
鼠标所在图形底侧,只在 trigger 为'item'
的时候有效。
\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
\n1, 字符串模板
\n模板变量有 {a}
, {b}
,{c}
,{d}
,{e}
,分别表示系列名,数据名,数据值等。\n在 trigger 为 'axis'
的时候,会有多个系列的数据,此时可以通过 {a0}
, {a1}
, {a2}
这种后面加索引的方式表示系列的索引。\n不同图表类型下的 {a}
,{b}
,{c}
,{d}
含义不一样。\n其中变量{a}
, {b}
, {c}
, {d}
在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图、K线图 : {a}
(系列名称),{b}
(类目值),{c}
(数值), {d}
(无)
散点图(气泡)图 : {a}
(系列名称),{b}
(数据名称),{c}
(数值数组), {d}
(无)
地图 : {a}
(系列名称),{b}
(区域名称),{c}
(合并数值), {d}
(无)
饼图、仪表盘、漏斗图: {a}
(系列名称),{b}
(数据项名称),{c}
(数值), {d}
(百分比)
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
\n示例:
\nformatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n2, 回调函数
\n回调函数格式:
\n(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n
\n第一个参数 params
是 formatter 需要的数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n // 饼图的百分比\n percent: number,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n在 trigger 为 'axis'
的时候,或者 tooltip 被 axisPointer 触发的时候,params
是多个系列的数据数组。其中每项内容格式同上,并且,
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n注: ECharts 2.x 使用数组表示各参数的方式不再支持。
\n第二个参数 ticket
是异步回调标识,配合第三个参数 callback
使用。\n第三个参数 callback
是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 ticket
和 html
更新提示框浮层内容。
示例:
\nformatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n
\n"
},
"data.tooltip.backgroundColor": {
"desc": "\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
提示框浮层的背景颜色。
\n" }, "data.tooltip.borderColor": { "desc": "\n\n\n\n\n\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
提示框浮层的边框颜色。
\n", "uiControl": { "type": "color", "default": "#333" } }, "data.tooltip.borderWidth": { "desc": "\n\n\n\n\n\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
提示框浮层的边框宽。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.tooltip.padding": { "desc": "\n\n\n\n\n\n\n\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
\n使用示例:
\n// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5,左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"data.tooltip.textStyle": {
"desc": "\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
提示框浮层的文本样式。
\n" }, "data.tooltip.textStyle.color": { "desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "'#fff'" } }, "data.tooltip.textStyle.fontStyle": { "desc": "\n\n文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "data.tooltip.textStyle.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "14", "min": "1", "step": "1" } }, "data.tooltip.textStyle.lineHeight": { "desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.tooltip.textStyle.width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "data.tooltip.textStyle.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.tooltip.textStyle.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "data.tooltip.textStyle.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.tooltip.textStyle.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.tooltip.textStyle.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.tooltip.extraCssText": { "desc": "\n\n注意:
\nseries.data.tooltip
仅在 tooltip.trigger 为'item'
时有效。
额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:
\nextraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n"
},
"nodes": {
"desc": "别名,同 data
\n" }, "links": { "desc": "节点间的关系数据。示例:
\nlinks: [{\n source: 'n1',\n target: 'n2'\n}, {\n source: 'n2',\n target: 'n3'\n}]\n
\n"
},
"links.source": {
"desc": "边的源节点名称的字符串,也支持使用数字表示源节点的索引。
\n" }, "links.target": { "desc": "边的目标节点名称的字符串,也支持使用数字表示源节点的索引。
\n" }, "links.value": { "desc": "边的数值,可以在力引导布局中用于映射到边的长度。
\n" }, "links.lineStyle": { "desc": "关系边的线条样式。
\n" }, "links.lineStyle.color": { "desc": "\n\n线的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "links.lineStyle.width": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
线宽。
\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "links.lineStyle.type": { "desc": "\n\n线的类型。
\n可选:
\n'solid'
'dashed'
'dotted'
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"links.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "links.lineStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "links.lineStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "links.lineStyle.curveness": { "desc": "\n\n边的曲度,支持从 0 到 1 的值,值越大曲度越大。
\n", "uiControl": { "type": "number", "min": "0", "max": "1", "step": "0.01", "default": "0" } }, "links.label.show": { "desc": "是否显示标签。
\n" }, "links.label.position": { "desc": "标签位置,可选:
\n'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"links.label.color": {
"desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "links.label.fontStyle": { "desc": "\n\n文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "links.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "links.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"links.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"links.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"links.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "links.label.borderWidth": { "desc": "\n\n文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "links.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "links.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "links.label.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "links.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "links.label.rich.文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "links.label.rich.文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "links.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "links.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"links.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"links.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"links.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "links.label.rich.文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "links.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "links.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "links.label.rich.文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "links.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.show": { "desc": "是否显示标签。
\n" }, "links.emphasis.label.position": { "desc": "标签位置,可选:
\n'start'
线的起始点。'middle'
线的中点。'end'
线的结束点。标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"links.emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "links.emphasis.label.fontStyle": { "desc": "\n\n文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "links.emphasis.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "links.emphasis.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"links.emphasis.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"links.emphasis.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"links.emphasis.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "links.emphasis.label.borderWidth": { "desc": "\n\n文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "links.emphasis.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "links.emphasis.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "links.emphasis.label.textBorderWidth": { "desc": "\n\n文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "links.emphasis.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "links.emphasis.label.rich.文字的颜色。
\n", "uiControl": { "type": "color", "default": "null" } }, "links.emphasis.label.rich.文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "links.emphasis.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "links.emphasis.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"links.emphasis.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"links.emphasis.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"links.emphasis.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
文字块边框颜色。
\n", "uiControl": { "type": "color", "default": "#fff" } }, "links.emphasis.label.rich.文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "links.emphasis.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "links.emphasis.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n", "uiControl": { "type": "color" } }, "links.emphasis.label.rich.文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "links.emphasis.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "links.emphasis.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "links.emphasis.lineStyle.color": { "desc": "\n\n线的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "links.emphasis.lineStyle.width": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
线宽。
\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "links.emphasis.lineStyle.type": { "desc": "\n\n线的类型。
\n可选:
\n'solid'
'dashed'
'dotted'
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"links.emphasis.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "links.emphasis.lineStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "links.emphasis.lineStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "links.symbol": { "desc": "边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。
\n" }, "links.symbolSize": { "desc": "边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
\n" }, "links.ignoreForceLayout": { "desc": "\n\n从
\nv4.5.0
开始支持
使此边不进行力导图布局的计算。
\n" }, "edges": { "desc": "别名,同 links
\n" }, "markPoint": { "desc": "图表标注。
\n" }, "markPoint.symbol": { "desc": "\n\n标记的图形。
\nECharts 提供的标记类型包括 \n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\n'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'\n
如果需要每个数据的图形不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => string\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number|Array\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
如果需要每个数据的旋转角度不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
\n\n", "uiControl": { "type": "angle", "min": "-180", "max": "180", "step": "1" } }, "markPoint.symbolKeepAspect": { "desc": "\n\n从 4.8.0 开始支持回调函数。
\n
如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
\n", "uiControl": { "type": "boolean" } }, "markPoint.label": { "desc": "标注的文本。
\n" }, "markPoint.label.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "markPoint.label.position": { "desc": "\n\n\n标签的位置。
\n可以通过内置的语义声明位置:
\n示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "markPoint.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "markPoint.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "markPoint.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"markPoint.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "markPoint.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "markPoint.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"markPoint.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"markPoint.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"markPoint.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "markPoint.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "markPoint.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "markPoint.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n
\n详情参见教程:富文本标签
\n" }, "markPoint.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n