mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-14 17:01:14 +08:00
414 lines
29 KiB
JSON
414 lines
29 KiB
JSON
|
{
|
|||
|
|
"id": {
|
|||
|
|
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
|||
|
|
},
|
|||
|
|
"show": {
|
|||
|
|
"desc": "\n\n<p>默认不显示。但是如果 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code class=\"codespan\">'axis'</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code class=\"codespan\">'cross'</code>，则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer，也可以使用 <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> 改变这种选择。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "boolean"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"type": {
|
|||
|
|
"desc": "\n\n<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code class=\"codespan\">'line'</code> 直线指示器</p>\n</li>\n<li><p><code class=\"codespan\">'shadow'</code> 阴影指示器</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code> 无指示器</p>\n</li>\n</ul>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"options": "line,shadow,none"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"snap": {
|
|||
|
|
"desc": "<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。</p>\n"
|
|||
|
|
},
|
|||
|
|
"z": {
|
|||
|
|
"desc": "<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label": {
|
|||
|
|
"desc": "<p>坐标轴指示器的文本标签。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.show": {
|
|||
|
|
"desc": "<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code class=\"codespan\">'cross'</code> 则默认显示标签，否则默认不显示。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.precision": {
|
|||
|
|
"desc": "<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code class=\"codespan\">2</code> 表示保留两位小数。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.formatter": {
|
|||
|
|
"desc": "<p>文本标签文字的格式化器。</p>\n<p>如果为 <code class=\"codespan\">string</code>，可以是例如：<code class=\"codespan\">formatter: 'some text {value} some text</code>，其中 <code class=\"codespan\">{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code class=\"codespan\">function</code>，可以是例如：</p>\n<p><strong>参数：</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: 含有：</p>\n<p><code class=\"codespan\">{Object}</code> params.value: 轴当前值，如果 axis.type 为 'category' 时，其值为 axis.data 里的数值。如果 axis.type 为 <code class=\"codespan\">'time'</code>，其值为时间戳。</p>\n<p><code class=\"codespan\">{Array.<Object>}</code> params.seriesData: 一个数组，是当前 axisPointer 最近的点的信息，每项内容为</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: 轴的维度名，例如直角坐标系中是 <code class=\"codespan\">'x'</code>、<code class=\"codespan\">'y'</code>，极坐标系中是 <code class=\"codespan\">'radius'</code>、<code class=\"codespan\">'angle'</code>。</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: 轴的 index，<code class=\"codespan\">0</code>、<code class=\"codespan\">1</code>、<code class=\"codespan\">2</code>、...</p>\n<pre><code class=\"lang-js\">{\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</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">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</code></pre>\n<p>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">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</code></pre>\n<p>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>每项内容还包括轴的信息：</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y
|
|||
|
|
},
|
|||
|
|
"label.margin": {
|
|||
|
|
"desc": "<p>label 距离轴的距离。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.color": {
|
|||
|
|
"desc": "\n\n<p>文字的颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "'#fff'"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.fontStyle": {
|
|||
|
|
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"default": "normal",
|
|||
|
|
"options": "normal,italic,oblique"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.fontWeight": {
|
|||
|
|
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"default": "normal",
|
|||
|
|
"options": "normal,bold,bolder,lighter"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.fontFamily": {
|
|||
|
|
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"default": "sans-serif",
|
|||
|
|
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.fontSize": {
|
|||
|
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "12",
|
|||
|
|
"min": "1",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.lineHeight": {
|
|||
|
|
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "1",
|
|||
|
|
"default": "12"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.width": {
|
|||
|
|
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.height": {
|
|||
|
|
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.textBorderColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textBorderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#000"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.padding": {
|
|||
|
|
"desc": "\n\n<p>axisPointer内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>\n<p>使用示例：</p>\n<pre><code class=\"lang-js\">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "vector",
|
|||
|
|
"min": "0",
|
|||
|
|
"dims": "T,R,B,L"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.backgroundColor": {
|
|||
|
|
"desc": "<p>文本标签的背景颜色，默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.borderColor": {
|
|||
|
|
"desc": "<p>文本标签的边框颜色。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.borderWidth": {
|
|||
|
|
"desc": "<p>文本标签的边框宽度。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "3",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#aaa"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle": {
|
|||
|
|
"desc": "<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code class=\"codespan\">'line'</code> 时有效。</p>\n"
|
|||
|
|
},
|
|||
|
|
"lineStyle.color": {
|
|||
|
|
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 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</code></pre>\n</blockquote>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle.width": {
|
|||
|
|
"desc": "\n\n<p>线宽。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"value": "1",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle.type": {
|
|||
|
|
"desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"default": "solid",
|
|||
|
|
"options": "solid,dashed,dotted"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"lineStyle.opacity": {
|
|||
|
|
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "1",
|
|||
|
|
"min": "0",
|
|||
|
|
"max": "1",
|
|||
|
|
"step": "0.01"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"shadowStyle": {
|
|||
|
|
"desc": "<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code class=\"codespan\">'shadow'</code> 时有效。</p>\n"
|
|||
|
|
},
|
|||
|
|
"shadowStyle.color": {
|
|||
|
|
"desc": "\n\n<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 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</code></pre>\n</blockquote>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"shadowStyle.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"shadowStyle.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"shadowStyle.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"shadowStyle.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"shadowStyle.opacity": {
|
|||
|
|
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "1",
|
|||
|
|
"min": "0",
|
|||
|
|
"max": "1",
|
|||
|
|
"step": "0.01"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"triggerTooltip": {
|
|||
|
|
"desc": "\n\n<p>是否触发 tooltip。如果不想触发 tooltip 可以关掉。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "boolean",
|
|||
|
|
"default": "true"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"value": {
|
|||
|
|
"desc": "<p>当前的 value。在使用 <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a> 时，可以设置此值进行初始值设定，从而决定 axisPointer 的初始位置。</p>\n"
|
|||
|
|
},
|
|||
|
|
"status": {
|
|||
|
|
"desc": "\n\n<p>当前的状态，可取值为 <code class=\"codespan\">'show'</code> 和 <code class=\"codespan\">'hide'</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"options": "show,hide"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle": {
|
|||
|
|
"desc": "<p>拖拽手柄，适用于触屏的环境。参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"
|
|||
|
|
},
|
|||
|
|
"handle.show": {
|
|||
|
|
"desc": "\n\n<p>当 show 设为 <code class=\"codespan\">true</code> 时开启，这时显示手柄，并且 axisPointer 会一直显示。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "boolean"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.icon": {
|
|||
|
|
"desc": "\n\n<p>手柄的图标。</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片，其中 URL 为图片的链接，或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如：</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如：</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如：</p>\n<pre><code>'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</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">使用图片的例子</a></p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "icon",
|
|||
|
|
"clean": "true"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.size": {
|
|||
|
|
"desc": "\n\n<p>手柄的尺寸，可以设置单值，如 <code class=\"codespan\">45</code>，也可以设置为数组：<code class=\"codespan\">[width, height]</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "vector",
|
|||
|
|
"default": "45,45",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5",
|
|||
|
|
"dims": "width,height"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.margin": {
|
|||
|
|
"desc": "\n\n<p>手柄与轴的距离。注意，这是手柄中心点和轴的距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "50",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.color": {
|
|||
|
|
"desc": "\n\n<p>手柄颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.throttle": {
|
|||
|
|
"desc": "\n\n<p>手柄拖拽时触发视图更新周期，单位毫秒，调大这个数值可以改善性能，但是降低体验。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "40",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "10"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "3",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#aaa"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "2",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"handle.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"link": {
|
|||
|
|
"desc": "<p>不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。</p>\n<p>联动的效果可以看这两个例子：<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">例子A</a>，<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">例子B</a>。</p>\n<p>link 是一个数组，其中每一项表示一个 link group，一个 group 中的坐标轴互相联动。例如：</p>\n<pre><code class=\"lang-js\">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</code></pre>\n<p>如上所示，每个 link group 中可以用这些方式引用坐标轴：</p>\n<pre><code class=\"lang-js\">{\n // 以下的 'some' 均表示轴的维度，也就是表示 'x', 'y', 'radius', 'angle', 'single'\n someAxisIndex: [...], // 可以是一个数组或单值或 'all'\n someAxisName: [...], // 可以是一个数组或单值或 'all'\n someAxisId: [...], // 可以是一个数组或单值或 'all'\n}\n</code></pre>\n<hr>\n<p><strong>如何联动不同类型（<a href=\"#xAxis.type\">axis.type</a>）的轴？</strong></p>\n<p>如果 axis 的类型不同，比如 axisA type 为 'category'，axisB type 为 'time'，可以在每个 link group 中写转换函数（mapper）来进行值的转换，例如：</p>\n<pre><code class=\"lang-js\">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</code></pre>\n<p>mapper 的输入参数：</p>\n<p><code class=\"codespan\">{number}</code> sourceVal</p>\n<p><code class=\"codespan\">{Object}</code> sourceAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p><code class=\"codespan\">{Object}</code> targetAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p>mapper 的返回值：</p>\n<p><code class=\"codespan\">{number}</code> 转换结果</p>\n"
|
|||
|
|
},
|
|||
|
|
"triggerOn": {
|
|||
|
|
"desc": "\n\n<p>提示框触发的条件，可选：</p>\n<ul>\n<li><p><code class=\"codespan\">'mousemove'</code></p>\n<p> 鼠标移动时触发。</p>\n</li>\n<li><p><code class=\"codespan\">'click'</code></p>\n<p> 鼠标点击时触发。</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code></p>\n<p> 不在 <code class=\"codespan\">'mousemove'</code> 或 <code class=\"codespan\">'click'</code> 时触发。</p>\n</li>\n</ul>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"options": "mousemove,click,none"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|