{ "id": { "desc": "

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

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

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

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

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

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

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

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

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

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

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

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

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

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

每个点的大小,在地理坐标系(coordinateSystem: 'geo')上有效。

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

每个点模糊的大小,在地理坐标系(coordinateSystem: 'geo')上有效。

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

最小的透明度,在地理坐标系(coordinateSystem: 'geo')上有效。

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

最大的透明度,在地理坐标系(coordinateSystem: 'geo')上有效。

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

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

\n

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

\n

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

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

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

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

在直角坐标系(coordinateSystem: 'cartesian2d')上有效。

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

是否显示标签。

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

文字的颜色。

\n

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

\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

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

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

文字块边框颜色。

\n

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

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

文本显示宽度。

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

文本显示高度。

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

文字本身的描边颜色。

\n

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

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

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

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

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

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

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

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

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

\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

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

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

文字块边框颜色。

\n

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

\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

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

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

v5.0.0 开始支持

\n
\n

标签的统一布局配置。

\n

该配置项是在每个系列默认的标签布局基础上,统一调整标签的(x, y)位置,标签对齐等属性以实现想要的标签布局效果。

\n

该配置项也可以是一个有如下参数的回调函数

\n
// 标签对应数据的 dataIndex\ndataIndex: number\n// 标签对应的数据类型,只在关系图中会有 node 和 edge 数据类型的区分\ndataType?: string\n// 标签对应的系列的 index\nseriesIndex: number\n// 标签显示的文本\ntext: string\n// 默认的标签的包围盒,由系列默认的标签布局决定\nlabelRect: {x: number, y: number, width: number, height: number}\n// 默认的标签水平对齐\nalign: 'left' | 'center' | 'right'\n// 默认的标签垂直对齐\nverticalAlign: 'top' | 'middle' | 'bottom'\n// 标签所对应的数据图形的包围盒,可用于定位标签位置\nrect: {x: number, y: number, width: number, height: number}\n// 默认引导线的位置,目前只有饼图(pie)和漏斗图(funnel)有默认标签位置\n// 如果没有该值则为 null\nlabelLinePoints?: number[][]\n
\n

示例:

\n

将标签显示在图形右侧 10px 的位置,并且垂直居中:

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

根据图形的包围盒尺寸决定文本尺寸

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n" }, "labelLayout.hideOverlap": { "desc": "

是否隐藏重叠的标签。

\n

下面示例演示了在关系图中开启该配置后,在缩放时可以实现自动的标签隐藏。

\n