.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint": {
"desc": "图表标注。
\n"
},
"markPoint.symbol": {
"desc": "\n\n标记的图形。
\nECharts 提供的标记类型包括
\n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
\n可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
\nURL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
\n'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
\n例如:
\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
是其它的数据项参数。
\n",
"uiControl": {
"type": "icon",
"default": "circle"
}
},
"markPoint.symbolSize": {
"desc": "\n\n标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
\n如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number|Array\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
\n",
"uiControl": {
"type": "number",
"min": "0"
}
},
"markPoint.symbolRotate": {
"desc": "\n\n标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
\n如果需要每个数据的旋转角度不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
\n\n从 4.8.0 开始支持回调函数。
\n
\n",
"uiControl": {
"type": "angle",
"min": "-180",
"max": "180",
"step": "1"
}
},
"markPoint.symbolKeepAspect": {
"desc": "\n\n如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
\n",
"uiControl": {
"type": "boolean",
"clean": "true"
}
},
"markPoint.symbolOffset": {
"desc": "\n\n标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
\n",
"uiControl": {
"type": "vector",
"separate": "true",
"dims": "x,y"
}
},
"markPoint.silent": {
"desc": "\n\n图形是否不响应和触发鼠标事件,默认为 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可以通过内置的语义声明位置:
\n 示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
\n \n也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n 示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n \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'
)时候有效。
\n参见: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",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.label.formatter": {
"desc": "标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
\n字符串模板\n模板变量有:
\n\n{a}
:系列名。 \n{b}
:数据名。 \n{c}
:数据值。 \n{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。 \n{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。 \n
\n示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
\n{\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}\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如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.label.fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.label.fontFamily": {
"desc": "\n\n文字的字体系列。
\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\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\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\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\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{\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)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\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文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\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": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\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.overflow": {
"desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
\n\n'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
\n'break'
换行 \n'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行 \n
\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"markPoint.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"markPoint.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"markPoint.label.rich": {
"desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
\n例如:
\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..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.label.rich..fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.label.rich..fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.label.rich..fontFamily": {
"desc": "\n\n文字的字体系列。
\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.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.label.rich..align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\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.rich..verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\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.rich..lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\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.rich..backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.label.rich..padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.itemStyle": {
"desc": "标注的样式。
\n"
},
"markPoint.itemStyle.color": {
"desc": "\n\n图形的颜色。
\n\n颜色可以使用 RGB 表示,比如 '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
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"markPoint.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.emphasis": {
"desc": "标注的高亮样式。
\n"
},
"markPoint.emphasis.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"markPoint.emphasis.label.position": {
"desc": "\n\n\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 示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n \n
\n参见:label position。
\n",
"uiControl": {
"type": "enum",
"options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"
}
},
"markPoint.emphasis.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"markPoint.emphasis.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.emphasis.label.formatter": {
"desc": "标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
\n字符串模板\n模板变量有:
\n\n{a}
:系列名。 \n{b}
:数据名。 \n{c}
:数据值。 \n{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。 \n{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。 \n
\n示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
\n{\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}\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.emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.emphasis.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.emphasis.label.fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.emphasis.label.fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"markPoint.emphasis.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.emphasis.label.align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"markPoint.emphasis.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"markPoint.emphasis.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\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.emphasis.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.emphasis.label.padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.emphasis.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.emphasis.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.emphasis.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.emphasis.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.overflow": {
"desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
\n\n'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
\n'break'
换行 \n'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行 \n
\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"markPoint.emphasis.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"markPoint.emphasis.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"markPoint.emphasis.label.rich": {
"desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
\n例如:
\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.emphasis.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.emphasis.label.rich..fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.emphasis.label.rich..fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.emphasis.label.rich..fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"markPoint.emphasis.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.emphasis.label.rich..align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"markPoint.emphasis.label.rich..verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"markPoint.emphasis.label.rich..lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\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.emphasis.label.rich..backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.emphasis.label.rich..padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.emphasis.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.emphasis.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.emphasis.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.emphasis.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.color": {
"desc": "\n\n图形的颜色。
\n\n颜色可以使用 RGB 表示,比如 '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
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.emphasis.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.emphasis.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.blur": {
"desc": "\n从 v5.0.0
开始支持
\n
\n标注的淡出样式。淡出的规则跟随所在系列。
\n"
},
"markPoint.blur.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"markPoint.blur.label.position": {
"desc": "\n\n\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 示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n \n
\n参见:label position。
\n",
"uiControl": {
"type": "enum",
"options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"
}
},
"markPoint.blur.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"markPoint.blur.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.blur.label.formatter": {
"desc": "标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
\n字符串模板\n模板变量有:
\n\n{a}
:系列名。 \n{b}
:数据名。 \n{c}
:数据值。 \n{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。 \n{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。 \n
\n示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
\n{\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}\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.blur.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.blur.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.blur.label.fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.blur.label.fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"markPoint.blur.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.blur.label.align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"markPoint.blur.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"markPoint.blur.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\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.blur.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.blur.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.blur.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.blur.label.padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.blur.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.blur.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.blur.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.blur.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.blur.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.blur.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.label.overflow": {
"desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
\n\n'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
\n'break'
换行 \n'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行 \n
\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"markPoint.blur.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"markPoint.blur.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"markPoint.blur.label.rich": {
"desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
\n例如:
\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.blur.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.blur.label.rich..fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.blur.label.rich..fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.blur.label.rich..fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"markPoint.blur.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.blur.label.rich..align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"markPoint.blur.label.rich..verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"markPoint.blur.label.rich..lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\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.blur.label.rich..backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.blur.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.blur.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.blur.label.rich..padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.blur.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.blur.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.blur.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.blur.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.blur.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.blur.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.blur.itemStyle.color": {
"desc": "\n\n图形的颜色。
\n\n颜色可以使用 RGB 表示,比如 '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
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.blur.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.blur.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.blur.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"markPoint.blur.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.blur.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.blur.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.blur.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.data": {
"desc": "标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
\n\n- 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
\n
\n当多个属性同时存在时,优先级按上述的顺序。
\n示例:
\ndata: [\n\n {\n name: '某个屏幕坐标',\n x: 100,\n y: 100\n }\n]\n
\n"
},
"markPoint.data.name": {
"desc": "标注名称。
\n"
},
"markPoint.data.x": {
"desc": "\n\n相对容器的屏幕 x 坐标,单位像素。
\n",
"uiControl": {
"type": "percent",
"default": "0"
}
},
"markPoint.data.y": {
"desc": "\n\n相对容器的屏幕 y 坐标,单位像素。
\n",
"uiControl": {
"type": "percent",
"default": "0"
}
},
"markPoint.data.value": {
"desc": "标注值,可以不设。
\n"
},
"markPoint.data.symbol": {
"desc": "\n\n标记的图形。
\nECharts 提供的标记类型包括
\n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
\n可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
\nURL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
\n'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
\n例如:
\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"
}
},
"markPoint.data.symbolSize": {
"desc": "\n\n标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
\n",
"uiControl": {
"type": "number",
"min": "0"
}
},
"markPoint.data.symbolRotate": {
"desc": "\n\n标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
\n",
"uiControl": {
"type": "angle",
"min": "-180",
"max": "180",
"step": "1"
}
},
"markPoint.data.symbolKeepAspect": {
"desc": "\n\n如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
\n",
"uiControl": {
"type": "boolean",
"clean": "true"
}
},
"markPoint.data.symbolOffset": {
"desc": "\n\n标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
\n",
"uiControl": {
"type": "vector",
"separate": "true",
"dims": "x,y"
}
},
"markPoint.data.itemStyle": {
"desc": "该标注的样式。
\n"
},
"markPoint.data.itemStyle.color": {
"desc": "\n\n图形的颜色。
\n\n颜色可以使用 RGB 表示,比如 '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
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.data.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.data.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.data.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.data.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.data.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"markPoint.data.label.position": {
"desc": "\n\n\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 示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n \n
\n参见:label position。
\n",
"uiControl": {
"type": "enum",
"options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"
}
},
"markPoint.data.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"markPoint.data.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.data.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.data.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.data.label.fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.data.label.fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"markPoint.data.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.data.label.align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"markPoint.data.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"markPoint.data.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\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.data.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.data.label.padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.data.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.data.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"markPoint.data.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.data.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.overflow": {
"desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
\n\n'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
\n'break'
换行 \n'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行 \n
\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"markPoint.data.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"markPoint.data.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"markPoint.data.label.rich": {
"desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
\n例如:
\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.data.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.data.label.rich..fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.data.label.rich..fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"markPoint.data.label.rich..fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"markPoint.data.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.data.label.rich..align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"markPoint.data.label.rich..verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"markPoint.data.label.rich..lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\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.data.label.rich..backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.data.label.rich..padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"markPoint.data.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.data.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"markPoint.data.emphasis.label.position": {
"desc": "\n\n\n\n标签的位置。
\n