{ "id": { "desc": "

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

\n" }, "name": { "desc": "

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

\n" }, "coordinateSystem": { "desc": "

该系列使用的坐标系,可选:

\n\n\n\n" }, "xAxisIndex": { "desc": "

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

\n" }, "yAxisIndex": { "desc": "

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

\n" }, "polarIndex": { "desc": "

使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。

\n" }, "geoIndex": { "desc": "

使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。

\n" }, "calendarIndex": { "desc": "

使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。

\n" }, "hoverAnimation": { "desc": "\n\n

是否开启鼠标 hover 的提示动画效果。

\n", "uiControl": { "type": "boolean", "default": "true" } }, "legendHoverLink": { "desc": "\n\n

是否启用图例 hover 时的联动高亮。

\n", "uiControl": { "type": "boolean", "default": "true" } }, "symbol": { "desc": "\n\n

标记的图形。

\n

ECharts 提供的标记类型包括 \n'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI

\n

URL 为图片链接例如:

\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

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

\n", "uiControl": { "type": "icon", "default": "circle" } }, "symbolSize": { "desc": "\n\n

标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

\n

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

\n
(value: Array|number, params: Object) => number|Array\n
\n

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

\n", "uiControl": { "type": "number", "min": "0" } }, "symbolRotate": { "desc": "\n\n

标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

\n

如果需要每个数据的旋转角度不一样,可以设置为如下格式的回调函数:

\n
(value: Array|number, params: Object) => number\n
\n

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

\n
\n

从 4.8.0 开始支持回调函数。

\n
\n", "uiControl": { "type": "angle", "min": "-180", "max": "180", "step": "1" } }, "symbolKeepAspect": { "desc": "\n\n

如果 symbolpath:// 的形式,是否在缩放时保持该图形的长宽比。

\n", "uiControl": { "type": "boolean", "clean": "true" } }, "symbolOffset": { "desc": "\n\n

标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

\n

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

\n", "uiControl": { "type": "vector", "separate": "true", "dims": "x,y" } }, "large": { "desc": "\n\n

是否开启大数据量优化,在数据图形特别多而出现卡顿时候可以开启。

\n

开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。

\n

缺点:优化后不能自定义设置单个数据项的样式。

\n", "uiControl": { "type": "boolean" } }, "largeThreshold": { "desc": "\n\n

开启绘制优化的阈值。

\n", "uiControl": { "type": "number", "min": "1", "default": "2000" } }, "cursor": { "desc": "\n\n

鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor

\n", "uiControl": { "type": "enum", "options": "auto,pointer,move", "default": "pointer" } }, "label": { "desc": "

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 emphasis 状态。

\n" }, "label.show": { "desc": "\n\n

是否显示标签。

\n", "uiControl": { "type": "boolean", "default": "false" } }, "label.position": { "desc": "\n\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" } }, "label.distance": { "desc": "\n\n

距离图形元素的距离。当 position 为字符描述值(如 'top''insideRight')时候有效。

\n

参见: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", "uiControl": { "type": "vector", "dims": "x,y", "step": "0.5", "separate": "true" } }, "label.formatter": { "desc": "

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n 换行。

\n

字符串模板\n模板变量有:

\n\n

示例:

\n
formatter: '{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

注:encode 和 dimensionNames 的使用方式,例如:

\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.encode.y[0]]\n
\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n" }, "label.color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "label.fontStyle": { "desc": "\n\n

文字字体的风格。

\n

可选:

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,italic,oblique" } }, "label.fontWeight": { "desc": "\n\n

文字字体的粗细。

\n

可选:

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,bold,bolder,lighter" } }, "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" } }, "label.fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "label.align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n\n

rich 中如果没有设置 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" } }, "label.verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n\n

rich 中如果没有设置 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" } }, "label.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "label.backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "label.borderWidth": { "desc": "\n\n

文字块边框宽度。

\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

文字块的内边距。例如:

\n\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "label.shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\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)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "label.textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\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 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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..color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "label.rich..fontStyle": { "desc": "\n\n

文字字体的风格。

\n

可选:

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,italic,oblique" } }, "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" } }, "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" } }, "label.rich..fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "label.rich..align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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" } }, "label.rich..verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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" } }, "label.rich..lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "label.rich..backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "label.rich..borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich..borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "label.rich..padding": { "desc": "\n\n

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "label.rich..shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "label.rich..shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich..shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich..shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich..width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "label.rich..textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich..textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "label.rich..textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich..textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich..textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "itemStyle": { "desc": "

图形样式。

\n" }, "itemStyle.color": { "desc": "\n\n

图形的颜色。 默认从全局调色盘 option.color 获取颜色

\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

支持使用回调函数。回调函数格式如下:

\n
(params: Object) => Color\n
\n

传入的是数据项 seriesIndex, dataIndex, data, value 等各个参数。

\n", "uiControl": { "type": "color" } }, "itemStyle.borderColor": { "desc": "\n\n

图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

\n", "uiControl": { "type": "color" } }, "itemStyle.borderWidth": { "desc": "\n\n

描边线宽。为 0 时无描边。

\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "itemStyle.borderType": { "desc": "\n\n

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "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" } }, "itemStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color

