mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:49:09 +08:00
693 lines
62 KiB
JSON
693 lines
62 KiB
JSON
|
{
|
|||
|
"id": {
|
|||
|
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
|||
|
},
|
|||
|
"show": {
|
|||
|
"desc": "\n\n<p>是否显示直角坐标系网格。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "boolean",
|
|||
|
"default": "false"
|
|||
|
}
|
|||
|
},
|
|||
|
"zlevel": {
|
|||
|
"desc": "<p>所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层,不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n"
|
|||
|
},
|
|||
|
"z": {
|
|||
|
"desc": "<p>组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n"
|
|||
|
},
|
|||
|
"left": {
|
|||
|
"desc": "\n\n<p>grid 组件离容器左侧的距离。</p>\n<p><code class=\"codespan\">left</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比,也可以是 <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>。</p>\n<p>如果 <code class=\"codespan\">left</code> 的值为<code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>,组件会根据相应的位置自动对齐。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "percent",
|
|||
|
"default": "0%"
|
|||
|
}
|
|||
|
},
|
|||
|
"top": {
|
|||
|
"desc": "\n\n<p>grid 组件离容器上侧的距离。</p>\n<p><code class=\"codespan\">top</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比,也可以是 <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>。</p>\n<p>如果 <code class=\"codespan\">top</code> 的值为<code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>,组件会根据相应的位置自动对齐。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "percent",
|
|||
|
"default": "0%"
|
|||
|
}
|
|||
|
},
|
|||
|
"right": {
|
|||
|
"desc": "\n\n<p>grid 组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "percent",
|
|||
|
"default": "0%"
|
|||
|
}
|
|||
|
},
|
|||
|
"bottom": {
|
|||
|
"desc": "\n\n<p>grid 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "percent",
|
|||
|
"default": "0%"
|
|||
|
}
|
|||
|
},
|
|||
|
"width": {
|
|||
|
"desc": "\n\n<p>grid 组件的宽度。默认自适应。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "percent",
|
|||
|
"default": "50%"
|
|||
|
}
|
|||
|
},
|
|||
|
"height": {
|
|||
|
"desc": "\n\n<p>grid 组件的高度。默认自适应。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "percent",
|
|||
|
"default": "50%"
|
|||
|
}
|
|||
|
},
|
|||
|
"containLabel": {
|
|||
|
"desc": "\n\n<p>grid 区域是否包含坐标轴的<a href=\"#yAxis.axisLabel\">刻度标签</a>。</p>\n<ul>\n<li>containLabel 为 <code class=\"codespan\">false</code> 的时候:<ul>\n<li><code class=\"codespan\">grid.left</code> <code class=\"codespan\">grid.right</code> <code class=\"codespan\">grid.top</code> <code class=\"codespan\">grid.bottom</code> <code class=\"codespan\">grid.width</code> <code class=\"codespan\">grid.height</code> 决定的是由坐标轴形成的矩形的尺寸和位置。</li>\n<li>这比较适用于多个 <code class=\"codespan\">grid</code> 进行对齐的场景,因为往往多个 <code class=\"codespan\">grid</code> 对齐的时候,是依据坐标轴来对齐的。</li>\n</ul>\n</li>\n<li>containLabel 为 <code class=\"codespan\">true</code> 的时候:<ul>\n<li><code class=\"codespan\">grid.left</code> <code class=\"codespan\">grid.right</code> <code class=\"codespan\">grid.top</code> <code class=\"codespan\">grid.bottom</code> <code class=\"codespan\">grid.width</code> <code class=\"codespan\">grid.height</code> 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。</li>\n<li>这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。</li>\n</ul>\n</li>\n</ul>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "boolean",
|
|||
|
"default": "false"
|
|||
|
}
|
|||
|
},
|
|||
|
"backgroundColor": {
|
|||
|
"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</blockquote>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color"
|
|||
|
}
|
|||
|
},
|
|||
|
"borderColor": {
|
|||
|
"desc": "\n\n<p>网格的边框颜色。支持的颜色格式同 backgroundColor。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": "#ccc"
|
|||
|
}
|
|||
|
},
|
|||
|
"borderWidth": {
|
|||
|
"desc": "\n\n<p>网格的边框线宽。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "1",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"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<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code> 以及值不为 <code class=\"codespan\">tranparent</code> 的背景色 <code class=\"codespan\">backgroundColor</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"shadowColor": {
|
|||
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": ""
|
|||
|
}
|
|||
|
},
|
|||
|
"shadowOffsetX": {
|
|||
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"shadowOffsetY": {
|
|||
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip": {
|
|||
|
"desc": "<p>本坐标系特定的 tooltip 设定。</p>\n<hr>\n<p><strong>提示框组件的通用介绍:</strong></p>\n<p>提示框组件可以设置在多种地方:</p>\n<ul>\n<li><p>可以设置在全局,即 <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>可以设置在坐标系中,即 <a href=\"#grid.tooltip\">grid.tooltip</a>、<a href=\"#polar.tooltip\">polar.tooltip</a>、<a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>可以设置在系列中,即 <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>可以设置在系列的每个数据项中,即 <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n"
|
|||
|
},
|
|||
|
"tooltip.show": {
|
|||
|
"desc": "\n\n<p>是否显示提示框组件,包括提示框浮层和 <a href=\"#tooltip.axisPointer\">axisPointer</a>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "boolean",
|
|||
|
"default": "true"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.trigger": {
|
|||
|
"desc": "\n\n<p>触发类型。</p>\n<p>可选:</p>\n<ul>\n<li><p><code class=\"codespan\">'item'</code></p>\n<p> 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。</p>\n</li>\n<li><p><code class=\"codespan\">'axis'</code></p>\n<p> 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。</p>\n<p> 在 ECharts 2.x 中只支持类目轴上使用 axis trigger,在 ECharts 3 中支持在<a href=\"#grid\">直角坐标系</a>和<a href=\"#polar\">极坐标系</a>上的所有类型的轴。并且可以通过 <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a> 指定坐标轴。</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code></p>\n<p> 什么都不触发。</p>\n</li>\n</ul>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "enum",
|
|||
|
"default": "item,axis,none"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer": {
|
|||
|
"desc": "<p>坐标轴指示器配置项。</p>\n<p><code class=\"codespan\">tooltip.axisPointer</code> 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能,都可以通过轴上的 axisPointer 配置项完成(例如 <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> 或 <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>)。但是使用 <code class=\"codespan\">tooltip.axisPointer</code> 在简单场景下会更方便一些。</p>\n<blockquote>\n<p><strong>注意:</strong> <code class=\"codespan\">tooltip.axisPointer</code> 中诸配置项的优先级低于轴上的 axisPointer 的配置项。</p>\n</blockquote>\n<hr>\n<p>坐标轴指示器是指示坐标轴当前刻度的工具。</p>\n<p>如下例,鼠标悬浮到图上,可以出现标线和刻度文本。</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\"><iframe />\n\n\n<p>上例中,使用了 <a href=\"#axisPointer.link\">axisPointer.link</a> 来关联不同的坐标系中的 axisPointer。</p>\n<p>坐标轴指示器也有适合触屏的交互方式,如下:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n<p>坐标轴指示器在多轴的场景能起到辅助作用:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\"><iframe />\n\n\n\n\n<hr>\n<blockquote>\n<p><strong>注意:</strong>\n一般来说,axisPointer 的具体配置项会配置在各个轴中(如 <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>)或者 <code class=\"codespan\">tooltip</code> 中(如 <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>)。</p>\n</blockquote>\n<blockquote>\n<p>但是这几个选项只能配置在全局的 axisPointer 中:<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>、<a href=\"#axisPointer.link\">axisPointer.link</a>。</p>\n</blockquote>\n<hr>\n<p><strong>如何显示 axisPointer:</strong></p>\n<p>直角坐标系 <a href=\"#grid\">grid</a>、极坐标系 <a href=\"#polar\">polar</a>、单轴坐标系 <a href=\"#single\">single</a> 中的每个轴都自己的 axisPointer。</p>\n<p>他们的 axisPointer 默认不显示。有两种方法可以让他们显示:</p>\n<ul>\n<li><p>设置轴上的 <code class=\"codespan\">axisPointer.show</code>(例如 <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>)为 <code class=\"codespan\">true</code>,则显示此轴的 axisPointer。</p>\n</li>\n<li><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,也可以使用 <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> 改变这种选择。注意,轴上如果设置了 axisPointer,会覆盖此设置。</p>\n</li>\n</ul>\n<hr>\n<p><strong>如何显示 axisPointer 的 label:</strong></p>\n<p>axisPointer 的 label 默认不显示(也就是默认只显示指示线),除非:</p>\n<ul>\n<li><p>设置轴上的 <code class=\"codespan\">axisPointer.label.show</code>(例如 <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>)为 <code class=\"codespan\">true</code>,则显示此轴的 axisPointer 的 label。</p>\n</li>\n<li><p>设置 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 为 <code class=\"codespan\">'cross'</code> 时会自动显示 axisPointer 的 label。</p>\n</li>\n</ul>\n<hr>\n<p><strong>关于触屏的 axisPointer 的设置
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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<li><p><code class=\"codespan\">'cross'</code> 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。</p>\n</li>\n</ul>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "enum",
|
|||
|
"default": "none,line,shadow,cross"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.axis": {
|
|||
|
"desc": "<p>指示器的坐标轴。</p>\n<p>默认情况,坐标系会自动选择显示哪个轴的 axisPointer(默认取类目轴或者时间轴)。</p>\n<p>可以是 <code class=\"codespan\">'x'</code>, <code class=\"codespan\">'y'</code>, <code class=\"codespan\">'radius'</code>, <code class=\"codespan\">'angle'</code>。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.snap": {
|
|||
|
"desc": "<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.z": {
|
|||
|
"desc": "<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label": {
|
|||
|
"desc": "<p>坐标轴指示器的文本标签。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.show": {
|
|||
|
"desc": "<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code class=\"codespan\">'cross'</code> 则默认显示标签,否则默认不显示。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.precision": {
|
|||
|
"desc": "<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code class=\"codespan\">2</code> 表示保留两位小数。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.margin": {
|
|||
|
"desc": "<p>label 距离轴的距离。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.color": {
|
|||
|
"desc": "\n\n<p>文字的颜色。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": "'#fff'"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.fontSize": {
|
|||
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "12",
|
|||
|
"min": "1",
|
|||
|
"step": "1"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.textBorderColor": {
|
|||
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.textBorderWidth": {
|
|||
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.textShadowColor": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": "#000"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.textShadowBlur": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.textShadowOffsetX": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.textShadowOffsetY": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.backgroundColor": {
|
|||
|
"desc": "<p>文本标签的背景颜色,默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.borderColor": {
|
|||
|
"desc": "<p>文本标签的边框颜色。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.borderWidth": {
|
|||
|
"desc": "<p>文本标签的边框宽度。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.shadowColor": {
|
|||
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": "#aaa"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.shadowOffsetX": {
|
|||
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.label.shadowOffsetY": {
|
|||
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.lineStyle": {
|
|||
|
"desc": "<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code class=\"codespan\">'line'</code> 时有效。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.lineStyle.width": {
|
|||
|
"desc": "\n\n<p>线宽。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"value": "1",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.lineStyle.shadowColor": {
|
|||
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": ""
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.lineStyle.shadowOffsetX": {
|
|||
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.lineStyle.shadowOffsetY": {
|
|||
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.lineStyle.opacity": {
|
|||
|
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "1",
|
|||
|
"min": "0",
|
|||
|
"max": "1",
|
|||
|
"step": "0.01"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.shadowStyle": {
|
|||
|
"desc": "<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code class=\"codespan\">'shadow'</code> 时有效。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.shadowStyle.shadowColor": {
|
|||
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": ""
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.shadowStyle.shadowOffsetX": {
|
|||
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.shadowStyle.shadowOffsetY": {
|
|||
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.shadowStyle.opacity": {
|
|||
|
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "1",
|
|||
|
"min": "0",
|
|||
|
"max": "1",
|
|||
|
"step": "0.01"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle": {
|
|||
|
"desc": "<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code class=\"codespan\">'cross'</code> 时有效。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.width": {
|
|||
|
"desc": "\n\n<p>线宽。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"value": "1",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.shadowColor": {
|
|||
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": ""
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.shadowOffsetX": {
|
|||
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.shadowOffsetY": {
|
|||
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.crossStyle.opacity": {
|
|||
|
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "1",
|
|||
|
"min": "0",
|
|||
|
"max": "1",
|
|||
|
"step": "0.01"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animation": {
|
|||
|
"desc": "\n\n<p>是否开启动画。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "boolean",
|
|||
|
"default": "true",
|
|||
|
"clean": "true"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animationThreshold": {
|
|||
|
"desc": "<p>是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animationDuration": {
|
|||
|
"desc": "\n\n<p>初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"min": "0",
|
|||
|
"default": "1000",
|
|||
|
"step": "20",
|
|||
|
"clean": "true"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animationEasing": {
|
|||
|
"desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "enum",
|
|||
|
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut",
|
|||
|
"clean": "true"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animationDelay": {
|
|||
|
"desc": "<p>初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animationDurationUpdate": {
|
|||
|
"desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"min": "0",
|
|||
|
"default": "1000",
|
|||
|
"step": "20"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animationEasingUpdate": {
|
|||
|
"desc": "\n\n<p>数据更新动画的缓动效果。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "enum",
|
|||
|
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.axisPointer.animationDelayUpdate": {
|
|||
|
"desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
|||
|
},
|
|||
|
"tooltip.position": {
|
|||
|
"desc": "<p>提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。</p>\n<p>可选:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> 通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对位置,相对于容器左侧 10px, 上侧 10 px\n position: [10, 10]\n // 相对位置,放置在容器正中间\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p> 回调函数,格式如下:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>参数:</strong><br>\n point: 鼠标位置,如 [20, 40]。<br>\n params: 同 formatter 的参数相同。<br>\n dom: tooltip 的 dom 对象。<br>\n rect: 只有鼠标在图形上时有效,是一个用<code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, <code class=\"codespan\">height</code>四个属性表达的图形包围盒。<br>\n size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:<code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>。<br></p>\n<p> <strong>返回值:</strong><br>\n 可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相 百分比。<br>\n 也可以是一个对象,如:<code class=\"codespan\">{left: 10, top: 30}</code>,或者 <code class=\"codespan\">{right: '20%', bottom: 40}</code>。<br></p>\n<p> 如下示例:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // 固定在顶部\n return [point[0], '10%'];\n }\n</code></pre>\n<p> 或者:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'inside'</code></p>\n<p> 鼠标所在图形的内部中心位置,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'top'</code></p>\n<p> 鼠标所在图形上侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'left'</code></p>\n<p> 鼠标所在图形左侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code></p>\n<p> 鼠标所在图形右侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'bottom'</code></p>\n<p> 鼠标所在图形底侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n</ul>\n"
|
|||
|
},
|
|||
|
"tooltip.formatter": {
|
|||
|
"desc": "<p>提示框浮层内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p><strong>1, 字符串模板</strong></p>\n<p>模板变量有 <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>,<code class=\"codespan\">{c}</code>,<code class=\"codespan\">{d}</code>,<code class=\"codespan\">{e}</code>,分别表示系列名,数据名,数据值等。\n在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code class=\"codespan\">'axis'</code> 的时候,会有多个系列的数据,此时可以通过 <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, <code class=\"codespan\">{a2}</code> 这种后面加索引的方式表示系列的索引。\n不同图表类型下的 <code class=\"codespan\">{a}</code>,<code class=\"codespan\">{b}</code>,<code class=\"codespan\">{c}</code>,<code class=\"codespan\">{d}</code> 含义不一样。\n其中变量<code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code>在不同图表类型下代表数据含义为:</p>\n<ul>\n<li><p>折线(区域)图、柱状(条形)图、K线图 : <code class=\"codespan\">{a}</code>(系列名称),<code class=\"codespan\">{b}</code>(类目值),<code class=\"codespan\">{c}</code>(数值), <code class=\"codespan\">{d}</code>(无)</p>\n</li>\n<li><p>散点图(气泡)图 : <code class=\"codespan\">{a}</code>(系列名称),<code class=\"codespan\">{b}</code>(数据名称),<code class=\"codespan\">{c}</code>(数值数组), <code class=\"codespan\">{d}</code>(无)</p>\n</li>\n<li><p>地图 : <code class=\"codespan\">{a}</code>(系列名称),<code class=\"codespan\">{b}</code>(区域名称),<code class=\"codespan\">{c}</code>(合并数值), <code class=\"codespan\">{d}</code>(无)</p>\n</li>\n<li><p>饼图、仪表盘、漏斗图: <code class=\"codespan\">{a}</code>(系列名称),<code class=\"codespan\">{b}</code>(数据项名称),<code class=\"codespan\">{c}</code>(数值), <code class=\"codespan\">{d}</code>(百分比)</p>\n</li>\n</ul>\n<p>更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2, 回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>第一个参数 <code class=\"codespan\">params</code> 是 formatter 需要的数据集。格式如下:</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 percent: number,\n\n}\n</code></pre>\n<p>注:encode <20><>
|
|||
|
},
|
|||
|
"tooltip.backgroundColor": {
|
|||
|
"desc": "<p>提示框浮层的背景颜色。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.borderColor": {
|
|||
|
"desc": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<p>提示框浮层的边框颜色。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": "#333"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.borderWidth": {
|
|||
|
"desc": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<p>提示框浮层的边框宽。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.padding": {
|
|||
|
"desc": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<p>提示框浮层内边距,单位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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle": {
|
|||
|
"desc": "<p>提示框浮层的文本样式。</p>\n"
|
|||
|
},
|
|||
|
"tooltip.textStyle.color": {
|
|||
|
"desc": "\n\n<p>文字的颜色。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": "'#fff'"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.fontSize": {
|
|||
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"default": "14",
|
|||
|
"min": "1",
|
|||
|
"step": "1"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.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"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.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"
|
|||
|
},
|
|||
|
"tooltip.textStyle.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"
|
|||
|
},
|
|||
|
"tooltip.textStyle.textBorderColor": {
|
|||
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.textBorderWidth": {
|
|||
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.textShadowColor": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "color",
|
|||
|
"default": "#000"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.textShadowBlur": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"min": "0",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.textShadowOffsetX": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.textStyle.textShadowOffsetY": {
|
|||
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
"uiControl": {
|
|||
|
"type": "number",
|
|||
|
"step": "0.5"
|
|||
|
}
|
|||
|
},
|
|||
|
"tooltip.extraCssText": {
|
|||
|
"desc": "<p>额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"
|
|||
|
}
|
|||
|
}
|