{ "id": { "desc": "

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

\n" }, "show": { "desc": "\n\n

默认不显示。但是如果 tooltip.trigger 设置为 'axis' 或者 tooltip.axisPointer.type 设置为 'cross'，则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。

\n", "uiControl": { "type": "boolean" } }, "type": { "desc": "\n\n

指示器类型。

\n

可选

\n\n", "uiControl": { "type": "enum", "options": "line,shadow,none" } }, "snap": { "desc": "

坐标轴指示器是否自动吸附到点上。默认自动判断。

\n

这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。

\n" }, "z": { "desc": "

坐标轴指示器的 z 值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

\n" }, "label": { "desc": "

坐标轴指示器的文本标签。

\n" }, "label.show": { "desc": "

是否显示文本标签。如果 tooltip.axisPointer.type 设置为 'cross' 则默认显示标签，否则默认不显示。

\n" }, "label.precision": { "desc": "

文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。

\n" }, "label.formatter": { "desc": "

文本标签文字的格式化器。

\n

如果为 string，可以是例如：formatter: 'some text {value} some text，其中 {value} 会被自动替换为轴的值。

\n

如果为 function，可以是例如：

\n

参数：

\n

{Object} params: 含有：

\n

{Object} params.value: 轴当前值，如果 axis.type 为 'category' 时，其值为 axis.data 里的数值。如果 axis.type 为 'time'，其值为时间戳。

\n

{Array.<Object>} params.seriesData: 一个数组，是当前 axisPointer 最近的点的信息，每项内容为

\n

{string} params.axisDimension: 轴的维度名，例如直角坐标系中是 'x'、'y'，极坐标系中是 'radius'、'angle'。

\n

{number} params.axisIndex: 轴的 index，0、1、2、...

\n
{\n    componentType: 'series',\n    // 系列类型\n    seriesType: string,\n    // 系列在传入的 option.series 中的 index\n    seriesIndex: number,\n    // 系列名称\n    seriesName: string,\n    // 数据名，类目名\n    name: string,\n    // 数据在传入的 data 数组中的 index\n    dataIndex: number,\n    // 传入的原始数据项\n    data: Object,\n    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n    value: number|Array|Object,\n    // 坐标轴 encode 映射信息，\n    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n    // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n    // 其内容如：\n    // {\n    //     x: [2] // dimension index 为 2 的数据映射到 x 轴\n    //     y: [0] // dimension index 为 0 的数据映射到 y 轴\n    // }\n    encode: Object,\n    // 维度名列表\n    dimensionNames: Array<String>,\n    // 数据的维度 index，如 0 或 1 或 2 ...\n    // 仅在雷达图中使用。\n    dimensionIndex: number,\n    // 数据图形的颜色\n    color: string,\n\n}\n
\n

注：encode 和 dimensionNames 的使用方式，例如：

\n

如果数据为：

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

则可这样得到 y 轴对应的 value：

\n
params.value[params.encode.y[0]]\n
\n

如果数据为：

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

则可这样得到 y 轴对应的 value：

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

每项内容还包括轴的信息：

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // 当前 axisPointer 对应的 value。\n    axisValueLabel: '文本'\n}\n
\n

返回值：

\n

显示的 string。

\n

例如：

\n
formatter: function (params) {\n    // 假设此轴的 type 为 'time'。\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n" }, "label.margin": { "desc": "

label 距离轴的距离。

\n" }, "label.color": { "desc": "\n\n

文字的颜色。

\n", "uiControl": { "type": "color", "default": "'#fff'" } }, "label.fontStyle": { "desc": "\n\n

文字字体的风格。

\n

可选：

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,italic,oblique" } }, "label.fontWeight": { "desc": "\n\n

文字字体的粗细。

\n

可选：

\n\n", "uiControl": { "type": "enum", "default": "normal", "options": "normal,bold,bolder,lighter" } }, "label.fontFamily": { "desc": "\n\n

文字的字体系列。

\n

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

\n", "uiControl": { "type": "enum", "default": "sans-serif", "options": "sans-serif,serif,monospace,Arial,Courier New" } }, "label.fontSize": { "desc": "\n\n

文字的字体大小。

\n", "uiControl": { "type": "number", "default": "12", "min": "1", "step": "1" } }, "label.lineHeight": { "desc": "\n\n

行高。

\n

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n        }\n    }\n}\n
\n", "uiControl": { "type": "number", "min": "0", "step": "1", "default": "12" } }, "label.width": { "desc": "

文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 backgroundColor）时，可能会使用它。

\n

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

\n

width 也可以是百分比字符串，如 '100%'。表示的是所在文本块的 contentWidth（即不包含文本块的 padding）的百分之多少。之所以以 contentWidth 做基数，因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数，则百分比的计算在实用中不具有意义，可能会超出。

\n

注意，如果不定义 rich 属性，则不能指定 width 和 height。

\n" }, "label.height": { "desc": "

文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 backgroundColor）时，可能会使用它。

\n

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

\n

注意，如果不定义 rich 属性，则不能指定 width 和 height。

\n" }, "label.textBorderColor": { "desc": "\n\n

文字本身的描边颜色。

\n", "uiControl": { "type": "color" } }, "label.textBorderWidth": { "desc": "\n\n

文字本身的描边宽度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.textShadowColor": { "desc": "\n\n

文字本身的阴影颜色。

\n", "uiControl": { "type": "color", "default": "#000" } }, "label.textShadowBlur": { "desc": "\n\n

文字本身的阴影长度。

\n", "uiControl": { "type": "number", "min": "0", "step": "0.5" } }, "label.textShadowOffsetX": { "desc": "\n\n

文字本身的阴影 X 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.textShadowOffsetY": { "desc": "\n\n

文字本身的阴影 Y 偏移。

\n", "uiControl": { "type": "number", "step": "0.5" } }, "label.padding": { "desc": "\n\n

axisPointer内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

\n

使用示例：

\n
// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n    5,  // 上\n    10, // 右\n    5,  // 下\n    10, // 左\n]\n
\n", "uiControl": { "type": "vector", "min": "0", "dims": "T,R,B,L" } }, "label.backgroundColor": { "desc": "

文本标签的背景颜色，默认是和 axis.axisLine.lineStyle.color 相同。

\n" }, "label.borderColor": { "desc": "

文本标签的边框颜色。

\n" }, "label.borderWidth": { "desc": "

文本标签的边框宽度。

\n" }, "label.shadowBlur": { "desc": "\n\n

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

\n

示例：

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n", "uiControl": { "type": "number", "default": "3", "min": "0", "step": "0.5" } }, "label.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color。

\n", "uiControl": { "type": "color", "default": "#aaa" } }, "label.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "label.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "lineStyle": { "desc": "

axisPointer.type 为 'line' 时有效。

\n" }, "lineStyle.color": { "desc": "\n\n

线的颜色。

\n
\n

颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

\n
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n    type: 'linear',\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: 'red' // 0% 处的颜色\n    }, {\n        offset: 1, color: 'blue' // 100% 处的颜色\n    }],\n    global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n    type: 'radial',\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: 'red' // 0% 处的颜色\n    }, {\n        offset: 1, color: 'blue' // 100% 处的颜色\n    }],\n    global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n    repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n", "uiControl": { "type": "color" } }, "lineStyle.width": { "desc": "\n\n

线宽。

\n", "uiControl": { "type": "number", "value": "1", "min": "0", "step": "0.5" } }, "lineStyle.type": { "desc": "\n\n

线的类型。

\n

可选：

\n\n", "uiControl": { "type": "enum", "default": "solid", "options": "solid,dashed,dotted" } }, "lineStyle.shadowBlur": { "desc": "\n\n

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

\n

示例：

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n", "uiControl": { "type": "number", "default": "", "min": "0", "step": "0.5" } }, "lineStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color。

\n", "uiControl": { "type": "color", "default": "" } }, "lineStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "lineStyle.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "lineStyle.opacity": { "desc": "\n\n

图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "shadowStyle": { "desc": "

axisPointer.type 为 'shadow' 时有效。

\n" }, "shadowStyle.color": { "desc": "\n\n

填充的颜色。

\n
\n

颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

\n
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n    type: 'linear',\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: 'red' // 0% 处的颜色\n    }, {\n        offset: 1, color: 'blue' // 100% 处的颜色\n    }],\n    global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n    type: 'radial',\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: 'red' // 0% 处的颜色\n    }, {\n        offset: 1, color: 'blue' // 100% 处的颜色\n    }],\n    global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n    repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
\n
\n", "uiControl": { "type": "color" } }, "shadowStyle.shadowBlur": { "desc": "\n\n

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

\n

示例：

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n", "uiControl": { "type": "number", "default": "", "min": "0", "step": "0.5" } }, "shadowStyle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color。

\n", "uiControl": { "type": "color", "default": "" } }, "shadowStyle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "shadowStyle.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "shadowStyle.opacity": { "desc": "\n\n

图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

\n", "uiControl": { "type": "number", "default": "1", "min": "0", "max": "1", "step": "0.01" } }, "triggerTooltip": { "desc": "\n\n

是否触发 tooltip。如果不想触发 tooltip 可以关掉。

\n", "uiControl": { "type": "boolean", "default": "true" } }, "value": { "desc": "

当前的 value。在使用 axisPointer.handle 时，可以设置此值进行初始值设定，从而决定 axisPointer 的初始位置。

\n" }, "status": { "desc": "\n\n

当前的状态，可取值为 'show' 和 'hide'。

\n", "uiControl": { "type": "enum", "options": "show,hide" } }, "handle": { "desc": "

拖拽手柄，适用于触屏的环境。参见 例子。

\n" }, "handle.show": { "desc": "\n\n

当 show 设为 true 时开启，这时显示手柄，并且 axisPointer 会一直显示。

\n", "uiControl": { "type": "boolean" } }, "handle.icon": { "desc": "\n\n

手柄的图标。

\n

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

\n

URL 为图片链接例如：

\n
'image://http://xxx.xxx.xxx/a/b.png'\n

URL 为 dataURI 例如：

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

\n

例如：

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

参见 使用图片的例子

\n", "uiControl": { "type": "icon", "clean": "true" } }, "handle.size": { "desc": "\n\n

手柄的尺寸，可以设置单值，如 45，也可以设置为数组：[width, height]。

\n", "uiControl": { "type": "vector", "default": "45,45", "min": "0", "step": "0.5", "dims": "width,height" } }, "handle.margin": { "desc": "\n\n

手柄与轴的距离。注意，这是手柄中心点和轴的距离。

\n", "uiControl": { "type": "number", "default": "50", "min": "0", "step": "0.5" } }, "handle.color": { "desc": "\n\n

手柄颜色。

\n", "uiControl": { "type": "color" } }, "handle.throttle": { "desc": "\n\n

手柄拖拽时触发视图更新周期，单位毫秒，调大这个数值可以改善性能，但是降低体验。

\n", "uiControl": { "type": "number", "default": "40", "min": "0", "step": "10" } }, "handle.shadowBlur": { "desc": "\n\n

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

\n

示例：

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n", "uiControl": { "type": "number", "default": "3", "min": "0", "step": "0.5" } }, "handle.shadowColor": { "desc": "\n\n

阴影颜色。支持的格式同color。

\n", "uiControl": { "type": "color", "default": "#aaa" } }, "handle.shadowOffsetX": { "desc": "\n\n

阴影水平方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "2", "step": "0.5" } }, "handle.shadowOffsetY": { "desc": "\n\n

阴影垂直方向上的偏移距离。

\n", "uiControl": { "type": "number", "default": "0", "step": "0.5" } }, "link": { "desc": "

不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。

\n

联动的效果可以看这两个例子：例子A，例子B。

\n

link 是一个数组，其中每一项表示一个 link group，一个 group 中的坐标轴互相联动。例如：

\n
link: [\n    {\n        // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。\n        xAxisIndex: [0, 3, 4],\n        yAxisName: 'someName'\n    },\n    {\n        // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。\n        xAxisId: ['aa', 'cc'],\n        angleAxis: 'all'\n    },\n    ...\n]\n
\n

如上所示，每个 link group 中可以用这些方式引用坐标轴：

\n
{\n    // 以下的 'some' 均表示轴的维度，也就是表示 'x', 'y', 'radius', 'angle', 'single'\n    someAxisIndex: [...], // 可以是一个数组或单值或 'all'\n    someAxisName: [...],  // 可以是一个数组或单值或 'all'\n    someAxisId: [...],    // 可以是一个数组或单值或 'all'\n}\n
\n
\n

如何联动不同类型（axis.type）的轴？

\n

如果 axis 的类型不同，比如 axisA type 为 'category'，axisB type 为 'time'，可以在每个 link group 中写转换函数（mapper）来进行值的转换，例如：

\n
link: [{\n    xAxisIndex: [0, 1],\n    yAxisName: ['yy'],\n    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n        if (sourceAxisInfo.axisName === 'yy') {\n            // from timestamp to '2012-02-05'\n            return echarts.format.formatTime('yyyy-MM-dd', sourceVal);\n        }\n        else if (targetAxisInfo.axisName === 'yy') {\n            // from '2012-02-05' to date\n            return echarts.number.parseDate(dates[sourceVal]);\n        }\n        else {\n            return sourceVal;\n        }\n    }\n}]\n
\n

mapper 的输入参数：

\n

{number} sourceVal

\n

{Object} sourceAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息

\n

{Object} targetAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息

\n

mapper 的返回值：

\n

{number} 转换结果

\n" }, "triggerOn": { "desc": "\n\n

提示框触发的条件，可选：

\n\n", "uiControl": { "type": "enum", "options": "mousemove,click,none" } } }