\n", "uiControl": { "type": "color", "default": "" } }, "itemStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\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": "0.8", "min": "0", "max": "1", "step": "0.01" } }, "emphasis": { "desc": "

高亮的图形和标签样式。

\n" }, "emphasis.label.show": { "desc": "\n\n

是否显示标签。

\n", "uiControl": { "type": "boolean", "default": "false" } }, "emphasis.label.position": { "desc": "\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" } }, "emphasis.label.distance": { "desc": "\n\n

距离图形元素的距离。当 position 为字符描述值(如 'top''insideRight')时候有效。

\n

参见: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", "uiControl": { "type": "vector", "dims": "x,y", "step": "0.5", "separate": "true" } }, "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

示例:

\n
formatter: '{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

注:encode 和 dimensionNames 的使用方式,例如:

\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.encode.y[0]]\n
\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n" }, "emphasis.label.color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "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" } }, "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" } }, "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" } }, "emphasis.label.fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.label.align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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" } }, "emphasis.label.verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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" } }, "emphasis.label.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "emphasis.label.backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "emphasis.label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "emphasis.label.borderWidth": { "desc": "\n\n

文字块边框宽度。

\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

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "emphasis.label.shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\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)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "emphasis.label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "emphasis.label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "emphasis.label.textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\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 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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..color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "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" } }, "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" } }, "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" } }, "emphasis.label.rich..fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.label.rich..align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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" } }, "emphasis.label.rich..verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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" } }, "emphasis.label.rich..lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "emphasis.label.rich..backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "emphasis.label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "emphasis.label.rich..borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich..borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.label.rich..padding": { "desc": "\n\n

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "emphasis.label.rich..shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "emphasis.label.rich..shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich..shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich..shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich..width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "emphasis.label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "emphasis.label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "emphasis.label.rich..textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich..textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.label.rich..textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich..textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich..textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "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" } }, "emphasis.itemStyle.borderColor": { "desc": "\n\n

图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

\n", "uiControl": { "type": "color" } }, "emphasis.itemStyle.borderWidth": { "desc": "\n\n

描边线宽。为 0 时无描边。

\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "emphasis.itemStyle.borderType": { "desc": "\n\n

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "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" } }, "emphasis.itemStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color

\n", "uiControl": { "type": "color", "default": "" } }, "emphasis.itemStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\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" } }, "progressive": { "desc": "

渐进式渲染时每一帧绘制图形数量,设为 0 时不启用渐进式渲染,支持每个系列单独配置。

\n

在图中有数千到几千万图形元素的时候,一下子把图形绘制出来,或者交互重绘的时候可能会造成界面的卡顿甚至假死。ECharts 4 开始全流程支持渐进渲染(progressive rendering),渲染的时候会把创建好的图形分到数帧中渲染,每一帧渲染只渲染指定数量的图形。

\n

该配置项就是用于配置该系列每一帧渲染的图形数,可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢,这个数字就可以设置小一点,而线宽小于等于 1 的 polyline 绘制非常快,该配置项就可以相对调得比较大。

\n" }, "progressiveThreshold": { "desc": "

启用渐进式渲染的图形数量阈值,在单个系列的图形数量超过该阈值时启用渐进式渲染。

\n" }, "dimensions": { "desc": "

使用 dimensions 定义 series.data 或者 dataset.source 的每个维度的信息。

\n

注意:如果使用了 dataset,那么可以在 dataset.source 的第一行/列中给出 dimension 名称。于是就不用在这里指定 dimension。但是,如果在这里指定了 dimensions,那么 ECharts 不再会自动从 dataset.source 的第一行/列中获取维度信息。

\n

例如:

