.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectedMode": {
"desc": "\n从 v5.0.0
开始支持
\n
\n\n\n选中模式的配置,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'
,'multiple'
,分别表示单选还是多选。
\n",
"uiControl": {
"type": "enum",
"options": "false,true,single,multiple"
}
},
"smooth": {
"desc": "是否平滑曲线显示。
\n如果是 boolean
类型,则表示是否开启平滑处理。如果是 number
类型(取值范围 0 到 1),表示平滑程度,越小表示越接近折线段,反之则反。设为 true
时相当于设为 0.5
。
\n如果需要修改平滑算法,请参考 smoothMonotone。
\n"
},
"smoothMonotone": {
"desc": "折线平滑后是否在一个维度上保持单调性,可以设置成'x'
, 'y'
来指明是在 x 轴或者 y 轴上保持单调性。
\n通常在双数值轴上使用。
\n下面两张图分别是双数值轴中的折线图smoothMonotone
不设置以及设置为'x'
的区别。
\n\n\n\n\n"
},
"sampling": {
"desc": "折线图在数据量远大于像素点时候的降采样策略,开启后可以有效的优化图表的绘制效率,默认关闭,也就是全部绘制不过滤数据点。
\n可选:
\n\n'lttb'
采用 Largest-Triangle-Three-Bucket 算法,可以最大程度保证采样后线条的趋势,形状和极值。 \n'average'
取过滤点的平均值 \n'max'
取过滤点的最大值 \n'min'
取过滤点的最小值 \n'sum'
取过滤点的和 \n
\n"
},
"dimensions": {
"desc": "使用 dimensions 定义 series.data
或者 dataset.source
的每个维度的信息。
\n注意:如果使用了 dataset,那么可以在 dataset.dimensions 中定义 dimension ,或者在 dataset.source 的第一行/列中给出 dimension 名称。于是就不用在这里指定 dimension。但如果在这里指定了 dimensions
,那么优先使用这里的。
\n例如:
\noption = {\n dataset: {\n source: [\n // 有了上面 dimensions 定义后,下面这五个维度的名称分别为:\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n
\nseries: {\n type: 'xxx',\n dimensions: [\n null, // 如果此维度不想给出定义,则使用 null 即可\n {type: 'ordinal'}, // 只定义此维度的类型。\n // 'ordinal' 表示离散型,一般文本使用这种类型。\n // 如果类型没有被定义,会自动猜测类型。\n {name: 'good', type: 'number'},\n 'bad' // 等同于 {name: 'bad'}\n ]\n}\n
\ndimensions
数组中的每一项可以是:
\n\nstring
,如 'someName'
,等同于 {name: 'someName'}
\nObject
,属性可以有:\n- name:
string
。 \n- type:
string
,支持\nnumber
,默认,表示普通数据。 \nordinal
,对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的,所以使用者也可以手动强制指定。 \nfloat
,即 Float64Array。 \nint
,即 Int32Array。 \ntime
,表示时间类型。设置成 'time' 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。时间类型的支持参见 data。 \n
\n \n- displayName: 一般用于 tooltip 中维度名的展示。
string
如果没有指定,默认使用 name 来展示。 \n
\n \n
\n值得一提的是,当定义了 dimensions
后,默认 tooltip
中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。如果没有定义 dimensions
,则默认 tooltip
会横排显示,且只显示数值没有维度名称可显示。
\n"
},
"encode": {
"desc": "可以定义 data
的哪个维度被编码成什么。比如:
\noption = {\n dataset: {\n source: [\n // 每一列称为一个『维度』。\n // 这里分别是维度 0、1、2、3、4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。\n y: 2, // 表示维度 2 映射到 y 轴。\n tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。\n }\n }\n}\n
\n当使用 dimensions 给维度定义名称后,encode
中可直接引用名称,例如:
\nseries: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n
\nencode
声明的基本结构如下,其中冒号左边是坐标系、标签等特定名称,如 'x'
, 'y'
, 'tooltip'
等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。
\n下面是 encode 支持的属性:
\n// 在任何坐标系和系列中,都支持:\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字)\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。\n itemName: 3\n}\n\n// 直角坐标系(grid/cartesian)特有的属性:\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴(singleAxis)特有的属性:\nencode: {\n single: 3\n}\n\n// 极坐标系(polar)特有的属性:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系(geo)特有的属性:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:\nencode: {\n value: 3\n}\n
\n这是个更丰富的 encode
的示例:
\n特殊地,在 自定义系列(custom series) 中,encode
中轴可以不指定或设置为 null/undefined
,从而使系列免于受这个轴控制,也就是说,轴的范围(extent)不会受此系列数值的影响,轴被 dataZoom 控制时也不会过滤掉这个系列:
\nvar option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x 位置永远为 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // 这样这个系列就不会被 x 轴以及 x\n // 轴上的 dataZoom 控制了。\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n
\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"
},
"data": {
"desc": "系列中的数据内容数组。数组项通常为具体的数据项。
\n注意,如果系列没有指定 data
,并且 option 有 dataset,那么默认使用第一个 dataset。如果指定了 data
,则不会再使用 dataset。
\n可以使用 series.datasetIndex
指定其他的 dataset。
\n通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』。
\nseries: [{\n data: [\n // 维度X 维度Y 其他维度 ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n
\n\n特别地,当只有一个轴为类目轴(axis.type 为 'category'
)的时候,数据可以简化用一个一维数组表示。例如:
\nxAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // 与 xAxis.data 一一对应。\n data: [23, 44, 55, 19]\n // 它其实是下面这种形式的简化:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n『值』与 轴类型 的关系:
\n\n当某维度对应于数值轴(axis.type 为 'value'
或者 'log'
)的时候:
\n 其值可以为 number
(例如 12
)。(也可以兼容 string
形式的 number,例如 '12'
)
\n \n当某维度对应于类目轴(axis.type 为 'category'
)的时候:
\n 其值须为类目的『序数』(从 0
开始)或者类目的『字符串值』。例如:
\n xAxis: {\n type: 'category',\n data: ['星期一', '星期二', '星期三', '星期四']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。\n [ '星期四', 2, 1 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。\n [ 2, 'p', 2 ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。\n [ 3, 3, 5 ]\n ]\n }]\n
\n 双类目轴的示例可以参考 Github Punchcard 示例。
\n \n当某维度对应于时间轴(type 为 'time'
)的时候,值可以为:
\n\n- 一个时间戳,如
1484141700832
,表示 UTC 时间。 \n- 或者字符串形式的时间描述:
\n- ISO 8601 的子集,只包含这些形式(这几种格式,除非指明时区,否则均表示本地时间,与 moment 一致):
\n- 部分年月日时间:
'2012-03'
, '2012-03-01'
, '2012-03-01 05'
, '2012-03-01 05:06'
. \n- 使用
'T'
或空格分割: '2012-03-01T12:22:33.123'
, '2012-03-01 12:22:33.123'
. \n- 时区设定:
'2012-03-01T12:22:33Z'
, '2012-03-01T12:22:33+8000'
, '2012-03-01T12:22:33-05:00'
. \n
\n \n- 其他的时间字符串,包括(均表示本地时间):\n
'2012'
, '2012-3-1'
, '2012/3/1'
, '2012/03/01'
,\n'2009/6/12 2:00'
, '2009/6/12 2:05:08'
, '2009/6/12 2:05:08.123'
\n
\n \n- 或者用户自行初始化的 Date 实例:
\n- 注意,用户自行初始化 Date 实例的时候,浏览器的行为有差异,不同字符串的表示也不同。
\n- 例如:在 chrome 中,
new Date('2012-01-01')
表示 UTC 时间的 2012 年 1 月 1 日,而 new Date('2012-1-1')
和 new Date('2012/01/01')
表示本地时间的 2012 年 1 月 1 日。在 safari 中,不支持 new Date('2012-1-1')
这种表示方法。 \n- 所以,使用
new Date(dataString)
时,可使用第三方库解析(如 moment),或者使用 echarts.number.parseDate
,或者参见 这里。 \n
\n \n
\n \n
\n当需要对个别数据进行个性化定义时:
\n数组项可用对象,其中的 value
像表示具体的数值,如:
\n[\n 12,\n 34,\n {\n value : 56,\n //自定义标签样式,仅对该数据项有效\n label: {},\n //自定义特殊 itemStyle,仅对该数据项有效\n itemStyle:{}\n },\n 10\n]\n// 或\n[\n [12, 33],\n [34, 313],\n {\n value: [56, 44],\n label: {},\n itemStyle:{}\n },\n [10, 33]\n]\n
\n空值:
\n当某数据不存在时(ps:不存在不代表值为 0),可以用 '-'
或者 null
或者 undefined
或者 NaN
表示。
\n例如,无数据在折线图中可表现为该点是断开的,在其它图中可表示为图形不存在。
\n"
},
"data.name": {
"desc": "数据项名称。
\n"
},
"data.value": {
"desc": "单个数据项的数值。
\n"
},
"data.symbol": {
"desc": "\n\n单个数据标记的图形。
\nECharts 提供的标记类型包括
\n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
\n可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
\nURL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
\n'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
\n例如:
\n'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
",
"uiControl": {
"type": "icon",
"default": "circle"
}
},
"data.symbolSize": {
"desc": "\n\n单个数据标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
\n",
"uiControl": {
"type": "number",
"min": "0"
}
},
"data.symbolRotate": {
"desc": "\n\n单个数据标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
\n",
"uiControl": {
"type": "angle",
"min": "-180",
"max": "180",
"step": "1"
}
},
"data.symbolKeepAspect": {
"desc": "\n\n如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
\n",
"uiControl": {
"type": "boolean",
"clean": "true"
}
},
"data.symbolOffset": {
"desc": "\n\n单个数据标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
\n",
"uiControl": {
"type": "vector",
"separate": "true",
"dims": "x,y"
}
},
"data.label": {
"desc": "单个拐点文本的样式设置。
\n"
},
"data.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"data.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"
}
},
"data.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"data.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"data.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"data.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"data.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"data.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"
}
},
"data.label.fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"data.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"data.label.align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\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"
}
},
"data.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"data.label.padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"data.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"data.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"data.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"data.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"data.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"data.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.overflow": {
"desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
\n\n'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
\n'break'
换行 \n'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行 \n
\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"data.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"data.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"data.label.rich": {
"desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
\n例如:
\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"
},
"data.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"data.label.rich..fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"data.label.rich..fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"data.label.rich..fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"data.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"data.label.rich..align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.label.rich..verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.label.rich..lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.label.rich..backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\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"
}
},
"data.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"data.label.rich..padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"data.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"data.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"data.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"data.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"data.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"data.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.labelLine": {
"desc": "标签的视觉引导线配置。
\n"
},
"data.labelLine.show": {
"desc": "\n\n是否显示视觉引导线。
\n",
"uiControl": {
"type": "boolean"
}
},
"data.labelLine.showAbove": {
"desc": "是否显示在图形上方。
\n"
},
"data.labelLine.length2": {
"desc": "\n\n视觉引导项第二段的长度。
\n",
"uiControl": {
"type": "number",
"default": "15",
"min": "0",
"step": "1"
}
},
"data.labelLine.smooth": {
"desc": "\n\n是否平滑视觉引导线,默认不平滑,可以设置成 true
平滑显示,也可以设置为 0 到 1 的值,表示平滑程度。
\n",
"uiControl": {
"type": "boolean"
}
},
"data.labelLine.minTurnAngle": {
"desc": "通过调整第二段线的长度,限制引导线两端之间最小的夹角,以防止过小的夹角导致显示不美观。
\n可以设置为 0 - 180 度。
\n"
},
"data.labelLine.lineStyle.color": {
"desc": "\n\n线的颜色。
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"data.labelLine.lineStyle.width": {
"desc": "\n\n线宽。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.type": {
"desc": "\n\n线的类型。
\n可选:
\n\n'solid'
\n'dashed'
\n'dotted'
\n
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"data.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"data.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"data.itemStyle": {
"desc": "单个拐点标志的样式设置。
\n"
},
"data.itemStyle.color": {
"desc": "\n\n图形的颜色。
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"data.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"data.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"data.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"data.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"data.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"data.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"data.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"data.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"data.emphasis": {
"desc": "单个拐点的高亮样式和标签设置。
\n"
},
"data.emphasis.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"data.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"
}
},
"data.emphasis.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"data.emphasis.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"data.emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"data.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"
}
},
"data.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"
}
},
"data.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"
}
},
"data.emphasis.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"data.emphasis.label.align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.emphasis.label.verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.emphasis.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.emphasis.label.backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\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"
}
},
"data.emphasis.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.emphasis.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"data.emphasis.label.padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"data.emphasis.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"data.emphasis.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.emphasis.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.emphasis.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"data.emphasis.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"data.emphasis.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"data.emphasis.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"data.emphasis.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.emphasis.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.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"
}
},
"data.emphasis.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"data.emphasis.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"data.emphasis.label.rich": {
"desc": "在 rich
里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
\n例如:
\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"
},
"data.emphasis.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"data.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"
}
},
"data.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"
}
},
"data.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"
}
},
"data.emphasis.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"data.emphasis.label.rich..align": {
"desc": "\n\n文字水平对齐方式,默认自动。
\n可选:
\n\n'left'
\n'center'
\n'right'
\n
\nrich
中如果没有设置 align
,则会取父层级的 align
。例如:
\n{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.emphasis.label.rich..verticalAlign": {
"desc": "\n\n文字垂直对齐方式,默认自动。
\n可选:
\n\n'top'
\n'middle'
\n'bottom'
\n
\nrich
中如果没有设置 verticalAlign
,则会取父层级的 verticalAlign
。例如:
\n{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n
\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.emphasis.label.rich..lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"data.emphasis.label.rich..backgroundColor": {
"desc": "\n\n文字块背景色。
\n可以使用颜色值,例如:'#123234'
, 'red'
, 'rgba(0,23,11,0.3)'
。
\n也可以直接使用图片,例如:
\nbackgroundColor: {\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"
}
},
"data.emphasis.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.emphasis.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"data.emphasis.label.rich..padding": {
"desc": "\n\n文字块的内边距。例如:
\n\npadding: [3, 4, 5, 6]
:表示 [上, 右, 下, 左]
的边距。 \npadding: 4
:表示 padding: [4, 4, 4, 4]
。 \npadding: [3, 4]
:表示 padding: [3, 4, 3, 4]
。 \n
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"data.emphasis.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"data.emphasis.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.emphasis.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.emphasis.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"data.emphasis.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"data.emphasis.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"data.emphasis.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.emphasis.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"data.emphasis.label.rich..textShadowBlur": {
"desc": "\n\n