{ "id": { "desc": "

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

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

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

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

地图类型。

\n

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。

\n

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

\n

下面是两种类型的使用示例：

\n

JavaScript 引入示例

\n
<script src="echarts.js"></script>\n<script src="map/js/china.js"></script>\n<script>\nvar chart = echarts.init(document.getElementById('main'));\nchart.setOption({\n    series: [{\n        type: 'map',\n        map: 'china'\n    }]\n});\n</script>\n
\n

JSON 引入示例

\n
$.get('map/json/china.json', function (chinaJson) {\n    echarts.registerMap('china', chinaJson);\n    var chart = echarts.init(document.getElementById('main'));\n    chart.setOption({\n        series: [{\n            type: 'map',\n            map: 'china'\n        }]\n    });\n});\n
\n

ECharts 使用 geoJSON 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中。参见示例 USA Population Estimates

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

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

\n", "uiControl": { "type": "enum", "options": "true,false,scale,move" } }, "center": { "desc": "

当前视角的中心点，用经纬度表示

\n

例如：

\n
center: [115.97, 29.71]\n
\n" }, "aspectScale": { "desc": "

这个参数用于 scale 地图的长宽比。

\n

最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale

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

二维数组，定义定位的左上角以及右下角分别所对应的经纬度。例如

\n
// 设置为一张完整经纬度的世界地图\nmap: 'world',\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // 定位左上角经纬度\n    [-180, 90],\n    // 定位右下角经纬度\n    [180, -90]\n],\n
\n" }, "zoom": { "desc": "

当前视角的缩放比例。

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

滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。

\n" }, "scaleLimit.min": { "desc": "

最小的缩放值

\n" }, "scaleLimit.max": { "desc": "

最大的缩放值

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

自定义地区的名称映射，如：

\n
{\n    'China' : '中国'\n}\n
\n" }, "nameProperty": { "desc": "
\n

从 v4.8.0 开始支持

\n
\n

默认是 'name'，针对 GeoJSON 要素的自定义属性名称，作为主键用于关联数据点和 GeoJSON 地理要素。\n例如：

\n
{\n    nameProperty: 'NAME', // 数据点中的 name：Alabama 会关联到 GeoJSON 中 NAME 属性值为 Alabama 的地理要素{"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}\n    data:[\n        {name: 'Alabama', value: 4822023},\n        {name: 'Alaska', value: 731449},\n    ]\n}\n
\n" }, "selectedMode": { "desc": "

选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。

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

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

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

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

\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

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

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

\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

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

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

\n

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

\n

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

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

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

\n

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

\n

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

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

地图区域的多边形 图形样式。

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

地图区域的颜色。

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

    示例：

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

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

\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

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

\n

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

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

文字块边框颜色。

\n

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

\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

注意，文字块的 width 和 height 指定的是内容高宽，不包含 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": "\n\n

文本显示宽度。

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

文本显示高度。

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

文字本身的描边颜色。

\n

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

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

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

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

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

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

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

\n
    \n
  • 'truncate' 在文本行数超出高度部分截断。
    • \n
\n" }, "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

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

\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

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

\n

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

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

文字块边框颜色。

\n

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

\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

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

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

\n

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

\n

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

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

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

\n

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

\n

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

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

文字本身的描边颜色。

\n

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

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

地图区域的颜色。

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

选中状态下的多边形和标签样式。

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

是否显示标签。

\n", "uiControl": { "type": "boolean", "default": "false" } }, "select.label.position": { "desc": "\n\n\n\n

标签的位置。

\n
    \n

  • 可以通过内置的语义声明位置：

    \n

    示例：

    \n
      position: 'top'\n
    \n

    支持：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight

    \n
    • \n

  • 也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。

    \n

    示例：

    \n
      // 绝对的像素值\n  position: [10, 10],\n  // 相对的百分比\n  position: ['50%', '50%']\n
    \n
    • \n
\n

参见：label position。

\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "select.label.distance": { "desc": "\n\n

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

\n

参见：label position。

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

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

\n

参见：label rotation。

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

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

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

文字的颜色。

\n

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

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

文字字体的风格。

\n

可选：

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

文字的字体大小。

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

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

\n

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

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

文字块边框颜色。

\n

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

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

文字块边框宽度。

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

文字块的圆角。

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

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

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

文字块的背景阴影颜色。

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

文字块的背景阴影长度。

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

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

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

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

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

文本显示宽度。

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

文本显示高度。

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

文字本身的描边颜色。

\n

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

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

文字本身的描边宽度。

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

文字本身的阴影颜色。

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

文字本身的阴影长度。

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

文字本身的阴影 X 偏移。

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

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "select.label.overflow": { "desc": "\n\n

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

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

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

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

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

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

文字的颜色。

\n

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

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

文字的字体大小。

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

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

\n

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

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

文字块边框颜色。

\n

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

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

文字块边框宽度。

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

文字块的圆角。

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

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

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

文字块的背景阴影颜色。

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

文字块的背景阴影长度。

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

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

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

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

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

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

\n

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

\n

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

\n

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

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

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

\n

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

\n

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

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

文字本身的描边颜色。

\n

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

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

文字本身的描边宽度。

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

文字本身的阴影颜色。

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

文字本身的阴影长度。

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

文字本身的阴影 X 偏移。

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

文字本身的阴影 Y 偏移。

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

地图区域的颜色。

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

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

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

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

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

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

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

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

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

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

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "select.itemStyle.shadowOffsetY": { "desc": "\n\n

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

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "select.itemStyle.opacity": { "desc": "\n\n

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

\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "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" }, "left": { "desc": "\n\n

组件离容器左侧的距离。

\n

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

\n

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "top": { "desc": "\n\n

组件离容器上侧的距离。

\n

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

\n

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "right": { "desc": "\n\n

组件离容器右侧的距离。

\n

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

\n

默认自适应。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "bottom": { "desc": "\n\n

组件离容器下侧的距离。

\n

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

\n

默认自适应。

\n", "uiControl": { "type": "percent", "default": "0%" } }, "layoutCenter": { "desc": "

layoutCenter 和 layoutSize 提供了除了 left/right/top/bottom/width/height 之外的布局手段。

\n

在使用 left/right/top/bottom/width/height 的时候，可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间，并且保证不超出盒形的范围。此时可以通过 layoutCenter 属性定义地图中心在屏幕中的位置，layoutSize 定义地图的大小。如下示例

\n
layoutCenter: ['30%', '30%'],\n// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域\nlayoutSize: 100\n
\n

设置这两个值后 left/right/top/bottom/width/height 无效。

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

地图的大小，见 layoutCenter。支持相对于屏幕宽高的百分比或者绝对的像素大小。

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

默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。

\n

当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

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

多个拥有相同地图类型的系列会使用同一个地图展现，如果多个系列都在同一个区域有值，ECharts 会对这些值统计得到一个数据。这个配置项就是用于配置统计的方式，目前有：

\n
    \n
  • 'sum' 取和。
    • \n
  • 'average' 取平均值。
    • \n
  • 'max' 取最大值。
    • \n
  • 'min' 取最小值。
    • \n
\n" }, "showLegendSymbol": { "desc": "

在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。

\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 存在，那么就会使用 dataset。datasetIndex 指定本系列使用那个 dataset。

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