\n
option = {\n    dataset: {\n        source: [\n            // 有了上面 dimensions 定义后,下面这五个维度的名称分别为:\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // 如果此维度不想给出定义,则使用 null 即可\n        {type: 'ordinal'},   // 只定义此维度的类型。\n                             // 'ordinal' 表示离散型,一般文本使用这种类型。\n                             // 如果类型没有被定义,会自动猜测类型。\n        {name: 'good', type: 'number'},\n        'bad'                // 等同于 {name: 'bad'}\n    ]\n}\n
\n

dimensions 数组中的每一项可以是:

\n
    \n
  • string,如 'someName',等同于 {name: 'someName'}
  • \n
  • Object,属性可以有:
      \n
    • name: string
    • \n
    • type: string,支持
        \n
      • number,默认,表示普通数据。
      • \n
      • ordinal,对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的,所以使用者也可以手动强制指定。
      • \n
      • float,即 Float64Array
      • \n
      • int,即 Int32Array
      • \n
      • time,表示时间类型。设置成 'time' 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。时间类型的支持参见 data
      • \n
      \n
    • \n
    • displayName: 一般用于 tooltip 中维度名的展示。string 如果没有指定,默认使用 name 来展示。
    • \n
    \n
  • \n
\n

值得一提的是,当定义了 dimensions 后,默认 tooltip 中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。如果没有定义 dimensions,则默认 tooltip 会横排显示,且只显示数值没有维度名称可显示。

\n" }, "encode": { "desc": "

可以定义 data 的哪个维度被编码成什么。比如:

\n
option = {\n    dataset: {\n        source: [\n            // 每一列称为一个『维度』。\n            // 这里分别是维度 0、1、2、3、4。\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。\n            y: 2,              // 表示维度 2 映射到 y 轴。\n            tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。\n        }\n    }\n}\n
\n

当使用 dimensions 给维度定义名称后,encode 中可直接引用名称,例如:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

encode 声明的基本结构如下,其中冒号左边是坐标系、标签等特定名称,如 'x', 'y', 'tooltip' 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。

\n

下面是 encode 支持的属性:

\n
// 在任何坐标系和系列中,都支持:\nencode: {\n    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n    tooltip: ['product', 'score']\n    // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字)\n    seriesName: [1, 3],\n    // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。\n    itemId: 2,\n    // 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。\n    itemName: 3\n}\n\n// 直角坐标系(grid/cartesian)特有的属性:\nencode: {\n    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:\n    x: [1, 5, 'score'],\n    // 把“维度0”映射到 Y 轴。\n    y: 0\n}\n\n// 单轴(singleAxis)特有的属性:\nencode: {\n    single: 3\n}\n\n// 极坐标系(polar)特有的属性:\nencode: {\n    radius: 3,\n    angle: 2\n}\n\n// 地理坐标系(geo)特有的属性:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:\nencode: {\n    value: 3\n}\n
\n

这是个更丰富的 encode示例

\n

特殊地,在 自定义系列(custom series) 中,encode 中轴可以不指定或设置为 null/undefined,从而使系列免于受这个轴控制,也就是说,轴的范围(extent)不会受此系列数值的影响,轴被 dataZoom 控制时也不会过滤掉这个系列:

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x 位置永远为 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // 这样这个系列就不会被 x 轴以及 x\n            // 轴上的 dataZoom 控制了。\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n" }, "seriesLayoutBy": { "desc": "

当使用 dataset 时,seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上,也就是说,系列“排布”到 dataset 的行还是列上。可取值:

\n
    \n
  • 'column':默认,dataset 的列对应于系列,从而 dataset 中每一列是一个维度(dimension)。
  • \n
  • 'row':dataset 的行对应于系列,从而 dataset 中每一行是一个维度(dimension)。
  • \n
\n

参见这个 示例

\n" }, "datasetIndex": { "desc": "

如果 series.data 没有指定,并且 dataset 存在,那么就会使用 datasetdatasetIndex 指定本系列使用那个 dataset

\n" }, "data": { "desc": "

系列中的数据内容数组。数组项通常为具体的数据项。

\n

注意,如果系列没有指定 data,并且 option 有 dataset,那么默认使用第一个 dataset。如果指定了 data,则不会再使用 dataset

\n

可以使用 series.datasetIndex 指定其他的 dataset

\n

通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』。

\n
series: [{\n    data: [\n        // 维度X   维度Y   其他维度 ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

特别地,当只有一个轴为类目轴(axis.type 为 'category')的时候,数据可以简化用一个一维数组表示。例如:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // 与 xAxis.data 一一对应。\n    data: [23,  44,  55,  19]\n    // 它其实是下面这种形式的简化:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\n『值』与 轴类型 的关系:

\n
    \n
  • 当某维度对应于数值轴(axis.type 为 'value' 或者 'log')的时候:

    \n

    其值可以为 number(例如 12)。(也可以兼容 string 形式的 number,例如 '12'

    \n
  • \n
  • 当某维度对应于类目轴(axis.type 为 'category')的时候:

    \n

    其值须为类目的『序数』(从 0 开始)或者类目的『字符串值』。例如:

    \n
      xAxis: {\n      type: 'category',\n      data: ['星期一', '星期二', '星期三', '星期四']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis    yAxis\n          [  0,        0,    2  ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。\n          [  '星期四',  2,    1  ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。\n          [  2,       'p',   2  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。\n          [  3,        3,    5  ]\n      ]\n  }]\n
    \n

    双类目轴的示例可以参考 Github Punchcard 示例。

    \n
  • \n
  • 当某维度对应于时间轴(type 为 'time')的时候,值可以为:

    \n
      \n
    • 一个时间戳,如 1484141700832,表示 UTC 时间。
    • \n
    • 或者字符串形式的时间描述:
        \n
      • ISO 8601 的子集,只包含这些形式(这几种格式,除非指明时区,否则均表示本地时间,与 moment 一致):
          \n
        • 部分年月日时间: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
        • \n
        • 使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
        • \n
        • 时区设定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
        • \n
        \n
      • \n
      • 其他的时间字符串,包括(均表示本地时间):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
      • \n
      \n
    • \n
    • 或者用户自行初始化的 Date 实例:
        \n
      • 注意,用户自行初始化 Date 实例的时候,浏览器的行为有差异,不同字符串的表示也不同
      • \n
      • 例如:在 chrome 中,new Date('2012-01-01') 表示 UTC 时间的 2012 年 1 月 1 日,而 new Date('2012-1-1')new Date('2012/01/01') 表示本地时间的 2012 年 1 月 1 日。在 safari 中,不支持 new Date('2012-1-1') 这种表示方法。
      • \n
      • 所以,使用 new Date(dataString) 时,可使用第三方库解析(如 moment),或者使用 echarts.number.parseDate,或者参见 这里
      • \n
      \n
    • \n
    \n
  • \n
\n


\n当需要对个别数据进行个性化定义时:

\n

数组项可用对象,其中的 value 像表示具体的数值,如:

\n
[\n    12,\n    34,\n    {\n        value : 56,\n        //自定义标签样式,仅对该数据项有效\n        label: {},\n        //自定义特殊 itemStyle,仅对该数据项有效\n        itemStyle:{}\n    },\n    10\n]\n// 或\n[\n    [12, 33],\n    [34, 313],\n    {\n        value: [56, 44],\n        label: {},\n        itemStyle:{}\n    },\n    [10, 33]\n]\n
\n


\n空值:

\n

当某数据不存在时(ps:不存在不代表值为 0),可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。

\n

例如,无数据在折线图中可表现为该点是断开的,在其它图中可表示为图形不存在。

\n



\n" }, "data.name": { "desc": "

数据项名称。

\n" }, "data.value": { "desc": "

数据项值。

\n" }, "data.symbol": { "desc": "\n\n

单个数据标记的图形。

\n

ECharts 提供的标记类型包括 \n'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI

\n

URL 为图片链接例如:

\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" } }, "data.symbolSize": { "desc": "\n\n

单个数据标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

\n", "uiControl": { "type": "number", "min": "0" } }, "data.symbolRotate": { "desc": "\n\n

单个数据标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

\n", "uiControl": { "type": "angle", "min": "-180", "max": "180", "step": "1" } }, "data.symbolKeepAspect": { "desc": "\n\n

如果 symbolpath:// 的形式,是否在缩放时保持该图形的长宽比。

\n", "uiControl": { "type": "boolean", "clean": "true" } }, "data.symbolOffset": { "desc": "\n\n

单个数据标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

\n

例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

\n", "uiControl": { "type": "vector", "separate": "true", "dims": "x,y" } }, "data.label.show": { "desc": "\n\n

是否显示标签。

\n", "uiControl": { "type": "boolean", "default": "false" } }, "data.label.position": { "desc": "\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" } }, "data.label.distance": { "desc": "\n\n

距离图形元素的距离。当 position 为字符描述值(如 'top''insideRight')时候有效。

\n

参见: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", "uiControl": { "type": "vector", "dims": "x,y", "step": "0.5", "separate": "true" } }, "data.label.color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "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" } }, "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" } }, "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" } }, "data.label.fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.label.align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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" } }, "data.label.verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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" } }, "data.label.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "data.label.backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.label.borderWidth": { "desc": "\n\n

文字块边框宽度。

\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

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "data.label.shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\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)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "data.label.textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\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 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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..color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "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" } }, "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" } }, "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" } }, "data.label.rich..fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.label.rich..align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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" } }, "data.label.rich..verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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" } }, "data.label.rich..lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "data.label.rich..backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.label.rich..borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich..borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.label.rich..padding": { "desc": "\n\n

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "data.label.rich..shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "data.label.rich..shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich..shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.rich..shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.rich..width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "data.label.rich..textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich..textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "data.label.rich..textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.label.rich..textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.label.rich..textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.itemStyle": { "desc": "

