.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"axisPointer": {
"desc": "坐标轴指示器配置项。
\n"
},
"axisPointer.show": {
"desc": "\n\n默认不显示。但是如果 tooltip.trigger 设置为 'axis'
或者 tooltip.axisPointer.type 设置为 'cross'
,则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer,也可以使用 tooltip.axisPointer.axis 改变这种选择。
\n",
"uiControl": {
"type": "boolean"
}
},
"axisPointer.type": {
"desc": "\n\n指示器类型。
\n可选
\n\n'line'
直线指示器
\n \n'shadow'
阴影指示器
\n \n'none'
无指示器
\n \n
\n",
"uiControl": {
"type": "enum",
"options": "line,shadow,none"
}
},
"axisPointer.snap": {
"desc": "坐标轴指示器是否自动吸附到点上。默认自动判断。
\n这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。
\n"
},
"axisPointer.z": {
"desc": "坐标轴指示器的 z 值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
\n"
},
"axisPointer.label": {
"desc": "坐标轴指示器的文本标签。
\n"
},
"axisPointer.label.show": {
"desc": "是否显示文本标签。如果 tooltip.axisPointer.type 设置为 'cross'
则默认显示标签,否则默认不显示。
\n"
},
"axisPointer.label.precision": {
"desc": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2
表示保留两位小数。
\n"
},
"axisPointer.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}\n
\n注:encode 和 dimensionNames 的使用方式,例如:
\n如果数据为:
\ndataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.encode.y[0]]\n
\n如果数据为:
\ndataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n
\n则可这样得到 y 轴对应的 value:
\nparams.value[params.dimensionNames[params.encode.y[0]]]\n
\n每项内容还包括轴的信息:
\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例如:
\nformatter: function (params) {\n // 假设此轴的 type 为 'time'。\n return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n"
},
"axisPointer.label.margin": {
"desc": "label 距离轴的距离。
\n"
},
"axisPointer.label.color": {
"desc": "\n\n文字的颜色。
\n",
"uiControl": {
"type": "color",
"default": "'#fff'"
}
},
"axisPointer.label.fontStyle": {
"desc": "\n\n文字字体的风格。
\n可选:
\n\n'normal'
\n'italic'
\n'oblique'
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"axisPointer.label.fontWeight": {
"desc": "\n\n文字字体的粗细。
\n可选:
\n\n'normal'
\n'bold'
\n'bolder'
\n'lighter'
\n- 100 | 200 | 300 | 400...
\n
\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"axisPointer.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"
}
},
"axisPointer.label.fontSize": {
"desc": "\n\n文字的字体大小。
\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"axisPointer.label.lineHeight": {
"desc": "\n\n行高。
\nrich
中如果没有设置 lineHeight
,则会取父层级的 lineHeight
。例如:
\n{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "1",
"default": "12"
}
},
"axisPointer.label.width": {
"desc": "\n\n文本显示宽度。
\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"axisPointer.label.height": {
"desc": "\n\n文本显示高度。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"axisPointer.label.textBorderColor": {
"desc": "\n\n文字本身的描边颜色。
\n",
"uiControl": {
"type": "color"
}
},
"axisPointer.label.textBorderWidth": {
"desc": "\n\n文字本身的描边宽度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"axisPointer.label.textShadowColor": {
"desc": "\n\n文字本身的阴影颜色。
\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"axisPointer.label.textShadowBlur": {
"desc": "\n\n文字本身的阴影长度。
\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"axisPointer.label.textShadowOffsetX": {
"desc": "\n\n文字本身的阴影 X 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"axisPointer.label.textShadowOffsetY": {
"desc": "\n\n文字本身的阴影 Y 偏移。
\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"axisPointer.label.overflow": {
"desc": "\n\n文字超出宽度是否截断或者换行。配置width
时有效
\n\n'truncate'
截断,并在末尾显示ellipsis
配置的文本,默认为...
\n'break'
换行 \n'breakAll'
换行,跟'break'
不同的是,在英语等拉丁文中,'breakAll'
还会强制单词内换行 \n
\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"axisPointer.label.ellipsis": {
"desc": "在overflow
配置为'truncate'
的时候,可以通过该属性配置末尾显示的文本。
\n"
},
"axisPointer.label.lineOverflow": {
"desc": "文本超出高度部分是否截断,配置height
时有效。
\n\n'truncate'
在文本行数超出高度部分截断。 \n
\n"
},
"axisPointer.label.padding": {
"desc": "\n\naxisPointer内边距,单位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"
}
},
"axisPointer.label.backgroundColor": {
"desc": "文本标签的背景颜色,默认是和 axis.axisLine.lineStyle.color 相同。
\n"
},
"axisPointer.label.borderColor": {
"desc": "文本标签的边框颜色。
\n"
},
"axisPointer.label.borderWidth": {
"desc": "文本标签的边框宽度。
\n"
},
"axisPointer.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"
}
},
"axisPointer.label.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": "#aaa"
}
},
"axisPointer.label.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"axisPointer.label.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"axisPointer.lineStyle": {
"desc": "axisPointer.type 为 'line'
时有效。
\n"
},
"axisPointer.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"
}
},
"axisPointer.lineStyle.width": {
"desc": "\n\n线宽。
\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"axisPointer.lineStyle.type": {
"desc": "\n\n线的类型。
\n可选:
\n\n'solid'
\n'dashed'
\n'dotted'
\n
\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"axisPointer.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"
}
},
"axisPointer.lineStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"axisPointer.lineStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"axisPointer.lineStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"axisPointer.lineStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"axisPointer.shadowStyle": {
"desc": "axisPointer.type 为 'shadow'
时有效。
\n"
},
"axisPointer.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"
}
},
"axisPointer.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"
}
},
"axisPointer.shadowStyle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"axisPointer.shadowStyle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"axisPointer.shadowStyle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"axisPointer.shadowStyle.opacity": {
"desc": "\n\n图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"axisPointer.triggerTooltip": {
"desc": "\n\n是否触发 tooltip。如果不想触发 tooltip 可以关掉。
\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"axisPointer.value": {
"desc": "当前的 value。在使用 axisPointer.handle 时,可以设置此值进行初始值设定,从而决定 axisPointer 的初始位置。
\n"
},
"axisPointer.status": {
"desc": "\n\n当前的状态,可取值为 'show'
和 'hide'
。
\n",
"uiControl": {
"type": "enum",
"options": "show,hide"
}
},
"axisPointer.handle": {
"desc": "拖拽手柄,适用于触屏的环境。参见 例子。
\n"
},
"axisPointer.handle.show": {
"desc": "\n\n当 show 设为 true
时开启,这时显示手柄,并且 axisPointer 会一直显示。
\n",
"uiControl": {
"type": "boolean"
}
},
"axisPointer.handle.icon": {
"desc": "\n\n手柄的图标。
\n可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,或者 dataURI
。
\nURL 为图片链接例如:
\n'image://http://xxx.xxx.xxx/a/b.png'\n
URL 为 dataURI
例如:
\n'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n
可以通过 'path://'
将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
\n例如:
\n'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
参见 使用图片的例子
\n",
"uiControl": {
"type": "icon",
"clean": "true"
}
},
"axisPointer.handle.size": {
"desc": "\n\n手柄的尺寸,可以设置单值,如 45
,也可以设置为数组:[width, height]
。
\n",
"uiControl": {
"type": "vector",
"default": "45,45",
"min": "0",
"step": "0.5",
"dims": "width,height"
}
},
"axisPointer.handle.margin": {
"desc": "\n\n手柄与轴的距离。注意,这是手柄中心点和轴的距离。
\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "0",
"step": "0.5"
}
},
"axisPointer.handle.color": {
"desc": "\n\n手柄颜色。
\n",
"uiControl": {
"type": "color"
}
},
"axisPointer.handle.throttle": {
"desc": "\n\n手柄拖拽时触发视图更新周期,单位毫秒,调大这个数值可以改善性能,但是降低体验。
\n",
"uiControl": {
"type": "number",
"default": "40",
"min": "0",
"step": "10"
}
},
"axisPointer.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"
}
},
"axisPointer.handle.shadowColor": {
"desc": "\n\n阴影颜色。支持的格式同color
。
\n",
"uiControl": {
"type": "color",
"default": "#aaa"
}
},
"axisPointer.handle.shadowOffsetX": {
"desc": "\n\n阴影水平方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "2",
"step": "0.5"
}
},
"axisPointer.handle.shadowOffsetY": {
"desc": "\n\n阴影垂直方向上的偏移距离。
\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"zlevel": {
"desc": "角度轴所有图形的 zlevel 值。
\nzlevel
用于 Canvas 分层,不同zlevel
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel
。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
\nzlevel
大的 Canvas 会放在 zlevel
小的 Canvas 的上面。
\n"
},
"z": {
"desc": "角度轴组件的所有图形的z
值。控制图形的前后顺序。z
值小的图形会被z
值大的图形覆盖。
\nz
相比zlevel
优先级更低,而且不会创建新的 Canvas。
\n"
}
}