{ "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\n\n", "uiControl": { "type": "percentvector", "dims": "inner,outer", "default": "0%, 75%" } }, "data": { "desc": "

series-sunburst.data 的数据格式是树状的,例如:

\n
[{\n    name: 'parent1',\n    value: 10,          // 可以不写父元素的 value,则为子元素之和;\n                        // 如果写了,并且大于子元素之和,可以用来表示还有其他子元素未显示\n    children: [{\n        value: 5,\n        name: 'child1',\n        children: [{\n            value: 2,\n            name: 'grandchild1',\n            itemStyle: {\n                // 每个数据可以有自己的样式,覆盖 series.itemStyle 和 level.itemStyle\n            },\n            label: {\n                // 标签样式,同上\n            }\n        }]\n    }, {\n        value: 3,\n        name: 'child2'\n    }],\n    itemStyle: {\n        // parent1 的图形样式,不会被后代继承\n    },\n    label: {\n        // parent1 的标签样式,不会被后代继承\n    }\n}, {\n    name: 'parent2',\n    value: 4\n}]\n
\n" }, "data.value": { "desc": "

数据值,如果包含 children,则可以不写 value 值。这时,将使用子元素的 value 之和作为父元素的 value。如果 value 大于子元素之和,可以用来表示还有其他子元素未显示。

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

显示在扇形块中的描述文字。

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

点击此节点可跳转的超链接。须 series-sunburst.nodeClick 值为 'link' 时才生效。

\n

参见 series-sunburst.data.target

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

意义同 HTML <a> 标签中的 target,参见 series-sunburst.data.link。可选值为:'blank''self'

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

label 描述了每个扇形块中,文本标签的样式。

\n

优先级:series.data.label > series.levels.label > series.label

\n

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。

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

label.rotate

\n", "uiControl": { "type": "enum", "options": "radial,tangential", "default": "radial" } }, "data.label.align": { "desc": "\n\n

文字对齐方式,可取值为:'left''center''right'。注意,'left' 是指靠近内圈,而 'right' 是指靠近外圈。

\n

label.align

\n", "uiControl": { "type": "enum", "options": "left,center,right", "default": "center" } }, "data.label.minAngle": { "desc": "\n\n

当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。

\n", "uiControl": { "type": "angle", "min": "0", "step": "1", "max": "360" } }, "data.label.show": { "desc": "\n\n

是否显示标签。

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

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

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

文字的颜色。

\n

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

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

文字字体的风格。

\n

可选:

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

文字字体的粗细。

\n

可选:

\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.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" } }, "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

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

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

文字块边框颜色。

\n

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

\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

注意,文字块的 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": "\n\n

文本显示宽度。

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

文本显示高度。

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

文字本身的描边颜色。

\n

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

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

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

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

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

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

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

\n\n" }, "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

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

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

文字字体的风格。

\n

可选:

\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

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

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

文字块边框颜色。

\n

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

\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

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

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

标签的视觉引导线配置。

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

是否显示视觉引导线。

\n", "uiControl": { "type": "boolean" } }, "data.labelLine.showAbove": { "desc": "

是否显示在图形上方。

\n" }, "data.labelLine.length2": { "desc": "\n\n

视觉引导项第二段的长度。

\n", "uiControl": { "type": "number", "default": "15", "min": "0", "step": "1" } }, "data.labelLine.smooth": { "desc": "\n\n

是否平滑视觉引导线,默认不平滑,可以设置成 true 平滑显示,也可以设置为 0 到 1 的值,表示平滑程度。

\n", "uiControl": { "type": "boolean" } }, "data.labelLine.minTurnAngle": { "desc": "

通过调整第二段线的长度,限制引导线两端之间最小的夹角,以防止过小的夹角导致显示不美观。

\n

可以设置为 0 - 180 度。

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

线宽。

\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "data.labelLine.lineStyle.type": { "desc": "\n\n

线的类型。

\n

可选:

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

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

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

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

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.labelLine.lineStyle.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "data.labelLine.lineStyle.opacity": { "desc": "\n\n

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "data.itemStyle": { "desc": "

旭日图扇形块的样式。

\n

可以在 series.itemStyle 定义所有扇形块的样式,也可以在 series.levels.itemStyle 定义每一层扇形块的样式,还可以在 series.data.itemStyle 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 series.data.itemStyle,将会覆盖 series.itemStyleseries.levels.itemStyle

\n

优先级:series.data.itemStyle > series.levels.itemStyle > series.itemStyle

\n" }, "data.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", "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": "1", "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.enabledaria.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": "

取值范围:01,表示占图案区域的百分比。

\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 控制了横向的图案模式。当其值为 numbernumber[] 类型时,与 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