单个数据点(气泡)的样式设置。

\n" }, "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" } }, "data.itemStyle.borderColor": { "desc": "\n\n

图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

\n", "uiControl": { "type": "color" } }, "data.itemStyle.borderWidth": { "desc": "\n\n

描边线宽。为 0 时无描边。

\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "data.itemStyle.borderType": { "desc": "\n\n

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "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" } }, "data.itemStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color

\n", "uiControl": { "type": "color", "default": "" } }, "data.itemStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\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.emphasis": { "desc": "

单个数据的高亮图形和标签样式。

\n" }, "data.emphasis.label.show": { "desc": "\n\n

是否显示标签。

\n", "uiControl": { "type": "boolean", "default": "false" } }, "data.emphasis.label.position": { "desc": "\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" } }, "data.emphasis.label.distance": { "desc": "\n\n

距离图形元素的距离。当 position 为字符描述值(如 'top''insideRight')时候有效。

\n

参见: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", "uiControl": { "type": "vector", "dims": "x,y", "step": "0.5", "separate": "true" } }, "data.emphasis.label.color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "data.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" } }, "data.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" } }, "data.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" } }, "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
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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" } }, "data.emphasis.label.verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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" } }, "data.emphasis.label.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "data.emphasis.label.backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.emphasis.label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.emphasis.label.borderWidth": { "desc": "\n\n

文字块边框宽度。

\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

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "data.emphasis.label.shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\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)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.emphasis.label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.emphasis.label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "data.emphasis.label.textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\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 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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..color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "data.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" } }, "data.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" } }, "data.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" } }, "data.emphasis.label.rich..fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.emphasis.label.rich..align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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" } }, "data.emphasis.label.rich..verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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" } }, "data.emphasis.label.rich..lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "data.emphasis.label.rich..backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.emphasis.label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "data.emphasis.label.rich..borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich..borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.emphasis.label.rich..padding": { "desc": "\n\n

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "data.emphasis.label.rich..shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "data.emphasis.label.rich..shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich..shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.rich..shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.rich..width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.emphasis.label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.emphasis.label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "data.emphasis.label.rich..textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich..textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "data.emphasis.label.rich..textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "data.emphasis.label.rich..textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.emphasis.label.rich..textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "data.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" } }, "data.emphasis.itemStyle.borderColor": { "desc": "\n\n

图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

\n", "uiControl": { "type": "color" } }, "data.emphasis.itemStyle.borderWidth": { "desc": "\n\n

描边线宽。为 0 时无描边。

\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "data.emphasis.itemStyle.borderType": { "desc": "\n\n

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "data.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" } }, "data.emphasis.itemStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color

