{ "id": { "desc": "

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

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

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

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

所有图形的 zlevel 值。

\n

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

\n

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

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

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

\n

z相比zlevel优先级更低，而且不会创建新的 Canvas。

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

的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。

\n

支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。

\n

使用示例：

\n
// 设置成绝对的像素值\ncenter: [400, 300]\n// 设置成相对的百分比\ncenter: ['50%', '50%']\n
", "uiControl": { "type": "percentvector", "dims": "x,y" } }, "radius": { "desc": "\n\n

仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。

\n", "uiControl": { "type": "percent", "default": "75%" } }, "legendHoverLink": { "desc": "\n\n

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

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

仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。

\n", "uiControl": { "type": "angle", "min": "-360", "max": "360", "default": "225", "step": "1" } }, "endAngle": { "desc": "\n\n

仪表盘结束角度。

\n", "uiControl": { "type": "angle", "min": "-360", "max": "360", "default": "-45", "step": "1" } }, "clockwise": { "desc": "\n\n

仪表盘刻度是否是顺时针增长。

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

系列中的数据内容数组。数组项可以为单个数值，如：

\n
[12, 34, 56, 10, 23]\n
\n

如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组，如：

\n
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n
\n

这时候可以将每项数组中的第二个值指定给 visualMap 组件。

\n

更多时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：

\n
[{\n    // 数据项的名称\n    name: '数据1',\n    // 数据项值8\n    value: 10\n}, {\n    name: '数据2',\n    value: 20\n}]\n
\n

需要对个别内容指定进行个性化定义时：

\n
[{\n    name: '数据1',\n    value: 10\n}, {\n    // 数据项名称\n    name: '数据2',\n    value : 56,\n    //自定义特殊 tooltip，仅对该数据项有效\n    tooltip:{},\n    //自定义特殊itemStyle，仅对该item有效\n    itemStyle:{}\n}]\n
\n" }, "data.title": { "desc": "

仪表盘标题。

\n" }, "data.title.show": { "desc": "\n\n

是否显示标题。

\n", "uiControl": { "type": "boolean", "default": "true" } }, "data.title.offsetCenter": { "desc": "\n\n

相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。

\n", "uiControl": { "type": "percentvector", "default": "0,20%", "dims": "x,y" } }, "data.title.color": { "desc": "\n\n

文字的颜色。

\n", "uiControl": { "type": "color", "default": "'#464646'" } }, "data.title.fontStyle": { "desc": "\n\n

文字字体的风格。

\n

可选：

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

文字字体的粗细。

\n

可选：

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

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "16", "min": "1", "step": "1" } }, "data.title.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.title.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

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

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

文字块边框颜色。

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

文字块边框宽度。

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

文字块的圆角。

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

文字块的内边距。例如：

\n\n

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

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

文字块的背景阴影颜色。

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

文字块的背景阴影长度。

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

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

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

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

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

文本显示宽度。

\n", "uiControl": { "type": "number", "default": "100", "min": "1", "max": "500", "step": "1" } }, "data.title.height": { "desc": "\n\n

文本显示高度。

\n", "uiControl": { "type": "number", "default": "50", "min": "1", "max": "500", "step": "1" } }, "data.title.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

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

文字本身的描边宽度。

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

文字本身的阴影颜色。

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

文字本身的阴影长度。

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

文字本身的阴影 X 偏移。

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

文字本身的阴影 Y 偏移。

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

文字超出宽度是否截断或者换行。配置width时有效

\n\n", "uiControl": { "type": "enum", "options": "truncate,break,breakAll" } }, "data.title.ellipsis": { "desc": "

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

\n" }, "data.title.lineOverflow": { "desc": "

文本超出高度部分是否截断，配置height时有效。

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

文字的颜色。

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

文字字体的风格。

\n

可选：

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

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.title.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.title.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.title.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.title.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

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

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

文字块边框颜色。

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

文字块边框宽度。

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

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.title.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

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

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

文字块的背景阴影颜色。

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

文字块的背景阴影长度。

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

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

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

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

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

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

\n

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

\n

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

\n

注意，如果不定义 rich 属性，则不能指定 width 和 height。

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

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

\n

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

\n

注意，如果不定义 rich 属性，则不能指定 width 和 height。

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

文字本身的描边颜色。

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

文字本身的描边宽度。

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

文字本身的阴影颜色。

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

文字本身的阴影长度。

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

文字本身的阴影 X 偏移。

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

文字本身的阴影 Y 偏移。

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

从 v5.0.0 开始支持

\n
\n

是否开启标签的数字动画。

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

仪表盘详情，用于显示数据。

\n" }, "data.detail.show": { "desc": "\n\n

是否显示详情。

\n", "uiControl": { "type": "boolean", "default": "true" } }, "data.detail.color": { "desc": "\n\n

文本颜色，默认取数值所在的区间的颜色。

\n", "uiControl": { "type": "color" } }, "data.detail.fontStyle": { "desc": "\n\n

文字字体的风格。

\n

可选：

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

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "30", "min": "1", "step": "1" } }, "data.detail.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.detail.backgroundColor": { "desc": "\n\n

详情背景色。

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

详情边框颜色。

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

详情边框宽度。

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

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.detail.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

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

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

文字块的背景阴影颜色。

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

文字块的背景阴影长度。

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

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

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

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

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

详情宽度。

\n", "uiControl": { "type": "percent", "default": "100", "min": "0", "step": "1" } }, "data.detail.height": { "desc": "\n\n

详情高度。

\n", "uiControl": { "type": "percent", "default": "40", "min": "0", "step": "1" } }, "data.detail.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

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

文字本身的描边宽度。

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

文字本身的阴影颜色。

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

文字本身的阴影长度。

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

文字本身的阴影 X 偏移。

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

文字本身的阴影 Y 偏移。

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

文字超出宽度是否截断或者换行。配置width时有效

\n
    \n
  • 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
    • \n
  • 'break' 换行
    • \n
  • 'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
    • \n
\n", "uiControl": { "type": "enum", "options": "truncate,break,breakAll" } }, "data.detail.ellipsis": { "desc": "

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

\n" }, "data.detail.lineOverflow": { "desc": "

文本超出高度部分是否截断，配置height时有效。

\n
    \n
  • 'truncate' 在文本行数超出高度部分截断。
    • \n
\n" }, "data.detail.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.detail.rich..color": { "desc": "\n\n

文字的颜色。

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

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "data.detail.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.detail.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.detail.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.detail.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

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

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

文字块边框颜色。

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

文字块边框宽度。

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

文字块的圆角。

\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "data.detail.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

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

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

文字块的背景阴影颜色。

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

文字块的背景阴影长度。

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

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

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

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

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

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

\n

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

\n

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

\n

注意，如果不定义 rich 属性，则不能指定 width 和 height。

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

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

\n

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

\n

注意，如果不定义 rich 属性，则不能指定 width 和 height。

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

文字本身的描边颜色。

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

文字本身的描边宽度。

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

文字本身的阴影颜色。

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

文字本身的阴影长度。

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

文字本身的阴影 X 偏移。

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

文字本身的阴影 Y 偏移。

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

从 v5.0.0 开始支持

\n
\n

是否开启标签的数字动画。

\n" }, "data.detail.offsetCenter": { "desc": "\n\n

相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。

\n", "uiControl": { "type": "percentvector", "default": "0,-40%", "dims": "x,y" } }, "data.detail.formatter": { "desc": "

格式化函数或者字符串

\n
formatter: function (value) {\n    return value.toFixed(0);\n}\n
\n" }, "data.name": { "desc": "

数据项名称。

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

数据值。

\n", "uiControl": { "type": "number", "default": "0", "step": "1" } }, "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.itemStyle.decal(Object | 'none')": { "desc": "

图形的贴花图案，在 aria.enabled 与 aria.decal.show 都是 true 的情况下才生效。

\n

如果为 'none' 表示不使用贴花图案。

\n" }, "data.itemStyle.decal(Object | 'none').symbol(string|string[]) = 'rect'": { "desc": "

贴花的图案，如果是 string[] 表示循环使用数组中的图案。

\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
" }, "data.itemStyle.decal(Object | 'none').symbolSize": { "desc": "

取值范围：0 到 1，表示占图案区域的百分比。

\n" }, "data.itemStyle.decal(Object | 'none').symbolKeepAspect": { "desc": "

是否保持图案的长宽比。

\n" }, "data.itemStyle.decal(Object | 'none').color": { "desc": "

贴花图案的颜色，建议使用半透明色，这样能叠加在系列本身的颜色上。

\n" }, "data.itemStyle.decal(Object | 'none').backgroundColor": { "desc": "

贴花的背景色，将会覆盖在系列本身颜色之上，贴花图案之下。

\n" }, "data.itemStyle.decal(Object | 'none').dashArrayX(number | number[] | (number | number[])[]) = 5": { "desc": "

贴花图案的基本模式是在横向和纵向上分别以图案 - 空白 - 图案 - 空白 - 图案 - 空白的形式无限循环。通过设置每个图案和空白的长度，可以实现复杂的图案效果。

\n

dashArrayX 控制了横向的图案模式。当其值为 number 或 number[] 类型时，与 SVG stroke-dasharray 类似。

\n
    \n

  • 如果是 number 类型，表示图案和空白分别是这个值。如 5 表示先显示宽度为 5 的图案，然后空 5 像素，再然后显示宽度为 5 的图案……

    \n
    • \n

  • 如果是 number[] 类型，则表示图案和空白依次为数组值的循环。如：[5, 10, 2, 6] 表示图案宽 5 像素，然后空 10 像素，然后图案宽 2 像素，然后空 6 像素，然后图案宽 5 像素……

    \n
    • \n

  • 如果是 (number | number[])[] 类型，表示每行的图案和空白依次为数组值的循环。如：[10, [2, 5]] 表示第一行以图案 10 像素空 10 像素循环，第二行以图案 2 像素空 5 像素循环，第三行以图案 10 像素空 10 像素循环……

    \n
    • \n
\n

可以结合以下的例子理解本接口：

\n