.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.tooltip": {
"desc": "本系列每个数据项中特定的 tooltip 设定。
\n"
},
"data.tooltip.position": {
"desc": "\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。
\n可选:
\n\nArray
\n 通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置。
\n 示例:
\n // 绝对位置,相对于容器左侧 10px, 上侧 10 px\n position: [10, 10]\n // 相对位置,放置在容器正中间\n position: ['50%', '50%']\n
\n \nFunction
\n 回调函数,格式如下:
\n (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
\n 参数:
\n point: 鼠标位置,如 [20, 40]。
\n params: 同 formatter 的参数相同。
\n dom: tooltip 的 dom 对象。
\n rect: 只有鼠标在图形上时有效,是一个用x
, y
, width
, height
四个属性表达的图形包围盒。
\n size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}
。
\n 返回值:
\n 可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相 百分比。
\n 也可以是一个对象,如:{left: 10, top: 30}
,或者 {right: '20%', bottom: 40}
。
\n 如下示例:
\n position: function (point, params, dom, rect, size) {\n // 固定在顶部\n return [point[0], '10%'];\n }\n
\n 或者:
\n position: function (pos, params, dom, rect, size) {\n // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n
\n \n
\n\n'inside'
\n 鼠标所在图形的内部中心位置,只在 trigger 为'item'
的时候有效。
\n \n'top'
\n 鼠标所在图形上侧,只在 trigger 为'item'
的时候有效。
\n \n'left'
\n 鼠标所在图形左侧,只在 trigger 为'item'
的时候有效。
\n \n'right'
\n 鼠标所在图形右侧,只在 trigger 为'item'
的时候有效。
\n \n'bottom'
\n 鼠标所在图形底侧,只在 trigger 为'item'
的时候有效。
\n \n
\n"
},
"data.tooltip.formatter": {
"desc": "\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
\n1, 字符串模板
\n模板变量有 {a}
, {b}
,{c}
,{d}
,{e}
,分别表示系列名,数据名,数据值等。\n在 trigger 为 'axis'
的时候,会有多个系列的数据,此时可以通过 {a0}
, {a1}
, {a2}
这种后面加索引的方式表示系列的索引。\n不同图表类型下的 {a}
,{b}
,{c}
,{d}
含义不一样。\n其中变量{a}
, {b}
, {c}
, {d}
在不同图表类型下代表数据含义为:
\n\n折线(区域)图、柱状(条形)图、K线图 : {a}
(系列名称),{b}
(类目值),{c}
(数值), {d}
(无)
\n \n散点图(气泡)图 : {a}
(系列名称),{b}
(数据名称),{c}
(数值数组), {d}
(无)
\n \n地图 : {a}
(系列名称),{b}
(区域名称),{c}
(合并数值), {d}
(无)
\n \n饼图、仪表盘、漏斗图: {a}
(系列名称),{b}
(数据项名称),{c}
(数值), {d}
(百分比)
\n \n
\n更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
\n示例:
\nformatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n2, 回调函数
\n回调函数格式:
\n(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => 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 percent: number,\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在 trigger 为 'axis'
的时候,或者 tooltip 被 axisPointer 触发的时候,params
是多个系列的数据数组。其中每项内容格式同上,并且,
\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注: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注: ECharts 2.x 使用数组表示各参数的方式不再支持。
\n第二个参数 ticket
是异步回调标识,配合第三个参数 callback
使用。\n第三个参数 callback
是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 ticket
和 html
更新提示框浮层内容。
\n示例:
\nformatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n
\n"
},
"data.tooltip.backgroundColor": {
"desc": "\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n提示框浮层的背景颜色。
\n"
},
"data.tooltip.borderColor": {
"desc": "\n\n\n\n\n\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n提示框浮层的边框颜色。
\n",
"uiControl": {
"type": "color",
"default": "#333"
}
},
"data.tooltip.borderWidth": {
"desc": "\n\n\n\n\n\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n提示框浮层的边框宽。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"data.tooltip.padding": {
"desc": "\n\n\n\n\n\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n\n\n提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
\n使用示例:
\n// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5,左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"data.tooltip.textStyle": {
"desc": "\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n提示框浮层的文本样式。
\n"
},
"data.tooltip.textStyle.color": {
"desc": "\n\n文字的颜色。
\n",
"uiControl": {
"type": "color",
"default": "'#fff'"
}
},
"data.tooltip.textStyle.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"data.tooltip.textStyle.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.tooltip.textStyle.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.tooltip.textStyle.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "14",
"min": "1",
"step": "1"
}
},
"data.tooltip.textStyle.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.tooltip.textStyle.width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"data.tooltip.textStyle.height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"data.tooltip.textStyle.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n",
"uiControl": {
"type": "color"
}
},
"data.tooltip.textStyle.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.tooltip.textStyle.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"data.tooltip.textStyle.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.tooltip.textStyle.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.tooltip.textStyle.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.tooltip.extraCssText": {
"desc": "\n注意:series.data.tooltip
仅在 tooltip.trigger 为 'item'
时有效。
\n
\n额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:
\nextraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n"
},
"markPoint": {
"desc": "图表标注。
\n"
},
"markPoint.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
如果需要每个数据的图形不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => string\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
\n",
"uiControl": {
"type": "icon",
"default": "circle"
}
},
"markPoint.symbolSize": {
"desc": "\n\n标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
\n如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number|Array\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
\n",
"uiControl": {
"type": "number",
"min": "0"
}
},
"markPoint.symbolRotate": {
"desc": "\n\n标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
\n如果需要每个数据的旋转角度不一样,可以设置为如下格式的回调函数:
\n(value: Array|number, params: Object) => number\n
\n其中第一个参数 value
为 data 中的数据值。第二个参数params
是其它的数据项参数。
\n\n从 4.8.0 开始支持回调函数。
\n
\n",
"uiControl": {
"type": "angle",
"min": "-180",
"max": "180",
"step": "1"
}
},
"markPoint.symbolKeepAspect": {
"desc": "\n\n如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
\n",
"uiControl": {
"type": "boolean",
"clean": "true"
}
},
"markPoint.symbolOffset": {
"desc": "\n\n标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
\n",
"uiControl": {
"type": "vector",
"separate": "true",
"dims": "x,y"
}
},
"markPoint.silent": {
"desc": "\n\n图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
\n",
"uiControl": {
"type": "boolean"
}
},
"markPoint.label": {
"desc": "标注的文本。
\n"
},
"markPoint.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"markPoint.label.position": {
"desc": "\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"
}
},
"markPoint.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"markPoint.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.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注: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"
},
"markPoint.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.label.height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.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"
},
"markPoint.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.itemStyle": {
"desc": "标注的样式。
\n"
},
"markPoint.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"
}
},
"markPoint.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.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"
}
},
"markPoint.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.emphasis": {
"desc": "标注的高亮样式。
\n"
},
"markPoint.emphasis.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"markPoint.emphasis.label.position": {
"desc": "\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"
}
},
"markPoint.emphasis.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"markPoint.emphasis.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.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注: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"
},
"markPoint.emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.emphasis.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.emphasis.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.emphasis.label.height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.emphasis.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.emphasis.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.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"
},
"markPoint.emphasis.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.emphasis.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.emphasis.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.emphasis.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.emphasis.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.emphasis.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.emphasis.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.color": {
"desc": "\n\n图形的颜色。
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.emphasis.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.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"
}
},
"markPoint.emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.emphasis.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.emphasis.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.data": {
"desc": "标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
\n\n通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
\n \n用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min'
, 'max'
, 'average'
。
\n \n直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
\n \n
\n当多个属性同时存在时,优先级按上述的顺序。
\n示例:
\ndata: [\n {\n name: '最大值',\n type: 'max'\n }, \n {\n name: '某个坐标',\n coord: [10, 20]\n }, {\n name: '固定 x 像素位置',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: '某个屏幕坐标',\n x: 100,\n y: 100\n }\n]\n
\n"
},
"markPoint.data.name": {
"desc": "标注名称。
\n"
},
"markPoint.data.type": {
"desc": "\n\n特殊的标注类型,用于标注最大值最小值等。
\n可选:
\n\n'min'
最大值。 \n'max'
最大值。 \n'average'
平均值。 \n
\n",
"uiControl": {
"type": "enum",
"options": "min,max,average"
}
},
"markPoint.data.valueIndex": {
"desc": "\n\n在使用 type 时有效,用于指定在哪个维度上指定最大值最小值,可以是 0
(xAxis, radiusAxis),1
(yAxis, angleAxis),默认使用第一个数值轴所在的维度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"max": "1",
"step": "1"
}
},
"markPoint.data.valueDim": {
"desc": "在使用 type 时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称。
\n"
},
"markPoint.data.coord": {
"desc": "标注的坐标。坐标格式视系列的坐标系而定,可以是直角坐标系上的 x
, y
,也可以是极坐标系上的 radius
, angle
。例如 [121, 2323]、['aa', 998]。
\n注:对于 axis.type 为 'category'
类型的轴
\n\n- 如果 coord 值为
number
,则表示 axis.data 的 index。 \n- 如果 coord 值为
string
,则表示 axis.data 中具体的值。注意使用这种方式时,xAxis.data 不能写成 [number, number, ...],而只能写成 [string, string, ...],否则不能被 markPoint / markLine 用『具体值』索引到。 \n
\n例如:
\n{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // 注意这里不建议写成 [5, 6, 9, 13, 19, 33],否则不能被 markPoint / markLine 用『具体值』索引到。\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine 也是同理\n data: [{\n coord: [5, 33.4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。\n // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。\n // 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]\n // 而只能写成 [string, string, ...]\n }]\n }\n }\n}\n
\n"
},
"markPoint.data.x": {
"desc": "\n\n相对容器的屏幕 x 坐标,单位像素。
\n",
"uiControl": {
"type": "percent",
"default": "0"
}
},
"markPoint.data.y": {
"desc": "\n\n相对容器的屏幕 y 坐标,单位像素。
\n",
"uiControl": {
"type": "percent",
"default": "0"
}
},
"markPoint.data.value": {
"desc": "标注值,可以不设。
\n"
},
"markPoint.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"
}
},
"markPoint.data.symbolSize": {
"desc": "\n\n标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
\n",
"uiControl": {
"type": "number",
"min": "0"
}
},
"markPoint.data.symbolRotate": {
"desc": "\n\n标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine
中当 symbol
为 'arrow'
时会忽略 symbolRotate
强制设置为切线的角度。
\n",
"uiControl": {
"type": "angle",
"min": "-180",
"max": "180",
"step": "1"
}
},
"markPoint.data.symbolKeepAspect": {
"desc": "\n\n如果 symbol
是 path://
的形式,是否在缩放时保持该图形的长宽比。
\n",
"uiControl": {
"type": "boolean",
"clean": "true"
}
},
"markPoint.data.symbolOffset": {
"desc": "\n\n标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
\n例如 [0, '50%']
就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
\n",
"uiControl": {
"type": "vector",
"separate": "true",
"dims": "x,y"
}
},
"markPoint.data.itemStyle": {
"desc": "该标注的样式。
\n"
},
"markPoint.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"
}
},
"markPoint.data.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.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"
}
},
"markPoint.data.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.data.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.data.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.data.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.data.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"markPoint.data.label.position": {
"desc": "\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"
}
},
"markPoint.data.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"markPoint.data.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.data.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.data.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.data.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.label.height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.data.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.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"
},
"markPoint.data.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.data.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.data.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.data.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.show": {
"desc": "\n\n是否显示标签。
\n",
"uiControl": {
"type": "boolean",
"default": "false"
}
},
"markPoint.data.emphasis.label.position": {
"desc": "\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"
}
},
"markPoint.data.emphasis.label.distance": {
"desc": "\n\n距离图形元素的距离。当 position 为字符描述值(如 'top'
、'insideRight'
)时候有效。
\n参见:label position。
\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rotate": {
"desc": "\n\n标签旋转。从 -90 度到 90 度。正值是逆时针。
\n参见:label rotation。
\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"markPoint.data.emphasis.label.offset": {
"desc": "\n\n是否对文字进行偏移。默认不偏移。例如:[30, 40]
表示文字在横向上偏移 30
,纵向上偏移 40
。
\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"markPoint.data.emphasis.label.color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.data.emphasis.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.emphasis.label.borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.emphasis.label.borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.data.emphasis.label.shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.emphasis.label.shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.emphasis.label.height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.emphasis.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.emphasis.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.data.emphasis.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.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"
},
"markPoint.data.emphasis.label.rich..color": {
"desc": "\n\n文字的颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.data.emphasis.label.rich..fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.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如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.emphasis.label.rich..borderColor": {
"desc": "\n\n文字块边框颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"markPoint.data.emphasis.label.rich..borderWidth": {
"desc": "\n\n文字块边框宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rich..borderRadius": {
"desc": "\n\n文字块的圆角。
\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"markPoint.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"
}
},
"markPoint.data.emphasis.label.rich..shadowColor": {
"desc": "\n\n文字块的背景阴影颜色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.emphasis.label.rich..shadowBlur": {
"desc": "\n\n文字块的背景阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rich..shadowOffsetX": {
"desc": "\n\n文字块的背景阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rich..shadowOffsetY": {
"desc": "\n\n文字块的背景阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rich..width": {
"desc": "文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\nwidth
也可以是百分比字符串,如 '100%'
。表示的是所在文本块的 contentWidth
(即不包含文本块的 padding
)的百分之多少。之所以以 contentWidth
做基数,因为每个文本片段只能基于 content box
布局。如果以 outerWidth
做基数,则百分比的计算在实用中不具有意义,可能会超出。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.emphasis.label.rich..height": {
"desc": "文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor
)时,可能会使用它。
\n注意,文字块的 width
和 height
指定的是内容高宽,不包含 padding
。
\n注意,如果不定义 rich
属性,则不能指定 width
和 height
。
\n"
},
"markPoint.data.emphasis.label.rich..textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n如果设置为 'auto'
,则为视觉映射得到的颜色,如系列色。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.emphasis.label.rich..textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rich..textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"markPoint.data.emphasis.label.rich..textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rich..textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.label.rich..textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"markPoint.data.emphasis.itemStyle.color": {
"desc": "\n\n图形的颜色。
\n\n颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如 '#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充
\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.emphasis.itemStyle.borderColor": {
"desc": "\n\n图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
\n",
"uiControl": {
"type": "color"
}
},
"markPoint.data.emphasis.itemStyle.borderWidth": {
"desc": "\n\n描边线宽。为 0 时无描边。
\n",
"uiControl": {
"type": "number",
"value": "0",
"min": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.itemStyle.borderType": {
"desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"markPoint.data.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"
}
},
"markPoint.data.emphasis.itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"markPoint.data.emphasis.itemStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.itemStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"markPoint.data.emphasis.itemStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"markPoint.animation": {
"desc": "\n\n是否开启动画。
\n",
"uiControl": {
"type": "boolean",
"default": "true",
"clean": "true"
}
},
"markPoint.animationThreshold": {
"desc": "是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。
\n"
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.animationDelay": {
"desc": "初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
\n如下示例:
\nanimationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n
\n也可以看该示例
\n"
},
"markPoint.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"
}
},
"markPoint.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"
}
},
"markPoint.animationDelayUpdate": {
"desc": "数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
\n如下示例:
\nanimationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n
\n也可以看该示例
\n"
},
"markLine": {
"desc": "图表标线。
\n"
},
"markLine.silent": {
"desc": "\n\n图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
\n",
"uiControl": {
"type": "boolean"
}
},
"markLine.symbol": {
"desc": "标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
\n"
},
"markLine.symbolSize": {
"desc": "标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
\n注意: 这里无法像一般的 symbolSize
那样通过数组分别指定高宽。
\n"
},
"markLine.precision": {
"desc": "标线数值的精度,在显示平均值线的时候有用。
\n"
},
"markLine.label": {
"desc": "标线的文本。
\n"
},
"markLine.label.show": {
"desc": "是否显示标签。
\n"
},
"markLine.label.position": {
"desc": "标签位置,可选:
\n\n'start'
线的起始点。 \n'middle'
线的中点。 \n'end'
线的结束点。 \n
\n4.7.0 版本起,支持更多标签位置:'start'
, 'middle'
, 'end'
, 'insideStartTop'
, 'insideStartBottom'
, 'insideMiddleTop'
, 'insideMiddleBottom'
, 'insideEndTop'
, 'insideEndBottom'
。
\n其中,'insideMiddleBottom'
等同于 'middle'
。具体位置参见下图。
\n文字与线的间距可以通过 label.distance 调整。
\n