\n", "uiControl": { "type": "color", "default": "" } }, "data.emphasis.itemStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\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.tooltip": { "desc": "

本系列每个数据项中特定的 tooltip 设定。

\n" }, "data.tooltip.position": { "desc": "
\n

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n

提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。

\n

可选:

\n
    \n
  • Array

    \n

    通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置。

    \n

    示例:

    \n
      // 绝对位置,相对于容器左侧 10px, 上侧 10 px\n  position: [10, 10]\n  // 相对位置,放置在容器正中间\n  position: ['50%', '50%']\n
    \n
  • \n
  • Function

    \n

    回调函数,格式如下:

    \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

    返回值:
    \n 可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相 百分比。
    \n 也可以是一个对象,如:{left: 10, top: 30},或者 {right: '20%', bottom: 40}

    \n

    如下示例:

    \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
  • \n
\n
    \n
  • 'inside'

    \n

    鼠标所在图形的内部中心位置,只在 trigger'item'的时候有效。

    \n
  • \n
  • 'top'

    \n

    鼠标所在图形上侧,只在 trigger'item'的时候有效。

    \n
  • \n
  • 'left'

    \n

    鼠标所在图形左侧,只在 trigger'item'的时候有效。

    \n
  • \n
  • 'right'

    \n

    鼠标所在图形右侧,只在 trigger'item'的时候有效。

    \n
  • \n
  • 'bottom'

    \n

    鼠标所在图形底侧,只在 trigger'item'的时候有效。

    \n
  • \n
\n" }, "data.tooltip.formatter": { "desc": "
\n

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n

提示框浮层内容格式器,支持字符串模板和回调函数两种形式。

\n

1, 字符串模板

\n

模板变量有 {a}, {b}{c}{d}{e},分别表示系列名,数据名,数据值等。\n在 trigger'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。\n不同图表类型下的 {a}{b}{c}{d} 含义不一样。\n其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

