{ "id": { "desc": "
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
\n" }, "show": { "desc": "是否显示地理坐标系组件。
\n" }, "map": { "desc": "地图类型。
\nECharts 3 中因为地图精度的提高,不再内置地图数据增大代码体积,你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。
\nECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
\n下面是两种类型的使用示例:
\nJavaScript 引入示例
\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
\nJSON 引入示例
\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
\nECharts 使用 geoJSON 格式的数据作为地图的轮廓,除了上述数据,你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中。参见示例 USA Population Estimates
\n" }, "roam": { "desc": "\n\n是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale'
或者 'move'
。设置成 true
为都开启
当前视角的中心点,用经纬度表示
\n例如:
\ncenter: [115.97, 29.71]\n
\n"
},
"aspectScale": {
"desc": "这个参数用于 scale 地图的长宽比。
\n最终的 aspect
的计算方式是:geoBoundingRect.width / geoBoundingRect.height * aspectScale
二维数组,定义定位的左上角以及右下角分别所对应的经纬度。例如
\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.max": { "desc": "最大的缩放值
\n" }, "nameMap": { "desc": "自定义地区的名称映射,如:
\n{\n 'China' : '中国'\n}\n
\n"
},
"nameProperty": {
"desc": "\n\n从
\nv4.8.0
开始支持
默认是 'name'
,针对 GeoJSON 要素的自定义属性名称,作为主键用于关联数据点和 GeoJSON 地理要素。\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'
表示多选。
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 emphasis
状态。
是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "label.position": { "desc": "\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 position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\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'
)时候有效。
参见: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
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\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'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\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'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\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行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\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文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\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.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\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.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\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.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\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.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "itemStyle": { "desc": "地图区域的多边形 图形样式。
\n" }, "itemStyle.areaColor": { "desc": "地图区域的颜色。
\n\n\n" }, "itemStyle.color": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'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
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\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": "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 position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\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'
)时候有效。
参见: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
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\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'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\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'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\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行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\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文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\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.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\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.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "emphasis.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\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.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\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.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "emphasis.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "emphasis.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "emphasis.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "emphasis.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "emphasis.itemStyle.areaColor": { "desc": "地图区域的颜色。
\n\n\n" }, "emphasis.itemStyle.color": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "emphasis.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'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
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "emphasis.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\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": "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" } }, "zlevel": { "desc": "所有图形的 zlevel 值。
\nzlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
z
相比zlevel
优先级更低,而且不会创建新的 Canvas。
组件离容器左侧的距离。
\nleft
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'left'
, 'center'
, 'right'
。
如果 left
的值为'left'
, 'center'
, 'right'
,组件会根据相应的位置自动对齐。
组件离容器上侧的距离。
\ntop
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比,也可以是 'top'
, 'middle'
, 'bottom'
。
如果 top
的值为'top'
, 'middle'
, 'bottom'
,组件会根据相应的位置自动对齐。
组件离容器右侧的距离。
\nright
的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
\n", "uiControl": { "type": "percent", "default": "0%" } }, "bottom": { "desc": "\n\n组件离容器下侧的距离。
\nbottom 的值可以是像 20
这样的具体像素值,可以是像 '20%'
这样相对于容器高宽的百分比。
默认自适应。
\n", "uiControl": { "type": "percent", "default": "0%" } }, "layoutCenter": { "desc": "layoutCenter
和 layoutSize
提供了除了 left/right/top/bottom/width/height
之外的布局手段。
在使用 left/right/top/bottom/width/height
的时候,可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间,并且保证不超出盒形的范围。此时可以通过 layoutCenter
属性定义地图中心在屏幕中的位置,layoutSize
定义地图的大小。如下示例
layoutCenter: ['30%', '30%'],\n// 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域\nlayoutSize: 100\n
\n设置这两个值后 left/right/top/bottom/width/height
无效。
地图的大小,见 layoutCenter
。支持相对于屏幕宽高的百分比或者绝对的像素大小。
在地图中对特定的区域配置样式。
\n例如:
\nregions: [{\n name: '广东',\n itemStyle: {\n areaColor: 'red',\n color: 'red'\n }\n}]\n
\ngeo 区域的颜色也可以被 map series 所控制,参见 series-map.geoIndex。
\n" }, "regions.name": { "desc": "地图区域的名称,例如 '广东'
,'浙江'
。
该区域是否选中。
\n" }, "regions.itemStyle": { "desc": "该区域的多边形样式设置
\n" }, "regions.itemStyle.areaColor": { "desc": "地图区域的颜色。
\n\n\n" }, "regions.itemStyle.color": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "regions.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'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
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "regions.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"regions.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "regions.itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "regions.itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "regions.label": { "desc": "图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label
选项在 ECharts 2.x 中放置于itemStyle
下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label
被拿出来跟 itemStyle
平级,并且跟 itemStyle
一样拥有 emphasis
状态。
是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "regions.label.position": { "desc": "\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 position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "regions.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "regions.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "regions.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"regions.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "regions.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "regions.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"regions.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"regions.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"regions.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "regions.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "regions.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "regions.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\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" }, "regions.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "regions.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "regions.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"regions.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"regions.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"regions.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "regions.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "regions.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "regions.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis": { "desc": "高亮的样式。
\n" }, "regions.emphasis.itemStyle.areaColor": { "desc": "地图区域的颜色。
\n\n\n" }, "regions.emphasis.itemStyle.color": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的颜色。
\n\n\n", "uiControl": { "type": "color" } }, "regions.emphasis.itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'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
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "regions.emphasis.itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"regions.emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "regions.emphasis.itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "regions.emphasis.itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "regions.emphasis.label.show": { "desc": "\n\n是否显示标签。
\n", "uiControl": { "type": "boolean", "default": "false" } }, "regions.emphasis.label.position": { "desc": "\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 position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n参见:label position。
\n", "uiControl": { "type": "enum", "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" } }, "regions.emphasis.label.distance": { "desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
参见:label position。
\n", "uiControl": { "type": "number", "default": "5", "min": "0", "step": "0.5" } }, "regions.emphasis.label.rotate": { "desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n", "uiControl": { "type": "angle", "default": "0", "min": "-90", "max": "90", "step": "1" } }, "regions.emphasis.label.offset": { "desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
字符串模板\n模板变量有:
\n{a}
:系列名。{b}
:数据名。{c}
:数据值。{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\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:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n"
},
"regions.emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "regions.emphasis.label.fontSize": { "desc": "\n\n文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "regions.emphasis.label.align": { "desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"regions.emphasis.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"regions.emphasis.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"regions.emphasis.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.borderRadius": { "desc": "\n\n文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "regions.emphasis.label.padding": { "desc": "\n\n文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "regions.emphasis.label.shadowBlur": { "desc": "\n\n文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.shadowOffsetX": { "desc": "\n\n文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis.label.shadowOffsetY": { "desc": "\n\n文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis.label.width": { "desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.textShadowColor": { "desc": "\n\n文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "regions.emphasis.label.textShadowBlur": { "desc": "\n\n文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.textShadowOffsetX": { "desc": "\n\n文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis.label.textShadowOffsetY": { "desc": "\n\n文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis.label.rich": { "desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
例如:
\nlabel: {\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" }, "regions.emphasis.label.rich.文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字字体的风格。
\n可选:
\n'normal'
'italic'
'oblique'
文字字体的粗细。
\n可选:
\n'normal'
'bold'
'bolder'
'lighter'
文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "regions.emphasis.label.rich.文字的字体大小。
\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "regions.emphasis.label.rich.文字水平对齐方式,默认自动。
\n可选:
\n'left'
'center'
'right'
rich
中如果没有设置 align
,则会取父层级的 align
。例如:
{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"regions.emphasis.label.rich.文字垂直对齐方式,默认自动。
\n可选:
\n'top'
'middle'
'bottom'
rich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"regions.emphasis.label.rich.行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
{\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"
}
},
"regions.emphasis.label.rich.文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
也可以直接使用图片,例如:
\nbackgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n
\n当使用图片的时候,可以使用 width
或 height
指定高宽,也可以不指定自适应。
如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字块边框宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.rich.文字块的圆角。
\n", "uiControl": { "type": "vector", "min": "0", "dims": "LT,RT, RB, LB" } }, "regions.emphasis.label.rich.文字块的内边距。例如:
\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。padding: 4
:表示 padding: [4, 4, 4, 4]
。padding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
文字块的背景阴影颜色。
\n", "uiControl": { "type": "color" } }, "regions.emphasis.label.rich.文字块的背景阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.rich.文字块的背景阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis.label.rich.文字块的背景阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis.label.rich.文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
width
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
注意,如果不定义 rich
属性,则不能指定 width
和 height
。
文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
文字本身的描边宽度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.rich.文字本身的阴影颜色。
\n", "uiControl": { "type": "color", "default": "#000" } }, "regions.emphasis.label.rich.文字本身的阴影长度。
\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "regions.emphasis.label.rich.文字本身的阴影 X 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "regions.emphasis.label.rich.文字本身的阴影 Y 偏移。
\n", "uiControl": { "type": "number", "step": "0.5" } }, "silent": { "desc": "\n\n图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
\n", "uiControl": { "type": "boolean" } } }