mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
16 lines
4.4 MiB
JavaScript
16 lines
4.4 MiB
JavaScript
|
;/*!examples/components/EChartsEditor/Title.tsx*/
|
|||
|
|
amis.define("f669756",(function(e,n,o,c){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var s=e("b666d70");n.default={type:"tabs",tabs:[{title:"内容",className:"echarts-tab",body:[(0,s.createHierarchy)("title",(0,s.buildOptions)("",{id:{desc:"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},show:{desc:"\n\n<p>是否显示标题组件。</p>\n",uiControl:{type:"boolean",default:"true"}},text:{desc:'\n\n<p>主标题文本，支持使用 <code class="codespan">\\n</code> 换行。</p>\n',uiControl:{type:"text"}},link:{desc:"<p>主标题文本超链接。</p>\n"},target:{desc:'<p>指定窗口打开主标题超链接。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p><code class="codespan">'self'</code> 当前窗口打开</p>\n</li>\n<li><p><code class="codespan">'blank'</code> 新窗口打开</p>\n</li>\n</ul>\n'},"textStyle.color":{desc:"\n\n<p>主标题文字的颜色。</p>\n",uiControl:{type:"color",default:"'#333'"}},"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"}},"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"}},"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"}},"textStyle.fontSize":{desc:"\n\n<p>主标题文字的字体大小。</p>\n",uiControl:{type:"number",default:"18",min:"1",step:"1"}},"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"}},"textStyle.width":{desc:"\n\n<p>文本显示宽度。</p>\n",uiControl:{type:"number",default:"100",min:"1",max:"500",step:"1"}},"textStyle.height":{desc:"\n\n<p>文本显示高度。</p>\n",uiControl:{type:"number",default:"50",min:"1",max:"500",step:"1"}},"textStyle.textBorderColor":{desc:"\n\n<p>文字本身的描边颜色。</p>\n",uiControl:{type:"color"}},"textStyle.textBorderWidth":{desc:"\n\n<p>文字本身的描边宽度。</p>\n",uiControl:{type:"number",min:"0",step:"0.5"}},"textStyle.textShadowColor":{desc:"\n\n<p>文字本身的阴影颜色。</p>\n",uiControl:{type:"color",default:"#000"}},"textStyle.textShadowBlur":{desc:"\n\n<p>文字本身的阴影长度。</p>\n",uiControl:{type:"number",min:"0",step:"0.5"}},"textStyle.textShadowOffsetX":{desc:"\n\n<p>文字本身的阴影 X 偏移。</p>\n",uiControl:{type:"number",step:"0.5"}},"textStyle.textShadowOffsetY":{desc:"\n\n<p>文字本身的阴影 Y 偏移。</p>\n",uiControl:{type:"number",step:"0.5"}},"textStyle.overflow":{desc:'\n\n<p>文字超出宽度是否截断或者换行。配置<code class="codespan">width</code>时有效</p>\n<ul>\n<li><code class="codespan">'truncate'</code> 截断，并在末尾显示<code class="codespan">ellipsis</code>配置的文本，默认为<code class="codespan">...</code></li>\n<li><code class="codespan">'break'
|
|||
|
|
;/*!examples/components/EChartsEditor/Legend.tsx*/
|
|||
|
|
amis.define("3d59161",(function(e,n,o,c){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var s=e("b666d70");n.default={type:"tabs",tabs:[{title:"基础",className:"echarts-tab",body:[(0,s.createHierarchy)("legend",(0,s.buildOptions)("",{type:{desc:'\n\n<p>图例的类型。可选值：</p>\n<ul>\n<li><code class="codespan">'plain'</code>：普通图例。缺省就是普通图例。</li>\n<li><code class="codespan">'scroll'</code>：可滚动翻页的图例。当图例数量较多时可以使用。</li>\n</ul>\n<p>参见 <a href="http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1" target="_blank">滚动图例（垂直）</a> 或 <a href="http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1" target="_blank">滚动图例（水平）</a>。</p>\n<p>当使用 <code class="codespan">'scroll'</code> 时，使用这些设置进行细节配置：</p>\n<ul>\n<li><a href="#legend.scrollDataIndex">legend.scrollDataIndex</a></li>\n<li><a href="#legend.pageButtonItemGap">legend.pageButtonItemGap</a></li>\n<li><a href="#legend.pageButtonGap">legend.pageButtonGap</a></li>\n<li><a href="#legend.pageButtonPosition">legend.pageButtonPosition</a></li>\n<li><a href="#legend.pageFormatter">legend.pageFormatter</a></li>\n<li><a href="#legend.pageIcons">legend.pageIcons</a></li>\n<li><a href="#legend.pageIconColor">legend.pageIconColor</a></li>\n<li><a href="#legend.pageIconInactiveColor">legend.pageIconInactiveColor</a></li>\n<li><a href="#legend.pageIconSize">legend.pageIconSize</a></li>\n<li><a href="#legend.pageTextStyle">legend.pageTextStyle</a></li>\n<li><a href="#legend.animation">legend.animation</a></li>\n<li><a href="#legend.animationDurationUpdate">legend.animationDurationUpdate</a></li>\n</ul>\n',uiControl:{type:"enum",options:"plain,scroll"}},id:{desc:"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},show:{desc:"\n\n\n\n\n\n\n\n",uiControl:{type:"boolean",default:"true"}},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>图例组件离容器左侧的距离。</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>图例组件离容器上侧的距离。</p>\n<p><code class="codespan">top</code> 的值可以是像 <code class="codespan">20</code> 这样的具体像素值，可以是像 <code class="codespan">'20%'</code> 这样相对于容器高宽的百分比，也
|
|||
|
|
;/*!examples/components/EChartsEditor/Global.tsx*/
|
|||
|
|
amis.define("513c7dd",(function(e,t,a,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=e("b666d70");t.default={type:"tabs",tabs:[{title:"主题",body:[{type:"input-array",name:"color",label:"调色盘颜色列表",labelRemark:"如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色",value:["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],items:{type:"color"}},(0,l.color)("backgroundColor","背景色")]},{title:"动画",body:[(0,l.animation)(void 0,!1)]},{title:"文字样式",body:[(0,l.textStyleControls)("textStyle","全局文字")]},{title:"其它",body:[(0,l.text)("blendMode","图形的混合模式","不同的混合模式见 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation ","source-over"),(0,l.number)("hoverLayerThreshold","图形数量阈值","决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层。单独的 hover 层主要是为了在高亮图形的时候不需要重绘整个图表，只需要把高亮的图形放入单独的一个 canvas 层进行绘制，防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿",3e3),(0,l.falseSwitch)("useUTC","是否使用 UTC 时间","true: 表示 axis.type 为 'time' 时，依据 UTC 时间确定 tick 位置，并且 axisLabel 和 tooltip 默认展示的是 UTC 时间。\n false: 表示 axis.type 为 'time' 时，依据本地时间确定 tick 位置，并且 axisLabel 和 tooltip 默认展示的是本地时间。\n 默认取值为false，即使用本地时间。因为考虑到：\n\n 很多情况下，需要展示为本地时间（无论服务器存储的是否为 UTC 时间）。\n 如果 data 中的时间为 '2012-01-02' 这样的没有指定时区的时间表达式，往往意为本地时间。默认情况下，时间被展示时需要和输入一致而非有时差。")]}]}}));
|
|||
|
|
;/*!examples/components/EChartsEditor/Axis.tsx*/
|
|||
|
|
amis.define("def9c51",(function(e,n,o,s){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var c=e("b666d70"),a={id:{desc:"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},show:{desc:"\n\n<p>是否显示 x 轴。</p>\n",uiControl:{type:"boolean",default:"true"}},gridIndex:{desc:"<p>x 轴所在的 grid 的索引，默认位于第一个 grid。</p>\n"},position:{desc:'\n\n<p>x 轴的位置。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">'top'</code></li>\n<li><code class="codespan">'bottom'</code></li>\n</ul>\n<p>默认 grid 中的第一个 x 轴在 grid 的下方（<code class="codespan">'bottom'</code>），第二个 x 轴视第一个 x 轴的位置放在另一侧。</p>\n',uiControl:{type:"enum",options:"top,bottom",default:"bottom"}},offset:{desc:'\n\n<p>X 轴相对于默认位置的偏移，在相同的 <code class="codespan">position</code> 上有多个 X 轴的时候有用。</p>\n',uiControl:{type:"number",step:"0.5"}},realtimeSort:{desc:'<p>用于制作动态排序柱状图。设为 <code class="codespan">true</code> 时，表示 X 轴开启实时排序效果，仅当 X 轴的 <a href="#xAxis.type">type</a> 是 <code class="codespan">'value'</code> 时有效。</p>\n<p>需要配合其他配置项共同实现动态排序柱状图效果，具体参见<a href="tutorial.html#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" target="_blank">动态排序柱状图</a>教程。</p>\n'},sortSeriesIndex:{desc:'<p>动态排序柱状图用于排序的系列 id。目前只支持一个系列的柱状图排序效果，所以这个值只能取 0。仅当 X 轴 <a href="#xAxis.realtimeSort">realtimeSort</a> 为 <code class="codespan">true</code> 并且 <a href="#xAxis.type">type</a> 是 <code class="codespan">'value'</code> 时有效。</p>\n<p>需要配合其他配置项共同实现动态排序柱状图效果，具体参见<a href="tutorial.html#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" target="_blank">动态排序柱状图</a>教程。</p>\n'},type:{desc:'<p>坐标轴类型。</p>\n<p>可选：</p>\n<ul>\n<li><p><code class="codespan">'value'</code>\n 数值轴，适用于连续数据。</p>\n</li>\n<li><p><code class="codespan">'category'</code>\n 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 <a href="#series.data">series.data</a> 或 <a href="#dataset.source">dataset.source</a> 中取，或者可通过 <a href="#xAxis.data">xAxis.data</a> 设置类目数据。</p>\n</li>\n<li><p><code class="codespan">'time'</code>\n 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>\n</li>\n<li><p><code class="codespan">'log'</code>\n 对数轴。适用于对数数据。</p>\n</li>\n</ul>\n'},name:{desc:"\n\n<p>坐标轴名称。</p>\n",uiControl:{type:"text"}},nameLocation:{desc:'\n\n<p>坐标轴名称显示位置。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><code class="codespan">'start'</code></li>\n<li><code class="codespan">'middle'</code> 或者 <code class="codespan">'center'</code></li>\n<li><code class="codespan">'end'</code></li>\n</ul>\n',uiControl:{type:"enum",options:"start,middle,end",default:"end"}},nameTextStyle:{desc:"<p>坐标轴名称的文字样式。</p>\n"},"nameTextStyle.color":{desc:'\n\n<p>坐标轴名称的颜色，默认取 <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>\n',uiControl:{type:"color"}},"nameTextStyle.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
|
|||
|
|
;/*!examples/components/EChartsEditor/Polar.tsx*/
|
|||
|
|
amis.define("4ac2682",(function(e,n,o,s){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a=e("b666d70");n.default={type:"tabs",tabs:[{title:"坐标系",body:(0,a.buildOptions)("polar.",{id:{desc:"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},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'},center:{desc:"\n\n<p>极坐标系的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。</p>\n<p>支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。</p>\n<p><strong>使用示例：</strong></p>\n<pre><code>// 设置成绝对的像素值\ncenter: [400, 300]\n// 设置成相对的百分比\ncenter: ['50%', '50%']\n</code></pre>",uiControl:{type:"percentvector",dims:"x,y"}},radius:{desc:'\n\n<p>极坐标系的半径。可以为如下类型：</p>\n<ul>\n<li><code class="codespan">number</code>：直接指定外半径值。</li>\n<li><code class="codespan">string</code>：例如，<code class="codespan">'20%'</code>，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。</li>\n</ul>\n<ul>\n<li><code class="codespan">Array.<number|string></code>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 <code class="codespan">number</code> <code class="codespan">string</code> 的描述。</li>\n</ul>\n',uiControl:{type:"percentvector",dims:"inner,outer",default:"0%, 75%"}},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<
|
|||
|
|
;/*!examples/components/EChartsEditor/Tooltip.tsx*/
|
|||
|
|
amis.define("2d2b045",(function(e,n,o,s){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.buildTooltip=void 0;var a=e("b666d70"),c={show:{desc:'\n\n<p>是否显示提示框组件，包括提示框浮层和 <a href="#tooltip.axisPointer">axisPointer</a>。</p>\n',uiControl:{type:"boolean",default:"true"}},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",options:"item,axis,none",default:"item"}},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/next/examples/zh/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/next/examples/zh/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/next/examples/zh/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/next/examples/zh/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">tool
|
|||
|
|
;/*!examples/components/EChartsEditor/Toolbox.tsx*/
|
|||
|
|
amis.define("3b4b163",(function(e,o,c,n){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var a=e("b666d70");o.default={type:"tabs",tabs:[{title:"基础",body:(0,a.buildOptions)("toolbox.",{id:{desc:"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},show:{desc:"\n\n<p>是否显示工具栏组件。</p>\n",uiControl:{type:"boolean"}},orient:{desc:"\n\n<p>工具栏 icon 的布局朝向。</p>\n<p>可选：</p>\n<ul>\n<li>'horizontal'</li>\n<li>'vertical'</li>\n</ul>\n",uiControl:{type:"enum",options:"vertical,horizontal"}},itemSize:{desc:"\n\n<p>工具栏 icon 的大小。</p>\n",uiControl:{type:"number",min:"0",default:"15"}},itemGap:{desc:"\n\n<p>工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。</p>\n",uiControl:{type:"number",min:"0",default:"10"}},showTitle:{desc:"\n\n<p>是否在鼠标 hover 的时候显示每个工具 icon 的标题。</p>\n",uiControl:{type:"boolean",default:"true"}},feature:{desc:'<p>各工具配置项。</p>\n<p>除了各个内置的工具按钮外，还可以自定义工具按钮。</p>\n<p>注意，自定义的工具名字，只能以 <code class="codespan">my</code> 开头，例如下例中的 <code class="codespan">myTool1</code>，<code class="codespan">myTool2</code>：</p>\n<pre><code class="lang-javascript">{\n toolbox: {\n feature: {\n myTool1: {\n show: true,\n title: '自定义扩展方法1',\n icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',\n onclick: function (){\n alert('myToolHandler1')\n }\n },\n myTool2: {\n show: true,\n title: '自定义扩展方法',\n icon: 'image://http://echarts.baidu.com/images/favicon.png',\n onclick: function (){\n alert('myToolHandler2')\n }\n }\n }\n }\n}\n</code></pre>\n'},"feature.saveAsImage":{desc:"<p>保存为图片。</p>\n"},"feature.saveAsImage.type":{desc:'\n\n<p>保存的图片格式。</p>\n<ul>\n<li>如果 <code class="codespan">renderer</code> 的类型在 <a href="api.html#echarts.init" target="_blank">初始化图表</a> 时被设为 <code class="codespan">'canvas'</code>（默认），则支持 <code class="codespan">'png'</code>（默认）和 <code class="codespan">'jpg'</code>；</li>\n<li>如果 <code class="codespan">renderer</code> 的类型在 <a href="api.html#echarts.init" target="_blank">初始化图表</a> 时被设为 <code class="codespan">'svg'</code>，则 <code class="codespan">type</code> 只支持 <code class="codespan">'svg'</code>（<code class="codespan">'svg'</code> 格式的图片从 <code class="codespan">v4.8.0</code> 开始支持）。</li>\n</ul>\n',uiControl:{type:"enum",options:"png,jpg"}},"feature.saveAsImage.name":{desc:'\n\n<p>保存的文件名称，默认使用 <a href="#title.text">title.text</a> 作为名称。</p>\n',uiControl:{type:"text"}},"feature.saveAsImage.backgroundColor":{desc:'\n\n<p>保存的图片背景色，默认使用 <a href="#backgroundColor">backgroundColor</a>，如果<code class="codespan">backgroundColor</code>不存在的话会取白色。</p>\n',uiControl:{type:"color"}},"feature.saveAsImage.connectedBackgroundColor":{desc:'\n\n<p>如果图表使用了 <a href="api.html#echarts.connect" target="_blank">echarts.connect</a> <EFBFBD>
|
|||
|
|
;/*!examples/components/EChartsEditor/Series.tsx*/
|
|||
|
|
amis.define("321a637",(function(e,n,o,c){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a=e("b666d70"),s=function(e,n){return{type:"container",visibleOn:'this.type == "'.concat(e,'"'),body:(0,a.buildOptions)("",n)}};n.default={type:"combo",name:"series",tabsMode:!0,tabsLabelTpl:"系列${index|plus}",lazyLoad:!0,label:"",multiLine:!0,multiple:!0,addButtonText:"新增系列",items:[(0,a.select)("type","图表类型",["line","bar","pie","radar","funnel","gauge"]),{type:"input-array",name:"data",label:"数据",items:{type:"input-number"}},s("line",{id:{desc:"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},name:{desc:'<p>系列名称，用于<a href="#tooltip">tooltip</a>的显示，<a href="#legend">legend</a> 的图例筛选，在 <code class="codespan">setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n'},coordinateSystem:{desc:'<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code class="codespan">'cartesian2d'</code></p>\n<p> 使用二维的直角坐标系（也称笛卡尔坐标系），通过 <a href="#series-bar.xAxisIndex">xAxisIndex</a>, <a href="#series-bar.yAxisIndex">yAxisIndex</a>指定相应的坐标轴组件。</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">'polar'</code></p>\n<p> 使用极坐标系，通过 <a href="#series-bar.polarIndex">polarIndex</a> 指定相应的极坐标组件</p>\n</li>\n</ul>\n'},xAxisIndex:{desc:'<p>使用的 <a href="#xAxis">x 轴</a>的 index，在单个图表实例中存在多个 x 轴的时候有用。</p>\n'},yAxisIndex:{desc:'<p>使用的 <a href="#yAxis">y 轴</a>的 index，在单个图表实例中存在多个 y轴的时候有用。</p>\n'},polarIndex:{desc:'<p>使用的<a href="#polar">极坐标系</a>的 index，在单个图表实例中存在多个极坐标系的时候有用。</p>\n'},symbol:{desc:'\n\n<p>标记的图形。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class="codespan">'circle'</code>, <code class="codespan">'rect'</code>, <code class="codespan">'roundRect'</code>, <code class="codespan">'triangle'</code>, <code class="codespan">'diamond'</code>, <code class="codespan">'pin'</code>, <code class="codespan">'arrow'</code>, <code class="codespan">'none'</code></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>如果需要每个数据的图形不一
|