\n
    \n
  • 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

    \n
  • \n
  • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

    \n
  • \n
  • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

    \n
  • \n
  • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

    \n
  • \n
\n

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

\n

示例:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2, 回调函数

\n

回调函数格式:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => 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    percent: number,\n\n}\n
\n

注:encode 和 dimensionNames 的使用方式,例如:

\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.encode.y[0]]\n
\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

trigger'axis' 的时候,或者 tooltip 被 axisPointer 触发的时候,params 是多个系列的数据数组。其中每项内容格式同上,并且,

\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

注:encode 和 dimensionNames 的使用方式,例如:

\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.encode.y[0]]\n
\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

注: ECharts 2.x 使用数组表示各参数的方式不再支持。

\n

第二个参数 ticket 是异步回调标识,配合第三个参数 callback 使用。\n第三个参数 callback 是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 tickethtml 更新提示框浮层内容。

\n

示例:

\n
formatter: 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

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n

提示框浮层的背景颜色。

\n" }, "data.tooltip.borderColor": { "desc": "\n\n\n\n\n
\n

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n

提示框浮层的边框颜色。

\n", "uiControl": { "type": "color", "default": "#333" } }, "data.tooltip.borderWidth": { "desc": "\n\n\n\n\n
\n

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n

提示框浮层的边框宽。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.tooltip.padding": { "desc": "\n\n\n\n\n
\n

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n\n\n

提示框浮层内边距,单位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

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n

提示框浮层的文本样式。

\n" }, "data.tooltip.textStyle.color": { "desc": "\n\n

文字的颜色。

\n", "uiControl": { "type": "color", "default": "'#fff'" } }, "data.tooltip.textStyle.fontStyle": { "desc": "\n\n

文字字体的风格。

\n

可选:

\n
    \n
  • 'normal'
  • \n
  • 'italic'
  • \n
  • 'oblique'
  • \n
\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,italic,oblique" } }, "data.tooltip.textStyle.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" } }, "data.tooltip.textStyle.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" } }, "data.tooltip.textStyle.fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "14", "min": "1", "step": "1" } }, "data.tooltip.textStyle.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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" } }, "data.tooltip.textStyle.width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.tooltip.textStyle.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "data.tooltip.textStyle.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\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

注意:series.data.tooltip 仅在 tooltip.trigger'item' 时有效。

\n
\n

额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n" }, "markPoint": { "desc": "

图表标注。

\n" }, "markPoint.symbol": { "desc": "\n\n

标记的图形。

\n

ECharts 提供的标记类型包括 \n'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI

\n

URL 为图片链接例如:

\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

其中第一个参数 valuedata 中的数据值。第二个参数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

其中第一个参数 valuedata 中的数据值。第二个参数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

其中第一个参数 valuedata 中的数据值。第二个参数params 是其它的数据项参数。

\n
\n

从 4.8.0 开始支持回调函数。

\n
\n", "uiControl": { "type": "angle", "min": "-180", "max": "180", "step": "1" } }, "markPoint.symbolKeepAspect": { "desc": "\n\n

如果 symbolpath:// 的形式,是否在缩放时保持该图形的长宽比。

\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
      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

示例:

\n
formatter: '{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

注:encode 和 dimensionNames 的使用方式,例如:

\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.encode.y[0]]\n
\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n" }, "markPoint.label.color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
\n

rich 中如果没有设置 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
\n

rich 中如果没有设置 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

行高。

\n

rich 中如果没有设置 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

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 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": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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.rich": { "desc": "

rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
\n

rich 中如果没有设置 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
\n

rich 中如果没有设置 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

行高。

\n

rich 中如果没有设置 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

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 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

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
      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

示例:

\n
formatter: '{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

注:encode 和 dimensionNames 的使用方式,例如:

\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.encode.y[0]]\n
\n

如果数据为:

