.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.labelLine": {
"desc": "标签的视觉引导线配置。
\n"
},
"select.labelLine.show": {
"desc": "\n\n是否显示视觉引导线。
\n",
"uiControl": {
"type": "boolean"
}
},
"select.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"
}
},
"select.labelLine.lineStyle.width": {
"desc": "\n\n线宽。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"select.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"
}
},
"select.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"
}
},
"select.labelLine.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"select.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.labelLine.lineStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"select.itemStyle": {
"desc": "旭日图扇形块的样式。
\n可以在 series.itemStyle 定义所有扇形块的样式,也可以在 series.levels.itemStyle 定义每一层扇形块的样式,还可以在 series.data.itemStyle 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 series.data.itemStyle,将会覆盖 series.itemStyle 和 series.levels.itemStyle。
\n优先级:series.data.itemStyle > series.levels.itemStyle > series.itemStyle。
\n"
},
"select.itemStyle.color": {
"desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"select.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"select.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"select.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"select.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"select.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"select.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"selectedMode": {
"desc": "\n从 v5.0.0
开始支持
\n
\n\n\n选中模式的配置,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single'
,'multiple'
,分别表示单选还是多选。
\n",
"uiControl": {
"type": "enum",
"options": "false,true,single,multiple"
}
},
"levels": {
"desc": "多层配置
\n旭日图是一种有层次的结构,为了方便同一层样式的配置,我们提供了 levels 配置项。它是一个数组,其中的第 0 项表示数据下钻后返回上级的图形,其后的每一项分别表示从圆心向外层的层级。
\n例如,假设我们没有数据下钻功能,并且希望将最内层的扇形块的颜色设为红色,文字设为蓝色,可以这样设置:
\nseries: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n
\n"
},
"levels.label": {
"desc": "label
描述了每个扇形块中,文本标签的样式。
\n优先级:series.data.label > series.levels.label > series.label。
\n图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
\n"
},
"levels.label.rotate": {
"desc": "\n\n\n同 label.rotate
\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.label.align": {
"desc": "\n\n文字对齐方式,可取值为:'left'
、 'center'
、 'right'
。注意,'left'
是指靠近内圈,而 'right'
是指靠近外圈。
\n同 label.align
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.label.minAngle": {
"desc": "\n\n当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.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"
}
},
"levels.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"levels.label.formatter": {
"desc": "标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
\n字符串模板\n模板变量有:
\n\n{a}
:系列名。 \n{b}
:数据名。 \n{c}
:数据值。 \n{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。 \n{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。 \n
\n示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
\n{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\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"
},
"levels.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.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"
}
},
"levels.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"levels.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"levels.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"
},
"levels.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.labelLine": {
"desc": "标签的视觉引导线配置。
\n"
},
"levels.labelLine.show": {
"desc": "\n\n是否显示视觉引导线。
\n",
"uiControl": {
"type": "boolean"
}
},
"levels.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"
}
},
"levels.labelLine.lineStyle.width": {
"desc": "\n\n线宽。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.labelLine.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.labelLine.lineStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.itemStyle": {
"desc": "旭日图扇形块的样式。
\n可以在 series.itemStyle 定义所有扇形块的样式,也可以在 series.levels.itemStyle 定义每一层扇形块的样式,还可以在 series.data.itemStyle 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 series.data.itemStyle,将会覆盖 series.itemStyle 和 series.levels.itemStyle。
\n优先级:series.data.itemStyle > series.levels.itemStyle > series.itemStyle。
\n"
},
"levels.itemStyle.color": {
"desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"levels.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"levels.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.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"
}
},
"levels.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.emphasis": {
"desc": "高亮状态配置。
\n"
},
"levels.emphasis.label": {
"desc": "label
描述了每个扇形块中,文本标签的样式。
\n优先级:series.data.label > series.levels.label > series.label。
\n图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
\n"
},
"levels.emphasis.label.rotate": {
"desc": "\n\n\n同 label.rotate
\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.emphasis.label.align": {
"desc": "\n\n文字对齐方式,可取值为:'left'
、 'center'
、 'right'
。注意,'left'
是指靠近内圈,而 'right'
是指靠近外圈。
\n同 label.align
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.emphasis.label.minAngle": {
"desc": "\n\n当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.emphasis.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.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"
}
},
"levels.emphasis.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"levels.emphasis.label.formatter": {
"desc": "标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
\n字符串模板\n模板变量有:
\n\n{a}
:系列名。 \n{b}
:数据名。 \n{c}
:数据值。 \n{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。 \n{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。 \n
\n示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
\n{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\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"
},
"levels.emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.emphasis.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.emphasis.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.emphasis.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.emphasis.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.emphasis.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.emphasis.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.emphasis.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.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"
}
},
"levels.emphasis.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"levels.emphasis.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"levels.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"
},
"levels.emphasis.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.emphasis.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.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"
}
},
"levels.emphasis.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.emphasis.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.emphasis.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.emphasis.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.emphasis.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.emphasis.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.labelLine": {
"desc": "标签的视觉引导线配置。
\n"
},
"levels.emphasis.labelLine.show": {
"desc": "\n\n是否显示视觉引导线。
\n",
"uiControl": {
"type": "boolean"
}
},
"levels.emphasis.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"
}
},
"levels.emphasis.labelLine.lineStyle.width": {
"desc": "\n\n线宽。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.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"
}
},
"levels.emphasis.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"
}
},
"levels.emphasis.labelLine.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.emphasis.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.labelLine.lineStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.emphasis.itemStyle": {
"desc": "旭日图扇形块的样式。
\n可以在 series.itemStyle 定义所有扇形块的样式,也可以在 series.levels.itemStyle 定义每一层扇形块的样式,还可以在 series.data.itemStyle 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 series.data.itemStyle,将会覆盖 series.itemStyle 和 series.levels.itemStyle。
\n优先级:series.data.itemStyle > series.levels.itemStyle > series.itemStyle。
\n"
},
"levels.emphasis.itemStyle.color": {
"desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.emphasis.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.emphasis.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.blur": {
"desc": "淡出状态配置。
\n"
},
"levels.blur.label": {
"desc": "label
描述了每个扇形块中,文本标签的样式。
\n优先级:series.data.label > series.levels.label > series.label。
\n图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
\n"
},
"levels.blur.label.rotate": {
"desc": "\n\n\n同 label.rotate
\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.blur.label.align": {
"desc": "\n\n文字对齐方式,可取值为:'left'
、 'center'
、 'right'
。注意,'left'
是指靠近内圈,而 'right'
是指靠近外圈。
\n同 label.align
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.blur.label.minAngle": {
"desc": "\n\n当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.blur.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.blur.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"
}
},
"levels.blur.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"levels.blur.label.formatter": {
"desc": "标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
\n字符串模板\n模板变量有:
\n\n{a}
:系列名。 \n{b}
:数据名。 \n{c}
:数据值。 \n{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。 \n{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。 \n
\n示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
\n{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\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"
},
"levels.blur.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.blur.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.blur.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.blur.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"
}
},
"levels.blur.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.blur.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.blur.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.blur.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.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"
}
},
"levels.blur.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"levels.blur.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"levels.blur.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"
},
"levels.blur.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.blur.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.blur.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"
}
},
"levels.blur.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.blur.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.blur.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.blur.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.labelLine": {
"desc": "标签的视觉引导线配置。
\n"
},
"levels.blur.labelLine.show": {
"desc": "\n\n是否显示视觉引导线。
\n",
"uiControl": {
"type": "boolean"
}
},
"levels.blur.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"
}
},
"levels.blur.labelLine.lineStyle.width": {
"desc": "\n\n线宽。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.blur.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"
}
},
"levels.blur.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"
}
},
"levels.blur.labelLine.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.blur.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.labelLine.lineStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.blur.itemStyle": {
"desc": "旭日图扇形块的样式。
\n可以在 series.itemStyle 定义所有扇形块的样式,也可以在 series.levels.itemStyle 定义每一层扇形块的样式,还可以在 series.data.itemStyle 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 series.data.itemStyle,将会覆盖 series.itemStyle 和 series.levels.itemStyle。
\n优先级:series.data.itemStyle > series.levels.itemStyle > series.itemStyle。
\n"
},
"levels.blur.itemStyle.color": {
"desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.blur.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.blur.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"
}
},
"levels.blur.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.blur.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.select": {
"desc": "选中状态配置。
\n"
},
"levels.select.label": {
"desc": "label
描述了每个扇形块中,文本标签的样式。
\n优先级:series.data.label > series.levels.label > series.label。
\n图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
\n"
},
"levels.select.label.rotate": {
"desc": "\n\n\n同 label.rotate
\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.select.label.align": {
"desc": "\n\n文字对齐方式,可取值为:'left'
、 'center'
、 'right'
。注意,'left'
是指靠近内圈,而 'right'
是指靠近外圈。
\n同 label.align
\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.select.label.minAngle": {
"desc": "\n\n当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.select.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.select.label.position": {
"desc": "\n\n\n\n标签的位置。
\n\n可以通过内置的语义声明位置:
\n 示例:
\n position: 'top'\n
\n 支持:top
/ left
/ right
/ bottom
/ inside
/ insideLeft
/ insideRight
/ insideTop
/ insideBottom
/ insideTopLeft
/ insideBottomLeft
/ insideTopRight
/ insideBottomRight
\n \n也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
\n 示例:
\n // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n
\n \n
\n参见:label position。
\n",
"uiControl": {
"type": "enum",
"options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"
}
},
"levels.select.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"levels.select.label.formatter": {
"desc": "标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \\n
换行。
\n字符串模板\n模板变量有:
\n\n{a}
:系列名。 \n{b}
:数据名。 \n{c}
:数据值。 \n{@xxx}:数据中名为
'xxx'的维度的值,如
{@product}表示名为
'product'` 的维度的值。 \n{@[n]}:数据中维度
n的值,如
{@[3]}` 表示维度 3 的值,从 0 开始计数。 \n
\n示例:
\nformatter: '{b}: {@score}'\n
\n回调函数
\n回调函数格式:
\n(params: Object|Array) => string\n
\n参数 params
是 formatter 需要的单个数据集。格式如下:
\n{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\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"
},
"levels.select.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.select.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.select.label.fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.select.label.fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.select.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.select.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"
}
},
"levels.select.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"
}
},
"levels.select.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"
}
},
"levels.select.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.select.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.select.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"
}
},
"levels.select.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.select.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.select.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.select.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.overflow": {
"desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
\n\n'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
\n'break'
换行 \n'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行 \n
\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"levels.select.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"levels.select.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"levels.select.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"
},
"levels.select.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.select.label.rich..fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.select.label.rich..fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.select.label.rich..fontFamily": {
"desc": "\n\n文字的字体系列。
\n还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.select.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.select.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"
}
},
"levels.select.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"
}
},
"levels.select.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"
}
},
"levels.select.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"
}
},
"levels.select.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.select.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.select.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"
}
},
"levels.select.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.select.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"levels.select.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'inherit'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.select.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.labelLine": {
"desc": "标签的视觉引导线配置。
\n"
},
"levels.select.labelLine.show": {
"desc": "\n\n是否显示视觉引导线。
\n",
"uiControl": {
"type": "boolean"
}
},
"levels.select.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"
}
},
"levels.select.labelLine.lineStyle.width": {
"desc": "\n\n线宽。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.select.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"
}
},
"levels.select.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"
}
},
"levels.select.labelLine.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.select.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.labelLine.lineStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.select.itemStyle": {
"desc": "旭日图扇形块的样式。
\n可以在 series.itemStyle 定义所有扇形块的样式,也可以在 series.levels.itemStyle 定义每一层扇形块的样式,还可以在 series.data.itemStyle 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 series.data.itemStyle,将会覆盖 series.itemStyle 和 series.levels.itemStyle。
\n优先级:series.data.itemStyle > series.levels.itemStyle > series.itemStyle。
\n"
},
"levels.select.itemStyle.color": {
"desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"levels.select.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"levels.select.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.select.itemStyle.shadowBlur": {
"desc": "\n\n图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
\n示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.select.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"animation": {
"desc": "\n\n是否开启动画。
\n",
"uiControl": {
"type": "boolean",
"default": "true",
"clean": "true"
}
},
"animationThreshold": {
"desc": "是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
\n"
},
"animationDuration": {
"desc": "\n\n初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:
\nanimationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "1000",
"step": "20",
"clean": "true"
}
},
"animationEasing": {
"desc": "\n\n初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
\n",
"uiControl": {
"type": "enum",
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut",
"clean": "true"
}
},
"animationDelay": {
"desc": "初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
\n如下示例:
\nanimationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n
\n也可以看该示例
\n"
},
"animationDurationUpdate": {
"desc": "\n\n数据更新动画的时长。
\n支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:
\nanimationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "1000",
"step": "20"
}
},
"animationEasingUpdate": {
"desc": "\n\n数据更新动画的缓动效果。
\n",
"uiControl": {
"type": "enum",
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"
}
},
"animationDelayUpdate": {
"desc": "数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
\n如下示例:
\nanimationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n
\n也可以看该示例
\n"
}
}