{ "id": { "desc": "
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
\n" }, "name": { "desc": "系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption
更新数据和配置项时用于指定对应的系列。
是否启用图例 hover 时的联动高亮。
\n", "uiControl": { "type": "boolean", "default": "true" } }, "coordinateSystem": { "desc": "该系列使用的坐标系,可选:
\nnull
或者 'none'
无坐标系。
\n'cartesian2d'
使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
\n'polar'
使用极坐标系,通过 polarIndex 指定相应的极坐标组件
\n'geo'
使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。
\n'none'
不使用坐标系。
\n使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
\n" }, "yAxisIndex": { "desc": "使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
\n" }, "polarIndex": { "desc": "使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
\n" }, "geoIndex": { "desc": "使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
\n" }, "calendarIndex": { "desc": "使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。
\n" }, "renderItem": { "desc": "custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem。例如:
\nvar option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n var categoryIndex = api.value(0);\n var start = api.coord([api.value(1), categoryIndex]);\n var end = api.coord([api.value(2), categoryIndex]);\n var height = api.size([0, 1])[1] * 0.6;\n\n var rectShape = echarts.graphic.clipRectByRect({\n x: start[0],\n y: start[1] - height / 2,\n width: end[0] - start[0],\n height: height\n }, {\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n return rectShape && {\n type: 'rect',\n shape: rectShape,\n style: api.style()\n };\n },\n data: data\n }]\n}\n
\n对于 data
中的每个数据项(为方便描述,这里称为 dataItem
),会调用此 renderItem 函数。
renderItem 函数提供了两个参数:
\n\nrenderItem 函数须返回根据此 dataItem
绘制出的图形元素的定义信息,参见 renderItem.return。
一般来说,renderItem 函数的主要逻辑,是将 dataItem
里的值映射到坐标系上的图形元素。这一般需要用到 renderItem.arguments.api 中的两个函数:
dataItem
中的数值。例如 api.value(0)
表示取出当前 dataItem
中第一个维度的数值。var point = api.coord([api.value(0), api.value(1)])
表示 dataItem
中的数值转换成坐标系上的点。有时候还需要用到 api.size(...) 函数,表示得到坐标系上一段数值范围对应的长度。
\n返回值中样式的设置可以使用 api.style(...) 函数,他能得到 series.itemStyle 中定义的样式信息,以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息:api.style({fill: 'green', stroke: 'yellow'})
。
renderItem 函数的参数。
\n" }, "renderItem.arguments.params": { "desc": "renderItem 函数的第一个参数,含有:
\n{\n context: // {Object} 一个可供开发者暂存东西的对象。生命周期只为:当前次的渲染。\n seriesId: // {string} 本系列 id。\n seriesName: // {string} 本系列 name。\n seriesIndex: // {number} 本系列 index。\n dataIndex: // {number} 数据项的 index。\n dataIndexInside: // {number} 数据项在当前坐标系中可见的数据的 index(即 dataZoom 当前窗口中的数据的 index)。\n dataInsideLength: // {number} 当前坐标系中可见的数据长度(即 dataZoom 当前窗口中的数据数量)。\n actionType: // {string} 触发此次重绘的 action 的 type。\n coordSys: // 不同的坐标系中,coordSys 里的信息不一样,含有如下这些可能:\n coordSys: {\n type: 'cartesian2d',\n x: // {number} grid rect 的 x\n y: // {number} grid rect 的 y\n width: // {number} grid rect 的 width\n height: // {number} grid rect 的 height\n },\n coordSys: {\n type: 'calendar',\n x: // {number} calendar rect 的 x\n y: // {number} calendar rect 的 y\n width: // {number} calendar rect 的 width\n height: // {number} calendar rect 的 height\n cellWidth: // {number} calendar cellWidth\n cellHeight: // {number} calendar cellHeight\n rangeInfo: {\n start: // calendar 日期开端\n end: // calendar 日期结尾\n weeks: // calendar 周数\n dayCount: // calendar 日数\n }\n },\n coordSys: {\n type: 'geo',\n x: // {number} geo rect 的 x\n y: // {number} geo rect 的 y\n width: // {number} geo rect 的 width\n height: // {number} geo rect 的 height\n zoom: // {number} 缩放的比率。如果没有缩放,则值为 1。例如 0.5 表示缩小了一半。\n },\n coordSys: {\n type: 'polar',\n cx: // {number} polar 的中心坐标\n cy: // {number} polar 的中心坐标\n r: // {number} polar 的外半径\n r0: // {number} polar 的内半径\n },\n coordSys: {\n type: 'singleAxis',\n x: // {number} singleAxis rect 的 x\n y: // {number} singleAxis rect 的 y\n width: // {number} singleAxis rect 的 width\n height: // {number} singleAxis rect 的 height\n }\n}\n
\n其中,关于 dataIndex
和 dataIndexInside
的区别:
dataIndex
指的 dataItem
在原始数据中的 index。dataIndexInside
指的是 dataItem
在当前数据窗口(参见 dataZoom)中的 index。renderItem.arguments.api 中使用的参数都是 dataIndexInside
而非 dataIndex
,因为从 dataIndex
转换成 dataIndexInside
需要时间开销。
renderItem 函数的第二个参数。
\n" }, "renderItem.arguments.api.value": { "desc": "得到给定维度的数据值。
\n@param {number} dimension 指定的维度(维度从 0 开始计数)。\n@param {number} [dataIndexInside] 一般不用传,默认就是当前数据项的 dataIndexInside。\n@return {number} 给定维度上的值。\n
"
},
"renderItem.arguments.api.coord": {
"desc": "将数据值映射到坐标系上。
\n@param {Array.<number>} data 数据值。\n@return {Array.<number>} 画布上的点的坐标,至少包含:[x, y]\n 对于polar坐标系,还会包含其他信息:\n polar: [x, y, radius, angle]\n
"
},
"renderItem.arguments.api.size": {
"desc": "给定数据范围,映射到坐标系上后的长度。
\n例如,cartesian2d中,api.size([2, 4])
返回 [12.4, 55]
,表示 x 轴数据范围为 2 映射得到长度是 12.4
,y 轴数据范围为 4 时应设得到长度为 55
。
在一些坐标系中,如极坐标系(polar)或者有 log 数轴的坐标系,不同点的长度是不同的,所以需要第二个参数,指定获取长度的点。
\n@param {Array.<number>} dataSize 数据范围。\n@param {Array.<number>} dataItem 获取长度的点。\n@return {Array.<number>} 画布上的长度\n
"
},
"renderItem.arguments.api.style": {
"desc": "能得到 series.itemStyle 中定义的样式信息和视觉映射得到的样式信息,可直接用于绘制图元。也可以用这种方式覆盖这些样式信息:api.style({fill: 'green', stroke: 'yellow'})
。
@param {Object} [extra] 额外指定的样式信息。\n@param {number} [dataIndexInside] 一般不用传,默认就是当前数据项的 dataIndexInside。\n@return {Object} 直接用于绘制图元的样式信息。\n
"
},
"renderItem.arguments.api.styleEmphasis": {
"desc": "能得到 series.itemStyle.emphasis 中定义的样式信息和视觉映射的样式信息,可直接用于绘制图元。也可以用这种方式覆盖这些样式信息:api.style({fill: 'green', stroke: 'yellow'})
。
@param {Object} [extra] 额外指定的样式信息。\n@param {number} [dataIndexInside] 一般不用传,默认就是当前数据项的 dataIndexInside。\n@return {Object} 直接用于绘制图元的样式信息。\n
"
},
"renderItem.arguments.api.visual": {
"desc": "得到视觉映射的样式信息。比较少被使用。
\n@param {string} visualType 'color', 'symbol', 'symbolSize', ...\n@param {number} [dataIndexInside] 一般不用传,默认就是当前数据项的 dataIndexInside。\n@return {string|number} 视觉映射的样式值。\n
"
},
"renderItem.arguments.api.barLayout": {
"desc": "当需要采用 barLayout 的时候,比如向柱状图上附加些东西,可以用这个方法得到 layout 信息。\n参见 例子。
\n@param {Object} opt\n@param {number} opt.count 每个簇有多少个 bar。\n@param {number|string} [opt.barWidth] bar 宽度。\n 可以是绝对值例如 `40` 或者百分数例如 `'60%'`。\n 百分数基于自动计算出的每一类目的宽度。\n@param {number|string} [opt.barMaxWidth] bar 最大宽度。\n 可以是绝对值例如 `40` 或者百分数例如 `'60%'`。\n 百分数基于自动计算出的每一类目的宽度。\n 比 `opt.barWidth` 优先级高。\n@param {number|string} [opt.barMinWidth] bar 最小宽度。\n 可以是绝对值例如 `40` 或者百分数例如 `'60%'`。\n 百分数基于自动计算出的每一类目的宽度。\n 比 `opt.barWidth` 优先级高。\n@param {number} [opt.barGap] 每个簇的 bar 之间的宽度。\n@param {number} [opt.barCategoryGap] 不同簇间的宽度。\n@return {Array.<Object>} [{\n width: number bar 的宽度。\n offset: number bar 的偏移量,以bar最左为基准。\n offsetCenter: number bar 的偏移量,以bar中心为基准。\n }, ...]\n
"
},
"renderItem.arguments.api.currentSeriesIndices": {
"desc": "得到系列的 当前index。注意这个 index 不同于系列定义时的 index。这个 index 是当 legend 组件进行了系列筛选后,剩余的系列排列后的 index。
\n@return {number}\n
"
},
"renderItem.arguments.api.font": {
"desc": "得到可以直接进行样式设置的文字信息字符串。
\n@param {Object} opt\n@param {string} [opt.fontStyle]\n@param {number} [opt.fontWeight]\n@param {number} [opt.fontSize]\n@param {string} [opt.fontFamily]\n@return {string} font 字符串。\n
"
},
"renderItem.arguments.api.getWidth": {
"desc": "@return {number} echarts 容器的宽度。\n
"
},
"renderItem.arguments.api.getHeight": {
"desc": "@return {number} echarts 容器的高度。\n
"
},
"renderItem.arguments.api.getZr": {
"desc": "@return {module:zrender} zrender 实例。\n
"
},
"renderItem.arguments.api.getDevicePixelRatio": {
"desc": "@return {number} 得到当前 devicePixelRatio。\n
"
},
"renderItem.return": {
"desc": "图形元素。每个图形元素是一个 object。详细信息参见:graphic。(width\\height\\top\\bottom 不支持)
\n如果什么都不渲染,可以不返回任何东西。
\n例如:
\n// 单独一个矩形\n{\n type: 'rect',\n shape: {\n x: x, y: y, width: width, height: height\n },\n style: api.style()\n}\n
\n// 一组图形元素\n{\n type: 'group',\n // 如果 diffChildrenByName 设为 true,则会使用 child.name 进行 diff,\n // 从而能有更好的过度动画,但是降低性能。缺省为 false。\n // diffChildrenByName: true,\n children: [{\n type: 'circle',\n shape: {\n cx: cx, cy: cy, r: r\n },\n style: api.style()\n }, {\n type: 'line',\n shape: {\n x1: x1, y1: y1, x2: x2, y2: y2\n },\n style: api.style()\n }]\n}\n
\n"
},
"renderItem.return_group": {
"desc": "group 是唯一的可以有子节点的容器。group 可以用来整体定位一组图形元素。
\n" }, "renderItem.return_group.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_group.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_group.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_group.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_group.name": { "desc": "\n" }, "renderItem.return_group.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_group.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_group.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_group.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_group.width": { "desc": "用于描述此 group
的宽。
这个宽只用于给子节点定位。
\n即便当宽度为零的时候,子节点也可以使用 left: 'center'
相对于父节点水平居中。
用于描述此 group
的高。
这个高只用于给子节点定位。
\n即便当高度为零的时候,子节点也可以使用 top: 'middle'
相对于父节点垂直居中。
在 自定义系列 中,当 diffChildrenByName: true
时,对于 renderItem 返回值中的每一个 group,会根据其 children 中每个图形元素的 name 属性进行 "diff"。在这里,"diff" 的意思是,重绘的时候,在已存在的图形元素和新的图形元素之间建立对应关系(依据 name
是否相同),从如果数据有更新,能够形成的过渡动画。
但是注意,这会有性能开销。如果数据量较大,不要开启这个功能。
\n" }, "renderItem.return_group.children": { "desc": "子节点列表,其中项都是一个图形元素定义。
\n" }, "renderItem.return_path": { "desc": "可使用 SVG PathData 做路径。\n可以用来画图标,或者其他各种图形,因为可以很便捷得缩放以适应给定尺寸。
\n\n关于制定尺寸、拉伸还是平铺,参见 layout。
\n" }, "renderItem.return_path.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_path.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_path.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_path.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_path.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_path.name": { "desc": "\n" }, "renderItem.return_path.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_path.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_path.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_path.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_path.shape.pathData": { "desc": "即 SVG PathData。
\n例如:'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z'
。
如果指定了 width、height、x、y,则会根据他们定义的矩形,缩放 PathData。如果没有指定这些,就不会缩放。
\n可使用 layout 指定缩放策略。
\n\n" }, "renderItem.return_path.shape.d": { "desc": "同 pathData,别名。
\n" }, "renderItem.return_path.shape.layout": { "desc": "如果指定了 width、height、x、y,则会根据他们定义的矩形,缩放 PathData。
\nlayout
用于指定缩放策略。
可选值:
\n'center'
:保持原来的 PathData 的长宽比,居于矩形中,尽可能撑大但不会超出矩形。'cover'
:PathData 拉伸为矩形的长宽比,完全填满矩形,不会超出矩形。图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_path.shape.y": { "desc": "图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_path.shape.width": { "desc": "图形元素的宽度。
\n" }, "renderItem.return_path.shape.height": { "desc": "图形元素的高度。
\n" }, "renderItem.return_path.shape.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_path.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_path.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_path.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_path.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_path.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_path.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_path.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_path.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_path.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_path.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_path.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_path.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_path.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_image.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_image.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_image.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_image.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_image.name": { "desc": "\n" }, "renderItem.return_image.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_image.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_image.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_image.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_image.style.image": { "desc": "图片的内容,可以是图片的 URL,也可以是 dataURI.
\n" }, "renderItem.return_image.style.x": { "desc": "图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_image.style.y": { "desc": "图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_image.style.width": { "desc": "图形元素的宽度。
\n" }, "renderItem.return_image.style.height": { "desc": "图形元素的高度。
\n注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_image.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_image.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_image.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_image.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_image.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_image.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_image.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_image.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_image.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_image.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_image.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_image.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_text": { "desc": "文本块。
\n" }, "renderItem.return_text.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_text.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_text.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_text.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_text.name": { "desc": "\n" }, "renderItem.return_text.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_text.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_text.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_text.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_text.style.text": { "desc": "文本块文字。可以使用 \\n
来换行。
图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_text.style.y": { "desc": "图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_text.style.font": { "desc": "字体大小、字体类型、粗细、字体样式。格式参见 css font。
\n例如:
\n// size | family\nfont: '2em "STHeiti", sans-serif'\n\n// style | weight | size | family\nfont: 'italic bolder 16px cursive'\n\n// weight | size | family\nfont: 'bolder 2em "Microsoft YaHei", sans-serif'\n
"
},
"renderItem.return_text.style.textAlign": {
"desc": "水平对齐方式,取值:'left'
, 'center'
, 'right'
。
如果为 'left'
,表示文本最左端在 x
值上。如果为 'right'
,表示文本最右端在 x
值上。
垂直对齐方式,取值:'top'
, 'middle'
, 'bottom'
。
注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_text.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_text.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_text.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_text.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_text.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_text.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_text.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_text.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_text.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_text.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_text.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_text.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_rect": { "desc": "矩形。
\n" }, "renderItem.return_rect.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_rect.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_rect.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_rect.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_rect.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_rect.name": { "desc": "\n" }, "renderItem.return_rect.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_rect.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_rect.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_rect.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_rect.shape.x": { "desc": "图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_rect.shape.y": { "desc": "图形元素的左上角在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_rect.shape.width": { "desc": "图形元素的宽度。
\n" }, "renderItem.return_rect.shape.height": { "desc": "图形元素的高度。
\n" }, "renderItem.return_rect.shape.r": { "desc": "可以用于设置圆角矩形。r: [r1, r2, r3, r4]
,\n左上、右上、右下、左下角的半径依次为r1、r2、r3、r4。
可以缩写,例如:
\nr
缩写为 1
相当于 [1, 1, 1, 1]
r
缩写为 [1]
相当于 [1, 1, 1, 1]
r
缩写为 [1, 2]
相当于 [1, 2, 1, 2]
r
缩写为 [1, 2, 3]1 相当于
[1, 2, 3, 2]`可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_rect.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_rect.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_rect.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_rect.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_rect.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_rect.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_rect.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_rect.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_rect.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_rect.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_rect.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_rect.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_rect.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_circle": { "desc": "圆。
\n" }, "renderItem.return_circle.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_circle.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_circle.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_circle.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_circle.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_circle.name": { "desc": "\n" }, "renderItem.return_circle.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_circle.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_circle.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_circle.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_circle.shape.cx": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_circle.shape.cy": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_circle.shape.r": { "desc": "外半径。
\n" }, "renderItem.return_circle.shape.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_circle.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_circle.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_circle.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_circle.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_circle.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_circle.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_circle.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_circle.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_circle.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_circle.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_circle.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_circle.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_circle.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_ring": { "desc": "圆环。
\n" }, "renderItem.return_ring.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_ring.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_ring.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_ring.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_ring.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_ring.name": { "desc": "\n" }, "renderItem.return_ring.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_ring.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_ring.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_ring.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_ring.shape.cx": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_ring.shape.cy": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_ring.shape.r": { "desc": "外半径。
\n" }, "renderItem.return_ring.shape.r0": { "desc": "内半径。
\n" }, "renderItem.return_ring.shape.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_ring.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_ring.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_ring.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_ring.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_ring.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_ring.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_ring.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_ring.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_ring.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_ring.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_ring.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_ring.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_ring.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_sector": { "desc": "扇形。
\n" }, "renderItem.return_sector.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_sector.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_sector.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_sector.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_sector.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_sector.name": { "desc": "\n" }, "renderItem.return_sector.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_sector.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_sector.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_sector.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_sector.shape.cx": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_sector.shape.cy": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_sector.shape.r": { "desc": "外半径。
\n" }, "renderItem.return_sector.shape.r0": { "desc": "内半径。
\n" }, "renderItem.return_sector.shape.startAngle": { "desc": "开始弧度。
\n" }, "renderItem.return_sector.shape.endAngle": { "desc": "结束弧度。
\n" }, "renderItem.return_sector.shape.clockwise": { "desc": "是否顺时针。
\n" }, "renderItem.return_sector.shape.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_sector.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_sector.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_sector.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_sector.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_sector.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_sector.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_sector.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_sector.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_sector.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_sector.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_sector.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_sector.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_sector.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_arc": { "desc": "圆弧。
\n" }, "renderItem.return_arc.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_arc.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_arc.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_arc.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_arc.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_arc.name": { "desc": "\n" }, "renderItem.return_arc.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_arc.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_arc.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_arc.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_arc.shape.cx": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的横坐标值。
\n" }, "renderItem.return_arc.shape.cy": { "desc": "图形元素的中心在父节点坐标系(以父节点左上角为原点)中的纵坐标值。
\n" }, "renderItem.return_arc.shape.r": { "desc": "外半径。
\n" }, "renderItem.return_arc.shape.r0": { "desc": "内半径。
\n" }, "renderItem.return_arc.shape.startAngle": { "desc": "开始弧度。
\n" }, "renderItem.return_arc.shape.endAngle": { "desc": "结束弧度。
\n" }, "renderItem.return_arc.shape.clockwise": { "desc": "是否顺时针。
\n" }, "renderItem.return_arc.shape.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_arc.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_arc.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_arc.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_arc.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_arc.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_arc.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_arc.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_arc.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_arc.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_arc.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_arc.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_arc.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_arc.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_polygon": { "desc": "多边形。
\n" }, "renderItem.return_polygon.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_polygon.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_polygon.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_polygon.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_polygon.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_polygon.name": { "desc": "\n" }, "renderItem.return_polygon.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_polygon.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_polygon.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_polygon.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_polygon.shape.points": { "desc": "点列表,用于定义形状,如 [[22, 44], [44, 55], [11, 44], ...]
是否平滑曲线。
\n[0, 1]
。'spline'
:表示 Catmull-Rom spline 差值平滑。是否将平滑曲线约束在包围盒中。smooth
为 number
(bezier)时生效。
可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_polygon.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_polygon.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_polygon.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_polygon.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_polygon.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_polygon.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_polygon.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_polygon.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_polygon.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_polygon.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_polygon.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_polygon.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_polygon.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_polyline": { "desc": "折线。
\n" }, "renderItem.return_polyline.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_polyline.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_polyline.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_polyline.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_polyline.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_polyline.name": { "desc": "\n" }, "renderItem.return_polyline.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_polyline.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_polyline.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_polyline.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_polyline.shape.points": { "desc": "点列表,用于定义形状,如 [[22, 44], [44, 55], [11, 44], ...]
是否平滑曲线。
\n[0, 1]
。'spline'
:表示 Catmull-Rom spline 差值平滑。是否将平滑曲线约束在包围盒中。smooth
为 number
(bezier)时生效。
可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_polyline.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_polyline.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_polyline.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_polyline.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_polyline.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_polyline.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_polyline.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_polyline.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_polyline.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_polyline.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_polyline.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_polyline.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_polyline.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_line": { "desc": "直线。
\n" }, "renderItem.return_line.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_line.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_line.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_line.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_line.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_line.name": { "desc": "\n" }, "renderItem.return_line.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_line.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_line.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_line.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_line.shape.x1": { "desc": "开始点的 x 值。
\n" }, "renderItem.return_line.shape.y1": { "desc": "开始点的 y 值。
\n" }, "renderItem.return_line.shape.x2": { "desc": "结束点的 x 值。
\n" }, "renderItem.return_line.shape.y2": { "desc": "结束点的 y 值。
\n" }, "renderItem.return_line.shape.percent": { "desc": "线画到百分之多少就不画了。值的范围:[0, 1]。
\n" }, "renderItem.return_line.shape.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_line.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_line.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_line.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_line.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_line.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_line.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_line.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_line.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_line.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_line.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_line.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_line.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_line.select.style": { "desc": "结构同 style。
\n" }, "renderItem.return_bezierCurve": { "desc": "二次或三次贝塞尔曲线。
\n" }, "renderItem.return_bezierCurve.type": { "desc": "用 setOption 首次设定图形元素时必须指定。\n可取值:
\nimage,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,
\n" }, "renderItem.return_bezierCurve.id": { "desc": "id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
\n" }, "renderItem.return_bezierCurve.x": { "desc": "图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。图形元素可以进行标准的 2D transform
,其中包含:
0
。右和下为正值。0
。表示旋转的弧度值。正值表示逆时针旋转。1
。这个值表示缩放的倍数。另外,originX 和 originY 指定了旋转和缩放的中心点,默认值都是 0
。
注意:
\n[0, 0]
点。也就是说,我们可以使用 group 来组织多个图形元素,并且 group 可以嵌套。transform
执行的顺序是:先缩放(依照 scaleX
,scaleY
),再旋转(依照 rotation
),再平移(依照 x
,y
)。可以指定一个属性名,或者一组属性名。被指定的属性值变化时,会开启过渡动画。
\n属性只可以是:
\n'x'
, 'y'
、'scaleX'
、'scaleY'
、'rotation'
、'originX'
、'originY'
。例如: renderItem: function (params, api) {\n var coord = api.coord([api.value(0), api.value[1]);\n return {\n type: 'rect',\n x: coord[0],\n y: coord[1],\n shape: {\n x: 0,\n y: 0,\n width: api.value(2),\n height: 100\n },\n transition: ['x', 'y', 'width']\n }\n }\n
\n'shape'
、'style'
、'extra'
。表示这三个属性中所有的子属性都开启过渡动画。例如: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3)\n },\n // 表示 shape 中所有属性都开启过渡动画。\n transition: 'shape',\n };\n }\n
\n 这等价于: renderItem: function (params, api) {\n return {\n type: 'rect',\n shape: {\n x: api.value(0),\n y: api.value(1),\n width: api.value(2),\n height: api.value(3),\n // transition 放在 shape 中,能只指定部分属性开启过渡动画。\n transition: ['x', 'y', 'width', 'height']\n }\n };\n }\n
\n当 transition 没有指定时,'x'
和 'y'
会默认开启过渡动画。如果想禁用这种默认,可设定:
transition: [] // 一个空数组\n
\n看这个 例子。
\n" }, "renderItem.return_bezierCurve.morph": { "desc": "是否开启形变动画。
\n什么情况下会展示出形变动画?
\nmorph
设置为 true
后,还需按照如下规则,来形成形变动画:
每次走渲染流程是,自定义系列会自动比较(diff)新旧数据。在这个 diff 过程中,如果发现,一组旧数据项和一组新数据项的值相等(相等的规则是,name 相同,或者 transition 所指定的维度上的值相同),那么我们就找到了能形成形变动画的一对候选集。
\n在这组旧数据和这组新数据间,可能产生三种形变动画:
\n注:我们并不支持多对多(many-to-many)的情况。
\n然后,自定义系列,会在新旧组中,寻找声明为 morph: true
的图形元素,并分配他们形成真正的一一映射的形变,或者分裂(separating),或者合并(combining)。
参见示例:custom-one-to-one-morph 和\ncustom-combine-separate-morph。
\n" }, "renderItem.return_bezierCurve.z2": { "desc": "用于决定图形元素的覆盖关系。
\n" }, "renderItem.return_bezierCurve.name": { "desc": "\n" }, "renderItem.return_bezierCurve.info": { "desc": "用户定义的任意数据,可以在 event listener 中访问,如:
\nchart.on('click', function (params) {\n console.log(params.info);\n});\n
\n"
},
"renderItem.return_bezierCurve.silent": {
"desc": "是否不响应鼠标以及触摸事件。
\n" }, "renderItem.return_bezierCurve.invisible": { "desc": "节点是否可见。
\n" }, "renderItem.return_bezierCurve.ignore": { "desc": "节点是否完全被忽略(既不渲染,也不响应事件)。
\n" }, "renderItem.return_bezierCurve.shape.x1": { "desc": "开始点的 x 值。
\n" }, "renderItem.return_bezierCurve.shape.y1": { "desc": "开始点的 y 值。
\n" }, "renderItem.return_bezierCurve.shape.x2": { "desc": "结束点的 x 值。
\n" }, "renderItem.return_bezierCurve.shape.y2": { "desc": "结束点的 y 值。
\n" }, "renderItem.return_bezierCurve.shape.cpx1": { "desc": "控制点 x 值。
\n" }, "renderItem.return_bezierCurve.shape.cpy1": { "desc": "控制点 y 值。
\n" }, "renderItem.return_bezierCurve.shape.cpx2": { "desc": "第二个控制点 x 值。如果设置则开启三阶贝塞尔曲线。
\n" }, "renderItem.return_bezierCurve.shape.cpy2": { "desc": "第二个控制点 y 值。如果设置则开启三阶贝塞尔曲线。
\n" }, "renderItem.return_bezierCurve.shape.percent": { "desc": "画到百分之多少就不画了。值的范围:[0, 1]。
\n" }, "renderItem.return_bezierCurve.shape.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 shape
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 shape
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n shape: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `shape` 下所有属性开启过渡动画。\n transition: 'shape',\n };\n}\n
\n"
},
"renderItem.return_bezierCurve.style": {
"desc": "注:关于图形元素中更多的样式设置(例如 富文本标签),参见 zrender/graphic/Displayable 中的 style 相关属性。
\n注意,这里图形元素的样式属性名称直接源于 zrender,和 echarts label
、echarts itemStyle
等处同样含义的样式属性名称或有不同。例如,有如下对应:
style.fill
style.stroke
style.textFill
style.textStroke
填充色。
\n" }, "renderItem.return_bezierCurve.style.stroke": { "desc": "笔画颜色。
\n" }, "renderItem.return_bezierCurve.style.lineWidth": { "desc": "笔画宽度。
\n" }, "renderItem.return_bezierCurve.style.shadowBlur": { "desc": "阴影宽度。
\n" }, "renderItem.return_bezierCurve.style.shadowOffsetX": { "desc": "阴影 X 方向偏移。
\n" }, "renderItem.return_bezierCurve.style.shadowOffsetY": { "desc": "阴影 Y 方向偏移。
\n" }, "renderItem.return_bezierCurve.style.shadowColor": { "desc": "阴影颜色。
\n" }, "renderItem.return_bezierCurve.style.transition": { "desc": "可以是一个属性名,或者一组属性名。\n被指定的属性,在其指发生变化时,会开启过渡动画。\n只可以指定本 style
下的属性。
例如:
\nrenderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n // 这两个属性会开启过渡动画。\n transition: ['mmm', 'ppp']\n }\n };\n}\n
\n我们这样可以指定 style
下所有属性开启过渡动画:
renderItem: function (params, api) {\n return {\n type: 'xxx',\n style: {\n mmm: ...,\n nnn: ...,\n ppp: ...,\n qqq: ...,\n },\n // `style` 下所有属性开启过渡动画。\n transition: 'style',\n };\n}\n
\n"
},
"renderItem.return_bezierCurve.emphasis": {
"desc": "图形元素的高亮状态
\n" }, "renderItem.return_bezierCurve.emphasis.focus": { "desc": "\n\n从
\nv5.0.0
开始支持
在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:
\n'none'
不淡出其它图形,默认使用该配置。'self'
只聚焦(不淡出)当前高亮的数据的图形。'series'
聚焦当前高亮的数据所在的系列的所有图形。\n\n从
\nv5.0.0
开始支持
在开启focus
的时候,可以通过blurScope
配置淡出的范围。支持如下配置
'coordinateSystem'
淡出范围为坐标系,默认使用该配置。'series'
淡出范围为系列。'global'
淡出范围为全局。结构同 style。
\n" }, "renderItem.return_bezierCurve.blur": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的淡出状态,配置focus
时有效。
结构同 style。
\n" }, "renderItem.return_bezierCurve.select": { "desc": "\n\n从
\nv5.0.0
开始支持
图形元素的选中状态,配置自定义系列的 selectedMode 时有效。
\n" }, "renderItem.return_bezierCurve.select.style": { "desc": "结构同 style。
\n" }, "itemStyle": { "desc": "图形样式。
\n" }, "itemStyle.color": { "desc": "\n\n图形的颜色。 默认从全局调色盘 option.color 获取颜色
\n\n\n", "uiControl": { "type": "color" } }, "itemStyle.borderColor": { "desc": "\n\n颜色可以使用 RGB 表示,比如
\n'rgb(128, 128, 128)'
,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如'rgba(128, 128, 128, 0.5)'
,也可以使用十六进制格式,比如'#ccc'
。除了纯色之外颜色也支持渐变色和纹理填充\n// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
图形的描边颜色。支持的颜色格式同 color
,不支持回调函数。
描边线宽。为 0 时无描边。
\n", "uiControl": { "type": "number", "value": "0", "min": "0", "step": "0.5" } }, "itemStyle.borderType": { "desc": "\n\n柱条的描边类型,默认为实线,支持 'solid'
, 'dashed'
, 'dotted'
。
图形阴影的模糊大小。该属性配合 shadowColor
,shadowOffsetX
, shadowOffsetY
一起设置图形的阴影效果。
示例:
\n{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n
\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"itemStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
阴影水平方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "itemStyle.shadowOffsetY": { "desc": "\n\n阴影垂直方向上的偏移距离。
\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "itemStyle.opacity": { "desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "itemStyle.decal(Object | 'none')": { "desc": "图形的贴花图案,在 aria.enabled 与 aria.decal.show 都是 true
的情况下才生效。
如果为 'none'
表示不使用贴花图案。
贴花的图案,如果是 string[]
表示循环使用数组中的图案。
ECharts 提供的标记类型包括
\n'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none'
可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
URL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
\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
"
},
"itemStyle.decal(Object | 'none').symbolSize": {
"desc": "取值范围:0
到 1
,表示占图案区域的百分比。
是否保持图案的长宽比。
\n" }, "itemStyle.decal(Object | 'none').color": { "desc": "贴花图案的颜色,建议使用半透明色,这样能叠加在系列本身的颜色上。
\n" }, "itemStyle.decal(Object | 'none').backgroundColor": { "desc": "贴花的背景色,将会覆盖在系列本身颜色之上,贴花图案之下。
\n" }, "itemStyle.decal(Object | 'none').dashArrayX(number | number[] | (number | number[])[]) = 5": { "desc": "贴花图案的基本模式是在横向和纵向上分别以图案 - 空白 - 图案 - 空白 - 图案 - 空白
的形式无限循环。通过设置每个图案和空白的长度,可以实现复杂的图案效果。
dashArrayX
控制了横向的图案模式。当其值为 number
或 number[]
类型时,与 SVG stroke-dasharray 类似。
如果是 number
类型,表示图案和空白分别是这个值。如 5
表示先显示宽度为 5 的图案,然后空 5 像素,再然后显示宽度为 5 的图案……
如果是 number[]
类型,则表示图案和空白依次为数组值的循环。如:[5, 10, 2, 6]
表示图案宽 5 像素,然后空 10 像素,然后图案宽 2 像素,然后空 6 像素,然后图案宽 5 像素……
如果是 (number | number[])[]
类型,表示每行的图案和空白依次为数组值的循环。如:[10, [2, 5]]
表示第一行以图案 10 像素空 10 像素循环,第二行以图案 2 像素空 5 像素循环,第三行以图案 10 像素空 10 像素循环……
可以结合以下的例子理解本接口:
\n