\n
dataset: {\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:

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n" }, "markPoint.emphasis.label.color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
\n

rich 中如果没有设置 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
\n

rich 中如果没有设置 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

行高。

\n

rich 中如果没有设置 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

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.emphasis.label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 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": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.emphasis.label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.emphasis.label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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.rich": { "desc": "

rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
\n

rich 中如果没有设置 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
\n

rich 中如果没有设置 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

行高。

\n

rich 中如果没有设置 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

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.emphasis.label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 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

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.emphasis.label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.emphasis.label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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.data": { "desc": "

标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

\n
    \n
  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

    \n
  2. \n
  3. coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'

    \n
  4. \n
  5. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

    \n
  6. \n
\n

当多个属性同时存在时,优先级按上述的顺序。

\n

示例:

\n
data: [\n    {\n        name: '最大值',\n        type: 'max'\n    }, \n    {\n        name: '某个坐标',\n        coord: [10, 20]\n    }, {\n        name: '固定 x 像素位置',\n        yAxis: 10,\n        x: '90%'\n    }, \n    {\n        name: '某个屏幕坐标',\n        x: 100,\n        y: 100\n    }\n]\n
\n" }, "markPoint.data.name": { "desc": "

标注名称。

\n" }, "markPoint.data.type": { "desc": "\n\n

特殊的标注类型,用于标注最大值最小值等。

\n

可选:

\n
    \n
  • 'min' 最大值。
  • \n
  • 'max' 最大值。
  • \n
  • 'average' 平均值。
  • \n
\n", "uiControl": { "type": "enum", "options": "min,max,average" } }, "markPoint.data.valueIndex": { "desc": "\n\n

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0(xAxis, radiusAxis),1(yAxis, angleAxis),默认使用第一个数值轴所在的维度。

\n", "uiControl": { "type": "number", "min": "0", "max": "1", "step": "1" } }, "markPoint.data.valueDim": { "desc": "

在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称。

\n" }, "markPoint.data.coord": { "desc": "

标注的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x, y,也可以是极坐标系上的 radius, angle。例如 [121, 2323]、['aa', 998]。

\n

注:对于 axis.type'category' 类型的轴

\n
    \n
  • 如果 coord 值为 number,则表示 axis.data 的 index。
  • \n
  • 如果 coord 值为 string,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。
  • \n
\n

例如:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine 也是同理\n            data: [{\n                coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。\n                // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。\n                                      // 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]\n                                      // 而只能写成 [string, string, ...]\n            }]\n        }\n    }\n}\n
\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

标记的图形。

\n

ECharts 提供的标记类型包括 \n'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI

\n

URL 为图片链接例如:

\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

如果 symbolpath:// 的形式,是否在缩放时保持该图形的长宽比。

\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
      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

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
\n

rich 中如果没有设置 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
\n

rich 中如果没有设置 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

行高。

\n

rich 中如果没有设置 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

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.data.label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 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": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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.rich": { "desc": "

rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
\n

rich 中如果没有设置 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
\n

rich 中如果没有设置 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

行高。

\n

rich 中如果没有设置 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

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.data.label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 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

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\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
  • 可以通过内置的语义声明位置:

    \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.emphasis.label.distance": { "desc": "\n\n

距离图形元素的距离。当 position 为字符描述值(如 'top''insideRight')时候有效。

\n

参见:label position

\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.rotate": { "desc": "\n\n

标签旋转。从 -90 度到 90 度。正值是逆时针。

\n

参见:label rotation

\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "markPoint.data.emphasis.label.offset": { "desc": "\n\n

是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40

\n", "uiControl": { "type": "vector", "dims": "x,y", "step": "0.5", "separate": "true" } }, "markPoint.data.emphasis.label.color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "markPoint.data.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.data.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.data.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.data.emphasis.label.fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "markPoint.data.emphasis.label.align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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.emphasis.label.verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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.emphasis.label.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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.emphasis.label.backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.data.emphasis.label.borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.data.emphasis.label.borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "markPoint.data.emphasis.label.padding": { "desc": "\n\n

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "markPoint.data.emphasis.label.shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "markPoint.data.emphasis.label.shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.emphasis.label.shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.emphasis.label.width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.emphasis.label.height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.emphasis.label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "markPoint.data.emphasis.label.textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "markPoint.data.emphasis.label.textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.emphasis.label.textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.emphasis.label.rich": { "desc": "

rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

\n

例如:

\n
label: {\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.emphasis.label.rich..color": { "desc": "\n\n

文字的颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "null" } }, "markPoint.data.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.data.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.data.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.data.emphasis.label.rich..fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "markPoint.data.emphasis.label.rich..align": { "desc": "\n\n

文字水平对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'left'
  • \n
  • 'center'
  • \n
  • 'right'
  • \n
\n

rich 中如果没有设置 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.emphasis.label.rich..verticalAlign": { "desc": "\n\n

文字垂直对齐方式,默认自动。

\n

可选:

\n
    \n
  • 'top'
  • \n
  • 'middle'
  • \n
  • 'bottom'
  • \n
\n

rich 中如果没有设置 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.emphasis.label.rich..lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 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.emphasis.label.rich..backgroundColor": { "desc": "\n\n

文字块背景色。

\n

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

\n

也可以直接使用图片,例如:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n
\n

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.data.emphasis.label.rich..borderColor": { "desc": "\n\n

文字块边框颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color", "default": "#fff" } }, "markPoint.data.emphasis.label.rich..borderWidth": { "desc": "\n\n

文字块边框宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.rich..borderRadius": { "desc": "\n\n

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "markPoint.data.emphasis.label.rich..padding": { "desc": "\n\n

文字块的内边距。例如:

\n
    \n
  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • \n
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • \n
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]
  • \n
\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "markPoint.data.emphasis.label.rich..shadowColor": { "desc": "\n\n

文字块的背景阴影颜色。

\n", "uiControl": { "type": "color" } }, "markPoint.data.emphasis.label.rich..shadowBlur": { "desc": "\n\n

文字块的背景阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.rich..shadowOffsetX": { "desc": "\n\n

文字块的背景阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.emphasis.label.rich..shadowOffsetY": { "desc": "\n\n

文字块的背景阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.emphasis.label.rich..width": { "desc": "

文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.emphasis.label.rich..height": { "desc": "

文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。

\n

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

\n

注意,如果不定义 rich 属性,则不能指定 widthheight

\n" }, "markPoint.data.emphasis.label.rich..textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n

如果设置为 'auto',则为视觉映射得到的颜色,如系列色。

\n", "uiControl": { "type": "color" } }, "markPoint.data.emphasis.label.rich..textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.rich..textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "markPoint.data.emphasis.label.rich..textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.label.rich..textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.emphasis.label.rich..textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "markPoint.data.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.data.emphasis.itemStyle.borderColor": { "desc": "\n\n

图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

\n", "uiControl": { "type": "color" } }, "markPoint.data.emphasis.itemStyle.borderWidth": { "desc": "\n\n

描边线宽。为 0 时无描边。

\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "markPoint.data.emphasis.itemStyle.borderType": { "desc": "\n\n

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'

\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "markPoint.data.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.data.emphasis.itemStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color

\n", "uiControl": { "type": "color", "default": "" } }, "markPoint.data.emphasis.itemStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "markPoint.data.emphasis.itemStyle.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "markPoint.data.emphasis.itemStyle.opacity": { "desc": "\n\n

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "markPoint.animation": { "desc": "\n\n

是否开启动画。

\n", "uiControl": { "type": "boolean", "default": "true", "clean": "true" } }, "markPoint.animationThreshold": { "desc": "

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

\n" }, "markPoint.animationDuration": { "desc": "\n\n

初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:

\n
animationDuration: function (idx) {\n    // 越往后的数据时长越大\n    return idx * 100;\n}\n
\n", "uiControl": { "type": "number", "min": "0", "default": "1000", "step": "20", "clean": "true" } }, "markPoint.animationEasing": { "desc": "\n\n

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

\n", "uiControl": { "type": "enum", "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut", "clean": "true" } }, "markPoint.animationDelay": { "desc": "

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

\n

如下示例:

\n
animationDelay: function (idx) {\n    // 越往后的数据延迟越大\n    return idx * 100;\n}\n
\n

也可以看该示例

\n" }, "markPoint.animationDurationUpdate": { "desc": "\n\n

数据更新动画的时长。

\n

支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:

\n
animationDurationUpdate: function (idx) {\n    // 越往后的数据时长越大\n    return idx * 100;\n}\n
\n", "uiControl": { "type": "number", "min": "0", "default": "1000", "step": "20" } }, "markPoint.animationEasingUpdate": { "desc": "\n\n

数据更新动画的缓动效果。

\n", "uiControl": { "type": "enum", "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" } }, "markPoint.animationDelayUpdate": { "desc": "

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

\n

如下示例:

\n
animationDelayUpdate: function (idx) {\n    // 越往后的数据延迟越大\n    return idx * 100;\n}\n
\n

也可以看该示例

\n" }, "markLine": { "desc": "

图表标线。

\n" }, "markLine.silent": { "desc": "\n\n

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

\n", "uiControl": { "type": "boolean" } }, "markLine.symbol": { "desc": "

标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol

\n" }, "markLine.symbolSize": { "desc": "

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

\n

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

\n" }, "markLine.precision": { "desc": "

标线数值的精度,在显示平均值线的时候有用。

\n" }, "markLine.label": { "desc": "

标线的文本。

\n" }, "markLine.label.show": { "desc": "

是否显示标签。

\n" }, "markLine.label.position": { "desc": "

标签位置,可选:

\n
    \n
  • 'start' 线的起始点。
  • \n
  • 'middle' 线的中点。
  • \n
  • 'end' 线的结束点。
  • \n
\n

4.7.0 版本起,支持更多标签位置:'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'

\n

其中,'insideMiddleBottom' 等同于 'middle'。具体位置参见下图。

\n

文字与线的间距可以通过 label.distance 调整。

\n