release 4.2.0.rc.1
diff --git a/public/cn/documents/cn/api.json b/public/cn/documents/cn/api.json
index 75d42ce..f700cb6 100644
--- a/public/cn/documents/cn/api.json
+++ b/public/cn/documents/cn/api.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>全局 echarts 对象,在 script 标签引入 <code>echarts.js</code> 文件后获得,或者在 AMD 环境中通过 <code>require(&#39;echarts&#39;)</code> 获得。</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n    devicePixelRatio?: number\n    renderer?: string\n    width?: number|string\n    height? number|string\n}) =&gt; ECharts\n</code></pre>\n<p>创建一个 ECharts 实例,返回 <a href=\"#echartsInstance\">echartsInstance</a>,不能在单个容器上初始化多个 ECharts 实例。</p>\n<p><strong>参数</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p>  实例容器,一般是一个具有高宽的<code>div</code>元素。</p>\n<p>  <strong>注:</strong>如果<code>div</code>是隐藏的,ECharts 可能会获取不到<code>div</code>的高宽导致初始化失败,这时候可以明确指定<code>div</code>的<code>style.width</code>和<code>style.height</code>,或者在<code>div</code>显示后手动调用 <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> 调整尺寸。</p>\n<p>  ECharts 3 中支持直接使用<code>canvas</code>元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方,例如在 WebGL 中作为贴图,这跟使用 <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a> 生成图片链接相比可以支持图表的实时刷新。</p>\n</li>\n<li><p><code>theme</code></p>\n<p>  应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 <a href=\"#echarts.registerTheme\">echarts.registerTheme</a> 注册的主题名称。</p>\n</li>\n<li><p><code>opts</code></p>\n<p>  附加参数。有下面几个可选项:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p>  设备像素比,默认取浏览器的值<code>window.devicePixelRatio</code>。</p>\n</li>\n<li><p><code>renderer</code></p>\n<p>  渲染器,支持 <code>&#39;canvas&#39;</code> 或者 <code>&#39;svg&#39;</code>。参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20Canvas%20%E6%88%96%E8%80%85%20SVG%20%E6%B8%B2%E6%9F%93\" target=\"_blank\">使用 Canvas 或者 SVG 渲染</a>。</p>\n</li>\n<li><p><code>width</code></p>\n<p>  可显式指定实例宽度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的宽度。</p>\n</li>\n<li><p><code>height</code></p>\n<p>  可显式指定实例高度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的高度。</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>多个图表实例实现联动。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><code>group</code>\n  group 的 id,或者图表实例的数组。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">// 分别设置每个实例的 group id\nchart1.group = &#39;group1&#39;;\nchart2.group = &#39;group1&#39;;\necharts.connect(&#39;group1&#39;);\n// 或者可以直接传入需要联动的实例数组\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>解除图表实例的联动,如果只需要移除单个实例,可以将通过将该图表实例 <code>group</code> 设为空。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p>  group 的 id。</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>销毁实例,实例销毁后无法再被使用。</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) =&gt; ECharts\n</code></pre>\n<p>获取 dom 容器上的实例。</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>注册可用的地图,必须在包括 <a href=\"option.html#geo\" target=\"_blank\">geo</a> 组件或者 <a href=\"option.html#series-map\" target=\"_blank\">map</a> 图表类型的时候才能使用。</p>\n<p>使用方法见 <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a>。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p>  地图名称,在 <a href=\"option.html#geo\" target=\"_blank\">geo</a> 组件或者 <a href=\"option.html#series-map\" target=\"_blank\">map</a> 图表类型中设置的 <code>map</code> 对应的就是该值。</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p>  GeoJson 格式的数据,具体格式见 <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a>。</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p>  可选。将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看。</p>\n<p>  <strong>示例 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a>:</strong></p>\n<pre><code class=\"lang-js\">echarts.registerMap(&#39;USA&#39;, usaJson, {\n  // 把阿拉斯加移到美国主大陆左下方\n  Alaska: {\n      // 左上角经度\n      left: -131,\n      // 左上角纬度\n      top: 25,\n      // 经度横跨的范围\n      width: 15\n  },\n  // 夏威夷\n  Hawaii: {\n      left: -110,\n      top: 28,\n      width: 5\n  },\n  // 波多黎各\n  &#39;Puerto Rico&#39;: {\n      left: -76,\n      top: 26,\n      width: 2\n  }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string) =&gt; Object\n</code></pre>\n<p>获取已注册的地图,返回的对象类型如下</p>\n<pre><code class=\"lang-js\">{\n    // 地图的 geoJson 数据\n    geoJson: Object,\n    // 地图的特殊区域,见 registerMap\n    specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>注册主题,用于<a href=\"#echarts.init\">初始化实例</a>的时候指定。</p>\n"},"graphic":{"type":["*"],"description":"<p>图形相关帮助方法。</p>\n","properties":{"clipPointsByRect":{"type":["Function"],"description":"<p>输入一组点,和一个矩形,返回被矩形截取过的点。</p>\n<pre><code class=\"lang-js\">(\n    // 要被截取的点列表,如 [[23, 44], [12, 15], ...]。\n    points: Array.&lt;Array.&lt;number&gt;&gt;,\n    // 用于截取点的矩形。\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; Array.&lt;Array.&lt;number&gt;&gt; // 截取结果。\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>输入两个矩形,返回第二个矩形截取第一个矩形的结果。</p>\n<pre><code class=\"lang-js\">(\n    // 要被截取的矩形。\n    targetRect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    },\n    // 用于截取点的矩形。\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; { // 截取结果。\n    x: number,\n    y: number,\n    width: number,\n    height: number\n}\n</code></pre>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>通过 <a href=\"#echarts.init\">echarts.init</a> 创建的实例。</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>图表的分组,用于<a href=\"#echarts.connect\">联动</a></p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过<code>setOption</code>完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启<a href=\"#option.html#option.animation\">动画</a>的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<p><strong>如下示例:</strong></p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>注:</strong> ECharts 2.x 中的通过 <code>addData</code> , <code>setSeries</code> 方法设置配置项的方式将不再支持,在 ECharts 3 中统一使用<code>setOption</code>,可以参考上面示例。</p>\n<p><strong>参数:</strong></p>\n<p>调用方式:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n    notMerge: ...,\n    lazyUpdate: ...,\n    silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p>  图表的配置项和数据,具体见<a href=\"option.html\" target=\"_blank\">配置项手册</a>。</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p>  可选,是否不跟之前设置的<code>option</code>进行合并,默认为<code>false</code>,即合并。</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p>  可选,在设置完<code>option</code>后是否不立即更新图表,默认为<code>false</code>,即立即更新。</p>\n</li>\n<li><p><code>silent</code></p>\n<p>  可选,阻止调用 <code>setOption</code> 时抛出事件,默认为<code>false</code>,即抛出事件。</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的宽度。</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的高度。</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>获取 ECharts 实例容器的 dom 节点。</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; Object\n</code></pre>\n<p>获取当前实例中维护的<code>option</code>对象,返回的<code>option</code>对象中包含了用户多次<code>setOption</code>合并得到的配置项和数据,也记录了用户交互的状态,例如图例的开关,数据区域缩放选择的范围等等。所以从这份 option 可以恢复或者得到一个新的一模一样的实例。</p>\n<p><strong>注意:</strong>返回的 option 每个组件的属性值都统一是一个数组,不管<code>setOption</code>传进来的时候是单个组件的对象还是多个组件的数组。如下形式:</p>\n<pre><code class=\"lang-js\">{\n    title: [{...}],\n    legend: [{...}],\n    grid: [{...}]\n}\n</code></pre>\n<p>另外<strong>不推荐</strong>下面这种写法:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>因为 <code>getOption</code>获取的是已经合并过默认值了的,所以在修改了某些配置项后会导致原本是根据这些配置项值去设置的默认值失效。</p>\n<p>因此我们更<strong>推荐</strong>通过<code>setOption</code>去修改部分配置。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    visualMap: {\n        inRange: {\n            color: ...\n        }\n    }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n    width?: number|string,\n    height?: number|string,\n    silent?: boolean\n}) =&gt; ECharts\n</code></pre>\n<p>改变图表尺寸,在容器大小发生改变时需要手动调用。</p>\n<p><strong>参数</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p>  opts 可缺省。有下面几个可选项:</p>\n<ul>\n<li><p><code>width</code></p>\n<p>  可显式指定实例宽度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的宽度。</p>\n</li>\n<li><p><code>height</code></p>\n<p>  可显式指定实例高度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的高度。</p>\n</li>\n<li><p><code>silent</code></p>\n<p>  是否禁止抛出事件。默认为 <code>false</code>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 <code>resize</code> 方法获取正确的高宽并且刷新画布,或者在 <code>opts</code> 中显示指定图表高宽。</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>触发图表行为,例如图例开关<code>legendToggleSelect</code>, 数据区域缩放<code>dataZoom</code>,显示提示框<code>showTip</code>等等,更多见 <a href=\"#action\">action</a> 和 <a href=\"#events\">events</a> 的文档。</p>\n<p><code>payload</code> 参数可以通过<code>batch</code>属性同时触发多个行为。</p>\n<p><strong>注:</strong>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为,入口很深,而且涉及到内部组件的组织。因此在 ECharts 3 里统一改为 <code>dispatchAction</code> 的形式。</p>\n<p><strong>示例</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    start: 20,\n    end: 30\n});\n// 可以通过 batch 参数批量分发多个 action\nmyChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    batch: [{\n        // 第一个 dataZoom 组件\n        start: 20,\n        end: 30\n    }, {\n        // 第二个 dataZoom 组件\n        dataZoomIndex: 1,\n        start: 10,\n        end: 20\n    }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler: Function, context?: Object)\n</code></pre>\n<p>绑定事件处理函数。</p>\n<p>ECharts 中的事件有两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发的事件。每个 action 都会有对应的事件,具体见 <a href=\"#action\">action</a> 和 <a href=\"#events\">events</a> 的文档。</p>\n<p>如果事件是外部 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发,并且 action 中有 batch 属性触发批量的行为,则相应的响应事件参数里也会把属性都放在 batch 属性中。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p>  事件名称,全小写,例如<code>&#39;click&#39;</code>,<code>&#39;mousemove&#39;</code>, <code>&#39;legendselected&#39;</code></p>\n<p>  <strong>注:</strong> ECharts 2.x 中会使用 <code>config</code> 对象中的 <code>CLICK</code> 等属性作为事件名称。在 ECharts 3 中统一使用跟 dom 事件一样的全小写字符串作为事件名。</p>\n</li>\n<li><p><code>handler</code></p>\n<p>  事件处理函数。格式为:</p>\n<pre><code class=\"lang-js\">  (event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p>  可选。回调函数内部的<code>context</code>,即<code>this</code>的指向。</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>解绑事件处理函数。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p>  事件名称。</p>\n</li>\n<li><p><code>handler</code></p>\n<p>  可选,可以传入需要解绑的处理函数,不传的话解绑所有该类型的事件函数。</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『使用哪个坐标系进行转换』。\n    // 通常地,可以使用 index 或者 id 或者 name 来定位。\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string\n        gridName?: string\n    },\n    // 要被转换的值。\n    value: Array|string\n    // 转换的结果为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n) =&gt; Array|string\n</code></pre>\n<p>转换坐标系上的点到像素坐标值。</p>\n<p>例:</p>\n<p>在地理坐标系(<a href=\"option.html#geo\" target=\"_blank\">geo</a>)上,把某个点的经纬度坐标转换成为像素坐标:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] 表示 [经度,纬度]。\n// 使用第一个 geo 坐标系进行转换:\nchart.convertToPixel(&#39;geo&#39;, [128.3324, 89.5344]); // 参数 &#39;geo&#39; 等同于 {geoIndex: 0}\n// 使用第二个 geo 坐标系进行转换:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// 使用 id 为 &#39;bb&#39; 的 geo 坐标系进行转换:\nchart.convertToPixel({geoId: &#39;bb&#39;}, [128.3324, 89.5344]);\n</code></pre>\n<p>在直角坐标系(cartesian,<a href=\"option.html#grid\" target=\"_blank\">grid</a>)上,把某个点的坐标转换成为像素坐标:</p>\n<pre><code class=\"lang-js\">// [300, 900] 表示该点 x 轴上对应刻度值 300,y 轴上对应刻度值 900。\n// 注意,一个 grid 可能含有多个 xAxis 和多个 yAxis,任何一对 xAxis-yAxis 形成一个 cartesian。\n// 使用第三个 xAxis 和 id 为 &#39;y1&#39; 的 yAxis 形成的 cartesian 进行转换:\nchart.convertToPixel({xAxisIndex: 2, yAxisId: &#39;y1&#39;}, [300, 900]);\n// 使用 id 为 &#39;g1&#39; 的 grid 的第一个 cartesian 进行转换:\nchart.convertToPixel({gridId: &#39;g1&#39;}, [300, 900]);\n</code></pre>\n<p>把某个坐标轴的点转换成像素坐标:</p>\n<pre><code class=\"lang-js\">// id 为 &#39;x0&#39; 的 xAxis 的刻度 3000 位置所对应的横向像素位置:\nchart.convertToPixel({xAxisId: &#39;x0&#39;}, 3000); // 返回一个 number。\n// 第二个 yAxis 的刻度 600 位置所对应的纵向像素位置:\nchart.convertToPixel({yAxisIndex: 1}, 600); // 返回一个 number。\n</code></pre>\n<p>把关系图(<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>)的点转换成像素坐标:</p>\n<pre><code class=\"lang-js\">// 因为每个 graph series 自己持有一个坐标系,所以我们直接在 finder 中指定 series:\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: &#39;k2&#39;}, [100, 500]);\n</code></pre>\n<p>在某个系列所在的坐标系(无论是 cartesian、geo、graph 等)中,转换某点成像素坐标:</p>\n<pre><code class=\"lang-js\">// 使用第一个系列对应的坐标系:\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// 使用 id 为 &#39;k2&#39; 的系列所对应的坐标系:\nchart.convertToPixel({seriesId: &#39;k2&#39;}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『使用哪个坐标系进行转换』。\n    // 通常地,可以使用 index 或者 id 或者 name 来定位。\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string\n        gridName?: string\n    },\n    // 要被转换的值,为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n    value: Array|string\n    // 转换的结果,为逻辑坐标值。\n) =&gt; Array|string\n</code></pre>\n<p>转换像素坐标值到逻辑坐标系上的点。是 <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a> 的逆运算。\n具体实例可参考 <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>。</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『在哪个坐标系或者系列上判断』。\n    // 通常地,可以使用 index 或者 id 或者 name 来定位。\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string\n        gridName?: string\n    },\n    // 要被判断的点,为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n    value: Array\n) =&gt; boolean\n</code></pre>\n<p>判断给定的点是否在指定的坐标系或者系列上。</p>\n<p>目前支持在这些坐标系和系列上进行判断:<a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>。</p>\n<p>例:</p>\n<pre><code class=\"lang-js\">// 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。\nchart.containPixel(&#39;geo&#39;, [23, 44]); // &#39;geo&#39; 等同于 {geoIndex: 0}\n// 判断 [23, 44] 点是否在 gridId 为 &#39;z&#39; 的 grid 上。\nchart.containPixel({gridId: &#39;z&#39;}, [23, 44]);\n// 判断 [23, 44] 点是否在 index 为 1,4,5 的系列上。\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// 判断 [23, 44] 点是否在 index 为 1,4,5 的系列或者 gridName 为 &#39;a&#39; 的 grid 上。\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: &#39;a&#39;}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>显示加载动画效果。可以在加载数据前手动调用改接口显示加载动画,在数据加载完成后调用 <a href=\"#echartsInstance.hideLoading\">hideLoading</a> 隐藏加载动画。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p>  可选,加载动画类型,目前只有一种<code>&#39;default&#39;</code></p>\n</li>\n<li><p><code>opts</code></p>\n<p>  可选,加载动画配置项,跟<code>type</code>有关,下面是默认配置项:</p>\n<pre><code class=\"lang-js\">default: {\n  text: &#39;loading&#39;,\n  color: &#39;#c23531&#39;,\n  textColor: &#39;#000&#39;,\n  maskColor: &#39;rgba(255, 255, 255, 0.8)&#39;,\n  zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>隐藏动画加载效果。</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 导出的格式,可选 png, jpeg\n    type?: string,\n    // 导出的图片分辨率比例,默认为 1。\n    pixelRatio?: number,\n    // 导出的图片背景色,默认使用 option 里的 backgroundColor\n    backgroundColor?: string,\n    // 忽略组件的列表,例如要忽略 toolbox 就是 [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>导出图表图片,返回一个 base64 的 URL,可以设置为<code>Image</code>的<code>src</code>。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n    pixelRatio: 2,\n    backgroundColor: &#39;#fff&#39;\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 导出的格式,可选 png, jpeg\n    type?: string,\n    // 导出的图片分辨率比例,默认为 1。\n    pixelRatio?: number,\n    // 导出的图片背景色,默认使用 option 里的 backgroundColor\n    backgroundColor?: string,\n    // 忽略组件的列表,例如要忽略 toolbox 就是 [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>导出联动的图表图片,返回一个 base64 的 url,可以设置为<code>Image</code>的<code>src</code>。导出图片中每个图表的相对位置跟容器的相对位置有关。</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 要增加数据的系列序号。\n    seriesIndex?: string,\n    // 增加的数据。\n    data?: Array|TypedArray,\n}) =&gt; string\n</code></pre>\n<p>此接口用于,在大数据量(百万以上)的渲染场景,分片加载数据和增量渲染。在大数据量的场景下(例如地理数的打点),就算数据使用二进制格式,也会有几十或上百兆,在互联网环境下,往往需要分片加载。<code>appendData</code> 接口提供了分片加载后增量渲染的能力,渲染新加如的数据块时不会清除原有已经渲染的部分。</p>\n<p>注意:</p>\n<ul>\n<li>现在不支持 <a href=\"option.html#series\" target=\"_blank\">系列(series)</a> 使用 <a href=\"option.html#dataset\" target=\"_blank\">dataset</a> 同时使用 <code>appendData</code>,只支持系列使用自己的 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 时使用 <code>appendData</code>。</li>\n<li>目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有:ECharts 基础版本的 <a href=\"option.html#series-scatter\" target=\"_blank\">散点图(scatter)</a> 和 <a href=\"option-gl.html#series-linesGL\" target=\"_blank\">线图(lines)</a>。ECharts GL 的 <a href=\"option-gl.html#series-scatterGL\" target=\"_blank\">散点图(scatterGL)</a>、<a href=\"option-gl.html#series-lines3D\" target=\"_blank\">线图(linesGL)</a> 和 <a href=\"ooption-gl.html#series-polygons3D\" target=\"_blank\">可视化建筑群(polygons3D)</a>。</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>清空当前实例,会移除实例中所有的组件和图表。清空后调用 <a href=\"#echartsInstance.getOption\">getOption</a> 方法返回一个<code>{}</code>空对象。</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() =&gt; boolean\n</code></pre>\n<p>当前实例是否已经被释放。</p>\n"},"dispose":{"type":["*"],"description":"<p>销毁实例,销毁后实例无法再被使用。</p>\n"}}},"action":{"type":["*"],"description":"<p>ECharts 中支持的图表行为,通过 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 触发。</p>\n<p><strong>注:</strong> 代码中的 <code>?:</code> 表示该属性是可选的。<em>EVENT:</em> 是 action 对应触发的事件。</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>高亮指定的数据图形。</p>\n<p>通过<code>seriesName</code>或者<code>seriesIndex</code>指定系列。如果要再指定某个数据可以再指定<code>dataIndex</code>或者<code>name</code>。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;highlight&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 可选,数据的 index\n    dataIndex?: number,\n    // 可选,数据的 名称\n    name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>取消高亮指定的数据图形。</p>\n<p>通过<code>seriesName</code>或者<code>seriesIndex</code>指定系列。如果要指定某个数据可以再指定<code>dataIndex</code>或者<code>name</code>。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;downplay&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 可选,数据的 index\n    dataIndex?: number,\n    // 可选,数据的 名称\n    name?: string\n})\n</code></pre>\n<!--============= legend ==========-->"},"legend":{"type":["*"],"description":"<p><a href=\"option.html#legend\" target=\"_blank\">图例组件</a>相关的行为,必须引入<a href=\"option.html#legend\" target=\"_blank\">图例组件</a>后才能使用。</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>选中图例。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendSelect&#39;,\n    // 图例名称\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>取消选中图例。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendUnSelect&#39;,\n    // 图例名称\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>切换图例的选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendToggleSelect&#39;,\n    // 图例名称\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>控制图例的滚动。当 <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendScroll&#39;,\n    scrollDataIndex: number,\n    legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->"}}},"tooltip":{"type":["*"],"description":"<p><a href=\"option.html#tooltip\" target=\"_blank\">提示框组件</a>相关的行为,必须引入<a href=\"option.html#tooltip\" target=\"_blank\">提示框组件</a>后才能使用。</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>显示提示框。</p>\n<p>有下面两种使用方式。</p>\n<p>1 指定在相对容器的位置处显示提示框,如果指定的位置无法显示则无效。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 屏幕上的 x 坐标\n    x: number,\n    // 屏幕上的 y 坐标\n    y: number,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: Array.&lt;number&gt;|string|Function\n})\n</code></pre>\n<p>2 指定数据图形,根据 tooltip 的配置项显示提示框。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。\n    seriesIndex?: number,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: Array.&lt;number&gt;|string|Function,\n})\n</code></pre>\n<p>参数<code>position</code>同<a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>相同。</p>\n"},"hideTip":{"type":["Action"],"description":"<p>隐藏提示框。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;hideTip&#39;\n})\n</code></pre>\n<!--============= dataZoom ==========-->"}}},"dataZoom":{"type":["*"],"description":"<p><a href=\"option.html#dataZoom\" target=\"_blank\">数据区域缩放组件</a>相关的行为,必须引入<a href=\"option.html#dataZoom\" target=\"_blank\">数据区域缩放组件</a>后才能使用。</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>数据区域缩放。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;dataZoom&#39;,\n    // 可选,dataZoom 组件的 index,多个 dataZoom 组件时有用,默认为 0\n    dataZoomIndex: number,\n    // 开始位置的百分比,0 - 100\n    start: number,\n    // 结束位置的百分比,0 - 100\n    end: number,\n    // 开始位置的数值\n    startValue: number,\n    // 结束位置的数值\n    endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n<!--============= visualMap ==========-->"}}},"visualMap":{"type":["*"],"description":"<p><a href=\"option.html#visualMap\" target=\"_blank\">视觉映射组件</a>相关的行为,必须引入<a href=\"option.html#visualMap\" target=\"_blank\">视觉映射组件</a>后才能使用。</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>选取映射的数值范围。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // 可选,visualMap 组件的 index,多个 visualMap 组件时有用,默认为 0\n    visualMapIndex: number,\n    // 连续型 visualMap 和 离散型 visualMap 不一样\n    // 连续型的是一个表示数值范围的数组。\n    // 离散型的是一个对象,键值是类目或者分段的索引。值是 `true`, `false`\n    selected: Object|Array\n})\n</code></pre>\n<p>å\n<strong>示例:</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // 选取 20 到 40 的值范围\n    selected: [20, 40],\n    // 取消选中第二段\n    selected: { 1: false },\n    // 取消选中类目 `优`\n    selected: { &#39;优&#39;: false }\n});\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->"}}},"timeline":{"type":["*"],"description":"<p><a href=\"option.html#timeline\" target=\"_blank\">时间轴组件</a>相关的行为,必须引入<a href=\"option.html#timeline\" target=\"_blank\">时间轴组件</a>后才能使用。</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>设置当前的时间点。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;timelineChange&#39;,\n    // 时间点的 index\n    currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>切换时间轴的播放状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;timelinePlayChange&#39;,\n    // 播放状态,true 为自动播放\n    playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->"}}},"toolbox":{"type":["*"],"description":"<p><a href=\"option.html#toolbox\" target=\"_blank\">工具栏组件</a>相关的行为,必须引入<a href=\"option.html#toolbox\" target=\"_blank\">工具栏组件</a>后才能使用。</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>重置 option。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;restore&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p><a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>相关的行为,必须引入<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>后才能使用。</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>选中指定的饼图扇形。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>取消选中指定的饼图扇形。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieUnSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>切换指定的饼图扇形选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieToggleSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= geo ==========-->"}}},"geo":{"type":["*"],"description":"<p><a href=\"option.html#series-geo\" target=\"_blank\">地图组件</a>相关的行为,必须引入<a href=\"option.html#geo\" target=\"_blank\">地图组件</a>后才能使用。</p>\n","properties":{"geoSelect":{"type":["Action"],"description":"<p>选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselected\">geoselected</a></p>\n"},"geoUnSelect":{"type":["Action"],"description":"<p>取消选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoUnSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geounselected\">geounselected</a></p>\n"},"geoToggleSelect":{"type":["Action"],"description":"<p>切换指定的地图区域选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoToggleSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselectchanged\">geoselectchanged</a></p>\n<!--============= map ==========-->"}}},"map":{"type":["*"],"description":"<p><a href=\"option.html#series-map\" target=\"_blank\">地图图表</a>相关的行为,必须引入<a href=\"option.html#series-map\" target=\"_blank\">地图图表</a>后才能使用。</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>取消选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapUnSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>切换指定的地图区域选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapToggleSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->"}}},"graph":{"type":["*"],"description":"<p><a href=\"option.html#series-graph\" target=\"_blank\">关系图</a> 相关的行为,必须引入 <a href=\"option.html#series-graph\" target=\"_blank\">关系图</a> 后才能使用。</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>将指定的节点以及其所有邻接节点高亮。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;focusNodeAdjacency&#39;,\n\n    // 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;,\n\n    // 使用 dataIndex 来定位节点。\n    dataIndex: 12\n})\n</code></pre>\n<p>最后会抛出 <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> 事件。</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>将指定的节点以及其所有邻接节点高亮。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;unfocusNodeAdjacency&#39;,\n\n    // 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;\n})\n</code></pre>\n<p>最后会抛出 <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> 事件。</p>\n<!--============= brush ==========-->"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">区域选择</a>相关的行为。</p>\n","properties":{"brush":{"type":["*"],"description":"<p>触发此 action 可向 echarts 中添加一个或多个选框,例如:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n    type: &#39;brush&#39;,\n    areas: [ // areas 表示选框的集合,可以指定多个选框。\n        { // 选框一:\n            geoIndex: 0, // 指定此选框属于 index 为 0 的 geo 坐标系。\n                         // 也可以通过 xAxisIndex 或 yAxisIndex 来指定此选框属于直角坐标系。\n                         // 如果没有指定,则此选框属于『全局选框』。不属于任何坐标系。\n                         // 属于『坐标系选框』,可以随坐标系一起缩放平移。属于全局的选框不行。\n            brushType: &#39;polygon&#39;, // 指定选框的类型。还可以为 &#39;rect&#39;, &#39;lineX&#39;, &#39;lineY&#39;\n            range: [ // 如果是『全局选框』,则使用 range 来描述选框的范围。\n                ...\n            ],\n            coordRange: [ // 如果是『坐标系选框』,则使用 coordRange 来指定选框的范围。\n                [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n                // 这个例子中,因为指定了 geoIndex,所以 coordRange 里单位是经纬度。\n            ]\n        },\n        ... // 选框二、三、四、...\n    ]\n});\n</code></pre>\n<p>其中,<code>areas</code> 中的 <code>range</code> 和 <code>coordRange</code> 的格式,根据 brushType 不同而不同:</p>\n<ul>\n<li>brushType 为 &#39;rect&#39;\n  <code>range</code> 和 <code>coordRange</code> 的格式为:<code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>brushType 为 &#39;lineX&#39; 或 &#39;lineY&#39;\n  <code>range</code> 和 <code>coordRange</code> 的格式为:[min, maxX]</li>\n<li>brushType 为 &#39;polygon&#39;\n  <code>range</code> 和 <code>coordRange</code> 的格式为:[[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p><code>range</code> 和 <code>coordRange</code> 的区别是:</p>\n<ul>\n<li>当此选框为『全局选框』时,使用 <code>range</code>。</li>\n<li>当此选框为『坐标系选框』时(即指定了 <code>geoIndex</code> 或 <code>xAxisIndex</code> 或 <code>yAxisIndex</code> 时),使用 <code>coordRange</code>。</li>\n<li><code>range</code> 的单位为 <em>像素</em>,<code>coordRange</code> 的单位为 <em>坐标系单位</em>,比如 geo 中,<code>coordRange</code> 单位为经纬度,直角坐标系中,coordRange 单位为对应轴的数据的单位。</li>\n</ul>\n"}}}}},"events":{"type":["*"],"description":"<p>在 ECharts 中主要通过 <a href=\"#echartsInstance.on\">on</a> 方法添加事件处理函数,该文档描述了所有 ECharts 的事件列表。</p>\n<p>ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发的事件。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">myChart.on(&#39;click&#39;, function (params) {\n    console.log(params);\n});\n\nmyChart.on(&#39;legendselectchanged&#39;, function (params) {\n    console.log(params);\n});\n</code></pre>\n","properties":{"鼠标事件":{"type":["*"],"description":"<p>鼠标事件的事件参数是事件对象的数据的各个属性,对于图表的点击事件,基本参数如下,其它图表诸如饼图可能会有部分附加参数。例如饼图会有<code>percent</code>属性表示百分比,具体见各个图表类型的 label formatter 回调函数的 <code>params</code>。</p>\n<pre><code class=\"lang-js\">{\n    // 当前点击的图形元素所属的组件名称,\n    // 其值如 &#39;series&#39;、&#39;markLine&#39;、&#39;markPoint&#39;、&#39;timeLine&#39; 等。\n    componentType: string,\n    // 系列类型。值可能为:&#39;line&#39;、&#39;bar&#39;、&#39;pie&#39; 等。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesType: string,\n    // 系列在传入的 option.series 中的 index。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesIndex: number,\n    // 系列名称。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesName: string,\n    // 数据名,类目名\n    name: string,\n    // 数据在传入的 data 数组中的 index\n    dataIndex: number,\n    // 传入的原始数据项\n    data: Object,\n    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,\n    // dataType 的值会是 &#39;node&#39; 或者 &#39;edge&#39;,表示当前点击在 node 还是 edge 上。\n    // 其他大部分图表中只有一种 data,dataType 无意义。\n    dataType: string,\n    // 传入的数据值\n    value: number|Array\n    // 数据图形的颜色。当 componentType 为 &#39;series&#39; 时有意义。\n    color: string\n}\n</code></pre>\n<p>鼠标事件包括<code>&#39;click&#39;</code>,<code>&#39;dblclick&#39;</code>,<code>&#39;mousedown&#39;</code>,<code>&#39;mouseup&#39;</code>,<code>&#39;mouseover&#39;</code>,<code>&#39;mouseout&#39;</code>,<code>&#39;globalout&#39;</code>,<code>&#39;contextmenu&#39;</code>。</p>\n<p>参见 <a href=\"http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA\" target=\"_blank\">ECharts 中的事件和行为</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\n切换图例选中状态后的事件。</p>\n<p><strong>注:</strong>图例组件用户切换图例开关会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendselectchanged&#39;,\n    // 切换的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\n图例选中后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendselected&#39;,\n    // 选中的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 中用户开关图例对应的事件从 <code>legendselected</code> 改为 <a href=\"#events.legendselectchanged\">legendselectchanged</a>。</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\n图例取消选中后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendunselected&#39;,\n    // 取消选中的图例名称\n    name: string\n    // 所有图例的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\n图例滚动事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendscroll&#39;,\n    scrollDataIndex: number\n    legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>数据区域缩放后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;datazoom&#39;,\n    // 缩放的开始位置的百分比,0 - 100\n    start: number\n    // 缩放的结束位置的百分比,0 - 100\n    end: number\n    // 缩放的开始位置的数值,只有在工具栏的缩放行为的事件中存在。\n    startValue?: number\n    // 缩放的结束位置的数值,只有在工具栏的缩放行为的事件中存在。\n    endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\n视觉映射组件中,<code>range</code> 值改变后触发的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;datarangeselected&#39;,\n    // 连续型 visualMap 和 离散型 visualMap 不一样\n    // 连续型的是一个表示数值范围的数组。\n    // 离散型的是一个对象,键值是类目或者分段的索引。值是`true`或`false`\n    selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\n时间轴中的时间点改变后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;timelinechanged&#39;,\n    // 时间点的 index\n    currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\n时间轴中播放状态的切换事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;timelineplaychanged&#39;,\n    // 播放状态,true 为自动播放\n    playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\n重置 option 事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;restore&#39;\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p><a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">工具栏中数据视图</a>的修改事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;dataviewchanged&#39;\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p><a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">工具栏中动态类型切换</a>的切换事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;magictypechanged&#39;,\n    // 点击切换的当前类型,同 echarts 2.x 中的 type 属性\n    currentType: string\n}\n</code></pre>\n"},"geoselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoToggleSelect\">geoToggleSelect</a></p>\n<p><a href=\"option.html#geo\" target=\"_blank\">geo</a> 中地图区域切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geoselectchanged&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"geoselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoSelect\">geoSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">geo</a> 中地图区域选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.geoselectchanged\">geoselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geoselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"geounselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoUnSelect\">geoUnSelect</a></p>\n<p><a href=\"option.html#geo\" target=\"_blank\">geo</a> 中地图区域取消选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.geoselectchanged\">geoselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geounselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a> 中饼图扇形切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselectchanged&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> 该事件同 ECharts 2 中的 <code>pieSelected</code> 事件相同。</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">series-pie</a> 中饼图扇形选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.pieselectchanged\">pieselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 中用户开关图例对应的事件从 <code>pieselected</code> 改为 <a href=\"#events.pieselectchanged\">pieselectchanged</a>。</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a> 中饼图扇形取消选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.pieselectchanged\">pieselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieunselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p><a href=\"option.html#series-map\" target=\"_blank\">series-map</a> 中地图区域切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselectchanged&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> 该事件同 ECharts 2 中的 <code>mapSelected</code> 事件相同。</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">series-map</a> 中地图区域选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.mapselectchanged\">mapselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 中用户开关图例对应的事件从 <code>mapselected</code> 改为 <a href=\"#events.mapselectchanged\">mapselectchanged</a>。</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p><a href=\"option.html#series-map\" target=\"_blank\">series-map</a> 中地图区域取消选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.mapselectchanged\">mapselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapunselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p><a href=\"option.html#parallelAxis\" target=\"_blank\">平行坐标轴 (Parallel)</a>范围选取事件。</p>\n<p>当进行坐标轴范围选取时,可以用如下方式获取当前高亮的线所对应的 data indices\n(即 <code>series</code> 的 <code>data</code> 中的序号列表)。</p>\n<pre><code class=\"lang-javascript\">chart.on(&#39;axisareaselected&#39;, function () {\n    var series0 = chart.getModel().getSeries()[0];\n    var series1 = chart.getModel().getSeries()[1];\n    var indices0 = series0.getRawIndicesByActiveState(&#39;active&#39;);\n    var indices1 = series1.getRawIndicesByActiveState(&#39;active&#39;);\n    console.log(indices0, indices1);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p><a href=\"option.html#graph\" target=\"_blank\">graph</a>的邻接节点高亮事件。</p>\n<p>参见<a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>。</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p><a href=\"option.html#graph\" target=\"_blank\">graph</a>的邻接节点取消高亮事件。</p>\n<p>参见<a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>。</p>\n"},"brush":{"type":["Event"],"description":"<p>选框添加事件。即发出 <a href=\"#action.brush\">brush</a> action 得到的事件。</p>\n"},"brushselected":{"type":["Event"],"description":"<p>对外通知当前选中了什么。</p>\n<p>参见 <a href=\"option.html#brush\" target=\"_blank\">区域选择</a>。</p>\n<p>这个事件,在 <code>setOption</code> 时不会发出,在其他的 dispatchAction 时,或者用户在界面中创建、删除、修改选框时会发出。</p>\n<p>事件参数内容为:</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;brushselected&#39;,\n    batch: [\n        {\n            brushIndex: number // brush 组件的id,大多数情况只使用一个 brush 组件,所以不必理会。\n            selected: [ // 每个系列被选中的项。\n                        // 注意,如果某个系列不支持 brush,但是还是会在这里出现对应的项。\n                        // 也就是说,selected 可以使用 seriesIndex 来直接找到对应的项。\n                { // series 0 被选中的项\n                    seriesIndex: number,\n                    dataIndex: [ 3, 6, 12, 23 ] // 用这些 dataIndex,可以去原始数据中找到真正的值。\n                },\n                { // series 1 被选中的项\n                    seriesIndex: number,\n                    dataIndex: []\n                },\n                ...\n            ]\n        },\n        ...\n    ]\n}\n</code></pre>\n<p>事件使用方式例如:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n    [ 12, 23, 54, 6 ], // series 0 的数据\n    [ 34, 34433, 2223, 21122, 1232, 34 ] // series 1 的数据\n];\n\nchart.setOption({\n    ...,\n    brush: {\n        ...\n    },\n    series: [\n        { // series 0\n            data: dataBySeries[0]\n        },\n        { // series 1\n            data: dataBySeries[1]\n        }\n    ]\n});\n\nchart.on(&#39;brushSelected&#39;, function (params) {\n    var brushComponent = params.batch[0];\n\n    var sum = 0; // 统计选中项的数据值的和\n\n    for (var sIdx = 0; sIdx &lt; brushComponent.selected.length; sIdx++) {\n        // 对于每个 series:\n        var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n        for (var i = 0; i &lt; dataIndices.length; i++) {\n            var dataIndex = dataIndices[i];\n            sum += dataBySeries[sIdx][dataIndex];\n        }\n    }\n    console.log(sum); // 用某种方式输出统计值。\n});\n</code></pre>\n<p>如果想<strong>避免此事件频繁触发</strong>,可以使用 <a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a>。</p>\n"},"rendered":{"type":["Event"],"description":"<p>渲染结束事件。注意 <code>rendered</code> 事件并不代表渲染动画(参见 <a href=\"#animation\">animation</a> 相关配置)或者渐进渲染(参见 <a href=\"#series-scatter.progressive\">progressive</a> 相关配置)停止,只代表本帧的渲染结束。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;rendered&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>渲染完成事件。当渲染动画(参见 <a href=\"#animation\">animation</a> 相关配置)或者渐进渲染(参见 <a href=\"#series-scatter.progressive\">progressive</a> 相关配置)停止时触发。</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;finished&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>全局 echarts 对象,在 script 标签引入 <code>echarts.js</code> 文件后获得,或者在 AMD 环境中通过 <code>require(&#39;echarts&#39;)</code> 获得。</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n    devicePixelRatio?: number\n    renderer?: string\n    width?: number|string\n    height? number|string\n}) =&gt; ECharts\n</code></pre>\n<p>创建一个 ECharts 实例,返回 <a href=\"#echartsInstance\">echartsInstance</a>,不能在单个容器上初始化多个 ECharts 实例。</p>\n<p><strong>参数</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p>  实例容器,一般是一个具有高宽的<code>div</code>元素。</p>\n<p>  <strong>注:</strong>如果<code>div</code>是隐藏的,ECharts 可能会获取不到<code>div</code>的高宽导致初始化失败,这时候可以明确指定<code>div</code>的<code>style.width</code>和<code>style.height</code>,或者在<code>div</code>显示后手动调用 <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> 调整尺寸。</p>\n<p>  ECharts 3 中支持直接使用<code>canvas</code>元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方,例如在 WebGL 中作为贴图,这跟使用 <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a> 生成图片链接相比可以支持图表的实时刷新。</p>\n</li>\n<li><p><code>theme</code></p>\n<p>  应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 <a href=\"#echarts.registerTheme\">echarts.registerTheme</a> 注册的主题名称。</p>\n</li>\n<li><p><code>opts</code></p>\n<p>  附加参数。有下面几个可选项:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p>  设备像素比,默认取浏览器的值<code>window.devicePixelRatio</code>。</p>\n</li>\n<li><p><code>renderer</code></p>\n<p>  渲染器,支持 <code>&#39;canvas&#39;</code> 或者 <code>&#39;svg&#39;</code>。参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20Canvas%20%E6%88%96%E8%80%85%20SVG%20%E6%B8%B2%E6%9F%93\" target=\"_blank\">使用 Canvas 或者 SVG 渲染</a>。</p>\n</li>\n<li><p><code>width</code></p>\n<p>  可显式指定实例宽度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的宽度。</p>\n</li>\n<li><p><code>height</code></p>\n<p>  可显式指定实例高度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的高度。</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>多个图表实例实现联动。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><code>group</code>\n  group 的 id,或者图表实例的数组。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">// 分别设置每个实例的 group id\nchart1.group = &#39;group1&#39;;\nchart2.group = &#39;group1&#39;;\necharts.connect(&#39;group1&#39;);\n// 或者可以直接传入需要联动的实例数组\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>解除图表实例的联动,如果只需要移除单个实例,可以将通过将该图表实例 <code>group</code> 设为空。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p>  group 的 id。</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>销毁实例,实例销毁后无法再被使用。</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) =&gt; ECharts\n</code></pre>\n<p>获取 dom 容器上的实例。</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>注册可用的地图,必须在包括 <a href=\"option.html#geo\" target=\"_blank\">geo</a> 组件或者 <a href=\"option.html#series-map\" target=\"_blank\">map</a> 图表类型的时候才能使用。</p>\n<p>使用方法见 <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a>。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p>  地图名称,在 <a href=\"option.html#geo\" target=\"_blank\">geo</a> 组件或者 <a href=\"option.html#series-map\" target=\"_blank\">map</a> 图表类型中设置的 <code>map</code> 对应的就是该值。</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p>  GeoJson 格式的数据,具体格式见 <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a>。</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p>  可选。将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看。</p>\n<p>  <strong>示例 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a>:</strong></p>\n<pre><code class=\"lang-js\">echarts.registerMap(&#39;USA&#39;, usaJson, {\n  // 把阿拉斯加移到美国主大陆左下方\n  Alaska: {\n      // 左上角经度\n      left: -131,\n      // 左上角纬度\n      top: 25,\n      // 经度横跨的范围\n      width: 15\n  },\n  // 夏威夷\n  Hawaii: {\n      left: -110,\n      top: 28,\n      width: 5\n  },\n  // 波多黎各\n  &#39;Puerto Rico&#39;: {\n      left: -76,\n      top: 26,\n      width: 2\n  }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string) =&gt; Object\n</code></pre>\n<p>获取已注册的地图,返回的对象类型如下</p>\n<pre><code class=\"lang-js\">{\n    // 地图的 geoJson 数据\n    geoJson: Object,\n    // 地图的特殊区域,见 registerMap\n    specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>注册主题,用于<a href=\"#echarts.init\">初始化实例</a>的时候指定。</p>\n"},"graphic":{"type":["*"],"description":"<p>图形相关帮助方法。</p>\n","properties":{"clipPointsByRect":{"type":["Function"],"description":"<p>输入一组点,和一个矩形,返回被矩形截取过的点。</p>\n<pre><code class=\"lang-js\">(\n    // 要被截取的点列表,如 [[23, 44], [12, 15], ...]。\n    points: Array.&lt;Array.&lt;number&gt;&gt;,\n    // 用于截取点的矩形。\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; Array.&lt;Array.&lt;number&gt;&gt; // 截取结果。\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>输入两个矩形,返回第二个矩形截取第一个矩形的结果。</p>\n<pre><code class=\"lang-js\">(\n    // 要被截取的矩形。\n    targetRect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    },\n    // 用于截取点的矩形。\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; { // 截取结果。\n    x: number,\n    y: number,\n    width: number,\n    height: number\n}\n</code></pre>\n<p>注意:如果矩形完全被截干净,会返回 <code>undefined</code>。</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>通过 <a href=\"#echarts.init\">echarts.init</a> 创建的实例。</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>图表的分组,用于<a href=\"#echarts.connect\">联动</a></p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过<code>setOption</code>完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启<a href=\"#option.html#option.animation\">动画</a>的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<p><strong>如下示例:</strong></p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>注:</strong> ECharts 2.x 中的通过 <code>addData</code> , <code>setSeries</code> 方法设置配置项的方式将不再支持,在 ECharts 3 中统一使用<code>setOption</code>,可以参考上面示例。</p>\n<p><strong>参数:</strong></p>\n<p>调用方式:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n    notMerge: ...,\n    lazyUpdate: ...,\n    silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p>  图表的配置项和数据,具体见<a href=\"option.html\" target=\"_blank\">配置项手册</a>。</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p>  可选,是否不跟之前设置的<code>option</code>进行合并,默认为<code>false</code>,即合并。</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p>  可选,在设置完<code>option</code>后是否不立即更新图表,默认为<code>false</code>,即立即更新。</p>\n</li>\n<li><p><code>silent</code></p>\n<p>  可选,阻止调用 <code>setOption</code> 时抛出事件,默认为<code>false</code>,即抛出事件。</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的宽度。</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的高度。</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>获取 ECharts 实例容器的 dom 节点。</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; Object\n</code></pre>\n<p>获取当前实例中维护的<code>option</code>对象,返回的<code>option</code>对象中包含了用户多次<code>setOption</code>合并得到的配置项和数据,也记录了用户交互的状态,例如图例的开关,数据区域缩放选择的范围等等。所以从这份 option 可以恢复或者得到一个新的一模一样的实例。</p>\n<p><strong>注意:</strong>返回的 option 每个组件的属性值都统一是一个数组,不管<code>setOption</code>传进来的时候是单个组件的对象还是多个组件的数组。如下形式:</p>\n<pre><code class=\"lang-js\">{\n    title: [{...}],\n    legend: [{...}],\n    grid: [{...}]\n}\n</code></pre>\n<p>另外<strong>不推荐</strong>下面这种写法:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>因为 <code>getOption</code>获取的是已经合并过默认值了的,所以在修改了某些配置项后会导致原本是根据这些配置项值去设置的默认值失效。</p>\n<p>因此我们更<strong>推荐</strong>通过<code>setOption</code>去修改部分配置。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    visualMap: {\n        inRange: {\n            color: ...\n        }\n    }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n    width?: number|string,\n    height?: number|string,\n    silent?: boolean\n}) =&gt; ECharts\n</code></pre>\n<p>改变图表尺寸,在容器大小发生改变时需要手动调用。</p>\n<p><strong>参数</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p>  opts 可缺省。有下面几个可选项:</p>\n<ul>\n<li><p><code>width</code></p>\n<p>  可显式指定实例宽度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的宽度。</p>\n</li>\n<li><p><code>height</code></p>\n<p>  可显式指定实例高度,单位为像素。如果传入值为 <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>,则表示自动取 <code>dom</code>(实例容器)的高度。</p>\n</li>\n<li><p><code>silent</code></p>\n<p>  是否禁止抛出事件。默认为 <code>false</code>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 <code>resize</code> 方法获取正确的高宽并且刷新画布,或者在 <code>opts</code> 中显示指定图表高宽。</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>触发图表行为,例如图例开关<code>legendToggleSelect</code>, 数据区域缩放<code>dataZoom</code>,显示提示框<code>showTip</code>等等,更多见 <a href=\"#action\">action</a> 和 <a href=\"#events\">events</a> 的文档。</p>\n<p><code>payload</code> 参数可以通过<code>batch</code>属性同时触发多个行为。</p>\n<p><strong>注:</strong>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为,入口很深,而且涉及到内部组件的组织。因此在 ECharts 3 里统一改为 <code>dispatchAction</code> 的形式。</p>\n<p><strong>示例</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    start: 20,\n    end: 30\n});\n// 可以通过 batch 参数批量分发多个 action\nmyChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    batch: [{\n        // 第一个 dataZoom 组件\n        start: 20,\n        end: 30\n    }, {\n        // 第二个 dataZoom 组件\n        dataZoomIndex: 1,\n        start: 10,\n        end: 20\n    }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    eventName: string,\n    handler: Function,\n    context?: Object\n)\n(\n    eventName: string,\n    query: string|Object,\n    handler: Function,\n    context?: Object\n)\n</code></pre>\n<p>绑定事件处理函数。</p>\n<p>ECharts 中的事件有两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发的事件。每个 action 都会有对应的事件,具体见 <a href=\"#action\">action</a> 和 <a href=\"#events\">events</a> 的文档。</p>\n<p>如果事件是外部 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发,并且 action 中有 batch 属性触发批量的行为,则相应的响应事件参数里也会把属性都放在 batch 属性中。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p>  事件名称,全小写,例如<code>&#39;click&#39;</code>,<code>&#39;mousemove&#39;</code>, <code>&#39;legendselected&#39;</code></p>\n<p>  <strong>注:</strong> ECharts 2.x 中会使用 <code>config</code> 对象中的 <code>CLICK</code> 等属性作为事件名称。在 ECharts 3 中统一使用跟 dom 事件一样的全小写字符串作为事件名。</p>\n</li>\n<li><p><code>query</code></p>\n<p>  可选的过滤条件,能够只在指定的组件或者元素上进行响应。可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>  如果为 <code>string</code> 表示组件类型。格式可以是 &#39;mainType&#39; 或者 &#39;mainType.subType&#39;。例如:</p>\n<pre><code class=\"lang-js\">  chart.on(&#39;click&#39;, &#39;series&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;series.line&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;dataZoom&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;xAxis.category&#39;, function () {...});\n</code></pre>\n<p>  如果为 <code>Object</code>,可以包含以下一个或多个属性,每个属性都是可选的:</p>\n<pre><code class=\"lang-js\">  {\n      &lt;mainType&gt;Index: number // 组件 index\n      &lt;mainType&gt;Name: string // 组件 name\n      &lt;mainType&gt;Id: string // 组件 id\n      dataIndex: number // 数据项 index\n      name: string // 数据项 name\n      dataType: string // 数据项 type,如关系图中的 &#39;node&#39;, &#39;edge&#39;\n      element: string // 自定义系列中的 el 的 name\n  }\n</code></pre>\n<p>  例如:</p>\n<pre><code class=\"lang-js\">  chart.setOption({\n      // ...\n      series: [{\n          name: &#39;uuu&#39;\n          // ...\n      }]\n  });\n  chart.on(&#39;mouseover&#39;, {seriesName: &#39;uuu&#39;}, function () {\n      // series name 为 &#39;uuu&#39; 的系列中的图形元素被 &#39;mouseover&#39; 时,此方法被回调。\n  });\n</code></pre>\n<p>  例如:</p>\n<pre><code class=\"lang-js\">  chart.setOption({\n      // ...\n      series: [{\n          // ...\n      }, {\n          // ...\n          data: [\n              {name: &#39;xx&#39;, value: 121},\n              {name: &#39;yy&#39;, value: 33}\n          ]\n      }]\n  });\n  chart.on(&#39;mouseover&#39;, {seriesIndex: 1, name: &#39;xx&#39;}, function () {\n      // series index 1 的系列中的 name 为 &#39;xx&#39; 的元素被 &#39;mouseover&#39; 时,此方法被回调。\n  });\n</code></pre>\n<p>  例如:</p>\n<pre><code class=\"lang-js\">  chart.setOption({\n      // ...\n      series: [{\n          type: &#39;graph&#39;,\n          nodes: [{name: &#39;a&#39;, value: 10}, {name: &#39;b&#39;, value: 20}],\n          edges: [{source: 0, target: 1}]\n      }]\n  });\n  chart.on(&#39;click&#39;, {dataType: &#39;node&#39;}, function () {\n      // 关系图的节点被点击时此方法被回调。\n  });\n  chart.on(&#39;click&#39;, {dataType: &#39;edge&#39;}, function () {\n      // 关系图的边被点击时此方法被回调。\n  });\n</code></pre>\n<p>  例如:</p>\n<pre><code class=\"lang-js\">  chart.setOption({\n      // ...\n      series: {\n          // ...\n          type: &#39;custom&#39;,\n          renderItem: function (params, api) {\n              return {\n                  type: &#39;group&#39;,\n                  children: [{\n                      type: &#39;circle&#39;,\n                      name: &#39;my_el&#39;,\n                      // ...\n                  }, {\n                      // ...\n                  }]\n              }\n          },\n          data: [[12, 33]]\n      }\n  })\n  chart.on(&#39;mouseup&#39;, {element: &#39;my_el&#39;}, function () {\n      // name 为 &#39;my_el&#39; 的元素被 &#39;mouseup&#39; 时,此方法被回调。\n  });\n</code></pre>\n</li>\n<li><p><code>handler</code></p>\n<p>  事件处理函数。格式为:</p>\n<pre><code class=\"lang-js\">  (event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p>  可选。回调函数内部的<code>context</code>,即<code>this</code>的指向。</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>解绑事件处理函数。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p>  事件名称。</p>\n</li>\n<li><p><code>handler</code></p>\n<p>  可选,可以传入需要解绑的处理函数,不传的话解绑所有该类型的事件函数。</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『使用哪个坐标系进行转换』。\n    // 通常地,可以使用 index 或者 id 或者 name 来定位。\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string\n        gridName?: string\n    },\n    // 要被转换的值。\n    value: Array|string\n    // 转换的结果为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n) =&gt; Array|string\n</code></pre>\n<p>转换坐标系上的点到像素坐标值。</p>\n<p>例:</p>\n<p>在地理坐标系(<a href=\"option.html#geo\" target=\"_blank\">geo</a>)上,把某个点的经纬度坐标转换成为像素坐标:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] 表示 [经度,纬度]。\n// 使用第一个 geo 坐标系进行转换:\nchart.convertToPixel(&#39;geo&#39;, [128.3324, 89.5344]); // 参数 &#39;geo&#39; 等同于 {geoIndex: 0}\n// 使用第二个 geo 坐标系进行转换:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// 使用 id 为 &#39;bb&#39; 的 geo 坐标系进行转换:\nchart.convertToPixel({geoId: &#39;bb&#39;}, [128.3324, 89.5344]);\n</code></pre>\n<p>在直角坐标系(cartesian,<a href=\"option.html#grid\" target=\"_blank\">grid</a>)上,把某个点的坐标转换成为像素坐标:</p>\n<pre><code class=\"lang-js\">// [300, 900] 表示该点 x 轴上对应刻度值 300,y 轴上对应刻度值 900。\n// 注意,一个 grid 可能含有多个 xAxis 和多个 yAxis,任何一对 xAxis-yAxis 形成一个 cartesian。\n// 使用第三个 xAxis 和 id 为 &#39;y1&#39; 的 yAxis 形成的 cartesian 进行转换:\nchart.convertToPixel({xAxisIndex: 2, yAxisId: &#39;y1&#39;}, [300, 900]);\n// 使用 id 为 &#39;g1&#39; 的 grid 的第一个 cartesian 进行转换:\nchart.convertToPixel({gridId: &#39;g1&#39;}, [300, 900]);\n</code></pre>\n<p>把某个坐标轴的点转换成像素坐标:</p>\n<pre><code class=\"lang-js\">// id 为 &#39;x0&#39; 的 xAxis 的刻度 3000 位置所对应的横向像素位置:\nchart.convertToPixel({xAxisId: &#39;x0&#39;}, 3000); // 返回一个 number。\n// 第二个 yAxis 的刻度 600 位置所对应的纵向像素位置:\nchart.convertToPixel({yAxisIndex: 1}, 600); // 返回一个 number。\n</code></pre>\n<p>把关系图(<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>)的点转换成像素坐标:</p>\n<pre><code class=\"lang-js\">// 因为每个 graph series 自己持有一个坐标系,所以我们直接在 finder 中指定 series:\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: &#39;k2&#39;}, [100, 500]);\n</code></pre>\n<p>在某个系列所在的坐标系(无论是 cartesian、geo、graph 等)中,转换某点成像素坐标:</p>\n<pre><code class=\"lang-js\">// 使用第一个系列对应的坐标系:\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// 使用 id 为 &#39;k2&#39; 的系列所对应的坐标系:\nchart.convertToPixel({seriesId: &#39;k2&#39;}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『使用哪个坐标系进行转换』。\n    // 通常地,可以使用 index 或者 id 或者 name 来定位。\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string\n        gridName?: string\n    },\n    // 要被转换的值,为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n    value: Array|string\n    // 转换的结果,为逻辑坐标值。\n) =&gt; Array|string\n</code></pre>\n<p>转换像素坐标值到逻辑坐标系上的点。是 <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a> 的逆运算。\n具体实例可参考 <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>。</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『在哪个坐标系或者系列上判断』。\n    // 通常地,可以使用 index 或者 id 或者 name 来定位。\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string\n        gridName?: string\n    },\n    // 要被判断的点,为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n    value: Array\n) =&gt; boolean\n</code></pre>\n<p>判断给定的点是否在指定的坐标系或者系列上。</p>\n<p>目前支持在这些坐标系和系列上进行判断:<a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>。</p>\n<p>例:</p>\n<pre><code class=\"lang-js\">// 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。\nchart.containPixel(&#39;geo&#39;, [23, 44]); // &#39;geo&#39; 等同于 {geoIndex: 0}\n// 判断 [23, 44] 点是否在 gridId 为 &#39;z&#39; 的 grid 上。\nchart.containPixel({gridId: &#39;z&#39;}, [23, 44]);\n// 判断 [23, 44] 点是否在 index 为 1,4,5 的系列上。\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// 判断 [23, 44] 点是否在 index 为 1,4,5 的系列或者 gridName 为 &#39;a&#39; 的 grid 上。\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: &#39;a&#39;}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>显示加载动画效果。可以在加载数据前手动调用改接口显示加载动画,在数据加载完成后调用 <a href=\"#echartsInstance.hideLoading\">hideLoading</a> 隐藏加载动画。</p>\n<p><strong>参数:</strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p>  可选,加载动画类型,目前只有一种<code>&#39;default&#39;</code></p>\n</li>\n<li><p><code>opts</code></p>\n<p>  可选,加载动画配置项,跟<code>type</code>有关,下面是默认配置项:</p>\n<pre><code class=\"lang-js\">default: {\n  text: &#39;loading&#39;,\n  color: &#39;#c23531&#39;,\n  textColor: &#39;#000&#39;,\n  maskColor: &#39;rgba(255, 255, 255, 0.8)&#39;,\n  zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>隐藏动画加载效果。</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 导出的格式,可选 png, jpeg\n    type?: string,\n    // 导出的图片分辨率比例,默认为 1。\n    pixelRatio?: number,\n    // 导出的图片背景色,默认使用 option 里的 backgroundColor\n    backgroundColor?: string,\n    // 忽略组件的列表,例如要忽略 toolbox 就是 [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>导出图表图片,返回一个 base64 的 URL,可以设置为<code>Image</code>的<code>src</code>。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n    pixelRatio: 2,\n    backgroundColor: &#39;#fff&#39;\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 导出的格式,可选 png, jpeg\n    type?: string,\n    // 导出的图片分辨率比例,默认为 1。\n    pixelRatio?: number,\n    // 导出的图片背景色,默认使用 option 里的 backgroundColor\n    backgroundColor?: string,\n    // 忽略组件的列表,例如要忽略 toolbox 就是 [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>导出联动的图表图片,返回一个 base64 的 url,可以设置为<code>Image</code>的<code>src</code>。导出图片中每个图表的相对位置跟容器的相对位置有关。</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 要增加数据的系列序号。\n    seriesIndex?: string,\n    // 增加的数据。\n    data?: Array|TypedArray,\n}) =&gt; string\n</code></pre>\n<p>此接口用于,在大数据量(百万以上)的渲染场景,分片加载数据和增量渲染。在大数据量的场景下(例如地理数的打点),就算数据使用二进制格式,也会有几十或上百兆,在互联网环境下,往往需要分片加载。<code>appendData</code> 接口提供了分片加载后增量渲染的能力,渲染新加如的数据块时不会清除原有已经渲染的部分。</p>\n<p>注意:</p>\n<ul>\n<li>现在不支持 <a href=\"option.html#series\" target=\"_blank\">系列(series)</a> 使用 <a href=\"option.html#dataset\" target=\"_blank\">dataset</a> 同时使用 <code>appendData</code>,只支持系列使用自己的 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 时使用 <code>appendData</code>。</li>\n<li>目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有:ECharts 基础版本的 <a href=\"option.html#series-scatter\" target=\"_blank\">散点图(scatter)</a> 和 <a href=\"option-gl.html#series-linesGL\" target=\"_blank\">线图(lines)</a>。ECharts GL 的 <a href=\"option-gl.html#series-scatterGL\" target=\"_blank\">散点图(scatterGL)</a>、<a href=\"option-gl.html#series-lines3D\" target=\"_blank\">线图(linesGL)</a> 和 <a href=\"ooption-gl.html#series-polygons3D\" target=\"_blank\">可视化建筑群(polygons3D)</a>。</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>清空当前实例,会移除实例中所有的组件和图表。清空后调用 <a href=\"#echartsInstance.getOption\">getOption</a> 方法返回一个<code>{}</code>空对象。</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() =&gt; boolean\n</code></pre>\n<p>当前实例是否已经被释放。</p>\n"},"dispose":{"type":["*"],"description":"<p>销毁实例,销毁后实例无法再被使用。</p>\n"}}},"action":{"type":["*"],"description":"<p>ECharts 中支持的图表行为,通过 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 触发。</p>\n<p><strong>注:</strong> 代码中的 <code>?:</code> 表示该属性是可选的。<em>EVENT:</em> 是 action 对应触发的事件。</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>高亮指定的数据图形。</p>\n<p>通过<code>seriesName</code>或者<code>seriesIndex</code>指定系列。如果要再指定某个数据可以再指定<code>dataIndex</code>或者<code>name</code>。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;highlight&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 可选,数据的 index\n    dataIndex?: number,\n    // 可选,数据的 名称\n    name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>取消高亮指定的数据图形。</p>\n<p>通过<code>seriesName</code>或者<code>seriesIndex</code>指定系列。如果要指定某个数据可以再指定<code>dataIndex</code>或者<code>name</code>。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;downplay&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 可选,数据的 index\n    dataIndex?: number,\n    // 可选,数据的 名称\n    name?: string\n})\n</code></pre>\n<!--============= legend ==========-->"},"legend":{"type":["*"],"description":"<p><a href=\"option.html#legend\" target=\"_blank\">图例组件</a>相关的行为,必须引入<a href=\"option.html#legend\" target=\"_blank\">图例组件</a>后才能使用。</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>选中图例。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendSelect&#39;,\n    // 图例名称\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>取消选中图例。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendUnSelect&#39;,\n    // 图例名称\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>切换图例的选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendToggleSelect&#39;,\n    // 图例名称\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>控制图例的滚动。当 <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendScroll&#39;,\n    scrollDataIndex: number,\n    legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->"}}},"tooltip":{"type":["*"],"description":"<p><a href=\"option.html#tooltip\" target=\"_blank\">提示框组件</a>相关的行为,必须引入<a href=\"option.html#tooltip\" target=\"_blank\">提示框组件</a>后才能使用。</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>显示提示框。</p>\n<p>有下面两种使用方式。</p>\n<p>1 指定在相对容器的位置处显示提示框,如果指定的位置无法显示则无效。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 屏幕上的 x 坐标\n    x: number,\n    // 屏幕上的 y 坐标\n    y: number,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: Array.&lt;number&gt;|string|Function\n})\n</code></pre>\n<p>2 指定数据图形,根据 tooltip 的配置项显示提示框。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。\n    seriesIndex?: number,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: Array.&lt;number&gt;|string|Function,\n})\n</code></pre>\n<p>参数<code>position</code>同<a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>相同。</p>\n"},"hideTip":{"type":["Action"],"description":"<p>隐藏提示框。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;hideTip&#39;\n})\n</code></pre>\n<!--============= dataZoom ==========-->"}}},"dataZoom":{"type":["*"],"description":"<p><a href=\"option.html#dataZoom\" target=\"_blank\">数据区域缩放组件</a>相关的行为,必须引入<a href=\"option.html#dataZoom\" target=\"_blank\">数据区域缩放组件</a>后才能使用。</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>数据区域缩放。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;dataZoom&#39;,\n    // 可选,dataZoom 组件的 index,多个 dataZoom 组件时有用,默认为 0\n    dataZoomIndex: number,\n    // 开始位置的百分比,0 - 100\n    start: number,\n    // 结束位置的百分比,0 - 100\n    end: number,\n    // 开始位置的数值\n    startValue: number,\n    // 结束位置的数值\n    endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n<!--============= visualMap ==========-->"}}},"visualMap":{"type":["*"],"description":"<p><a href=\"option.html#visualMap\" target=\"_blank\">视觉映射组件</a>相关的行为,必须引入<a href=\"option.html#visualMap\" target=\"_blank\">视觉映射组件</a>后才能使用。</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>选取映射的数值范围。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // 可选,visualMap 组件的 index,多个 visualMap 组件时有用,默认为 0\n    visualMapIndex: number,\n    // 连续型 visualMap 和 离散型 visualMap 不一样\n    // 连续型的是一个表示数值范围的数组。\n    // 离散型的是一个对象,键值是类目或者分段的索引。值是 `true`, `false`\n    selected: Object|Array\n})\n</code></pre>\n<p>å\n<strong>示例:</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // 选取 20 到 40 的值范围\n    selected: [20, 40],\n    // 取消选中第二段\n    selected: { 1: false },\n    // 取消选中类目 `优`\n    selected: { &#39;优&#39;: false }\n});\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->"}}},"timeline":{"type":["*"],"description":"<p><a href=\"option.html#timeline\" target=\"_blank\">时间轴组件</a>相关的行为,必须引入<a href=\"option.html#timeline\" target=\"_blank\">时间轴组件</a>后才能使用。</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>设置当前的时间点。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;timelineChange&#39;,\n    // 时间点的 index\n    currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>切换时间轴的播放状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;timelinePlayChange&#39;,\n    // 播放状态,true 为自动播放\n    playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->"}}},"toolbox":{"type":["*"],"description":"<p><a href=\"option.html#toolbox\" target=\"_blank\">工具栏组件</a>相关的行为,必须引入<a href=\"option.html#toolbox\" target=\"_blank\">工具栏组件</a>后才能使用。</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>重置 option。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;restore&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p><a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>相关的行为,必须引入<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>后才能使用。</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>选中指定的饼图扇形。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>取消选中指定的饼图扇形。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieUnSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>切换指定的饼图扇形选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieToggleSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= geo ==========-->"}}},"geo":{"type":["*"],"description":"<p><a href=\"option.html#series-geo\" target=\"_blank\">地图组件</a>相关的行为,必须引入<a href=\"option.html#geo\" target=\"_blank\">地图组件</a>后才能使用。</p>\n","properties":{"geoSelect":{"type":["Action"],"description":"<p>选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselected\">geoselected</a></p>\n"},"geoUnSelect":{"type":["Action"],"description":"<p>取消选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoUnSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geounselected\">geounselected</a></p>\n"},"geoToggleSelect":{"type":["Action"],"description":"<p>切换指定的地图区域选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoToggleSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselectchanged\">geoselectchanged</a></p>\n<!--============= map ==========-->"}}},"map":{"type":["*"],"description":"<p><a href=\"option.html#series-map\" target=\"_blank\">地图图表</a>相关的行为,必须引入<a href=\"option.html#series-map\" target=\"_blank\">地图图表</a>后才能使用。</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>取消选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapUnSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>切换指定的地图区域选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapToggleSelect&#39;,\n    // 可选,系列 index,可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选,系列名称,可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选,数据名称,在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->"}}},"graph":{"type":["*"],"description":"<p><a href=\"option.html#series-graph\" target=\"_blank\">关系图</a> 相关的行为,必须引入 <a href=\"option.html#series-graph\" target=\"_blank\">关系图</a> 后才能使用。</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>将指定的节点以及其所有邻接节点高亮。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;focusNodeAdjacency&#39;,\n\n    // 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;,\n\n    // 使用 dataIndex 来定位节点。\n    dataIndex: 12\n})\n</code></pre>\n<p>最后会抛出 <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> 事件。</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>将指定的节点以及其所有邻接节点高亮。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;unfocusNodeAdjacency&#39;,\n\n    // 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;\n})\n</code></pre>\n<p>最后会抛出 <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> 事件。</p>\n<!--============= brush ==========-->"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">区域选择</a>相关的行为。</p>\n","properties":{"brush":{"type":["*"],"description":"<p>触发此 action 可向 echarts 中添加一个或多个选框,例如:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n    type: &#39;brush&#39;,\n    areas: [ // areas 表示选框的集合,可以指定多个选框。\n        { // 选框一:\n            geoIndex: 0, // 指定此选框属于 index 为 0 的 geo 坐标系。\n                         // 也可以通过 xAxisIndex 或 yAxisIndex 来指定此选框属于直角坐标系。\n                         // 如果没有指定,则此选框属于『全局选框』。不属于任何坐标系。\n                         // 属于『坐标系选框』,可以随坐标系一起缩放平移。属于全局的选框不行。\n            brushType: &#39;polygon&#39;, // 指定选框的类型。还可以为 &#39;rect&#39;, &#39;lineX&#39;, &#39;lineY&#39;\n            range: [ // 如果是『全局选框』,则使用 range 来描述选框的范围。\n                ...\n            ],\n            coordRange: [ // 如果是『坐标系选框』,则使用 coordRange 来指定选框的范围。\n                [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n                // 这个例子中,因为指定了 geoIndex,所以 coordRange 里单位是经纬度。\n            ]\n        },\n        ... // 选框二、三、四、...\n    ]\n});\n</code></pre>\n<p>其中,<code>areas</code> 中的 <code>range</code> 和 <code>coordRange</code> 的格式,根据 brushType 不同而不同:</p>\n<ul>\n<li>brushType 为 &#39;rect&#39;\n  <code>range</code> 和 <code>coordRange</code> 的格式为:<code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>brushType 为 &#39;lineX&#39; 或 &#39;lineY&#39;\n  <code>range</code> 和 <code>coordRange</code> 的格式为:[min, maxX]</li>\n<li>brushType 为 &#39;polygon&#39;\n  <code>range</code> 和 <code>coordRange</code> 的格式为:[[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p><code>range</code> 和 <code>coordRange</code> 的区别是:</p>\n<ul>\n<li>当此选框为『全局选框』时,使用 <code>range</code>。</li>\n<li>当此选框为『坐标系选框』时(即指定了 <code>geoIndex</code> 或 <code>xAxisIndex</code> 或 <code>yAxisIndex</code> 时),使用 <code>coordRange</code>。</li>\n<li><code>range</code> 的单位为 <em>像素</em>,<code>coordRange</code> 的单位为 <em>坐标系单位</em>,比如 geo 中,<code>coordRange</code> 单位为经纬度,直角坐标系中,coordRange 单位为对应轴的数据的单位。</li>\n</ul>\n"}}}}},"events":{"type":["*"],"description":"<p>在 ECharts 中主要通过 <a href=\"#echartsInstance.on\">on</a> 方法添加事件处理函数,该文档描述了所有 ECharts 的事件列表。</p>\n<p>ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发的事件。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">myChart.on(&#39;click&#39;, function (params) {\n    console.log(params);\n});\n\nmyChart.on(&#39;legendselectchanged&#39;, function (params) {\n    console.log(params);\n});\n</code></pre>\n","properties":{"鼠标事件":{"type":["*"],"description":"<p>鼠标事件的事件参数是事件对象的数据的各个属性,对于图表的点击事件,基本参数如下,其它图表诸如饼图可能会有部分附加参数。例如饼图会有<code>percent</code>属性表示百分比,具体见各个图表类型的 label formatter 回调函数的 <code>params</code>。</p>\n<pre><code class=\"lang-js\">{\n    // 当前点击的图形元素所属的组件名称,\n    // 其值如 &#39;series&#39;、&#39;markLine&#39;、&#39;markPoint&#39;、&#39;timeLine&#39; 等。\n    componentType: string,\n    // 系列类型。值可能为:&#39;line&#39;、&#39;bar&#39;、&#39;pie&#39; 等。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesType: string,\n    // 系列在传入的 option.series 中的 index。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesIndex: number,\n    // 系列名称。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesName: string,\n    // 数据名,类目名\n    name: string,\n    // 数据在传入的 data 数组中的 index\n    dataIndex: number,\n    // 传入的原始数据项\n    data: Object,\n    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,\n    // dataType 的值会是 &#39;node&#39; 或者 &#39;edge&#39;,表示当前点击在 node 还是 edge 上。\n    // 其他大部分图表中只有一种 data,dataType 无意义。\n    dataType: string,\n    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色。当 componentType 为 &#39;series&#39; 时有意义。\n    color: string,\n    // 用户自定义的数据。只在 graphic component 和自定义系列(custom series)\n    // 中生效,如果节点定义上设置了如:{type: &#39;circle&#39;, info: {some: 123}}。\n    info: *\n}\n</code></pre>\n<p>鼠标事件包括<code>&#39;click&#39;</code>,<code>&#39;dblclick&#39;</code>,<code>&#39;mousedown&#39;</code>,<code>&#39;mouseup&#39;</code>,<code>&#39;mouseover&#39;</code>,<code>&#39;mouseout&#39;</code>,<code>&#39;globalout&#39;</code>,<code>&#39;contextmenu&#39;</code>。</p>\n<p>参见 <a href=\"http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA\" target=\"_blank\">ECharts 中的事件和行为</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\n切换图例选中状态后的事件。</p>\n<p><strong>注:</strong>图例组件用户切换图例开关会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendselectchanged&#39;,\n    // 切换的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\n图例选中后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendselected&#39;,\n    // 选中的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 中用户开关图例对应的事件从 <code>legendselected</code> 改为 <a href=\"#events.legendselectchanged\">legendselectchanged</a>。</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\n图例取消选中后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendunselected&#39;,\n    // 取消选中的图例名称\n    name: string\n    // 所有图例的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\n图例滚动事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendscroll&#39;,\n    scrollDataIndex: number\n    legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>数据区域缩放后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;datazoom&#39;,\n    // 缩放的开始位置的百分比,0 - 100\n    start: number\n    // 缩放的结束位置的百分比,0 - 100\n    end: number\n    // 缩放的开始位置的数值,只有在工具栏的缩放行为的事件中存在。\n    startValue?: number\n    // 缩放的结束位置的数值,只有在工具栏的缩放行为的事件中存在。\n    endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\n视觉映射组件中,<code>range</code> 值改变后触发的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;datarangeselected&#39;,\n    // 连续型 visualMap 和 离散型 visualMap 不一样\n    // 连续型的是一个表示数值范围的数组。\n    // 离散型的是一个对象,键值是类目或者分段的索引。值是`true`或`false`\n    selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\n时间轴中的时间点改变后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;timelinechanged&#39;,\n    // 时间点的 index\n    currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\n时间轴中播放状态的切换事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;timelineplaychanged&#39;,\n    // 播放状态,true 为自动播放\n    playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\n重置 option 事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;restore&#39;\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p><a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">工具栏中数据视图</a>的修改事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;dataviewchanged&#39;\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p><a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">工具栏中动态类型切换</a>的切换事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;magictypechanged&#39;,\n    // 点击切换的当前类型,同 echarts 2.x 中的 type 属性\n    currentType: string\n}\n</code></pre>\n"},"geoselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoToggleSelect\">geoToggleSelect</a></p>\n<p><a href=\"option.html#geo\" target=\"_blank\">geo</a> 中地图区域切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geoselectchanged&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"geoselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoSelect\">geoSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">geo</a> 中地图区域选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.geoselectchanged\">geoselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geoselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"geounselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoUnSelect\">geoUnSelect</a></p>\n<p><a href=\"option.html#geo\" target=\"_blank\">geo</a> 中地图区域取消选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.geoselectchanged\">geoselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geounselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a> 中饼图扇形切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselectchanged&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> 该事件同 ECharts 2 中的 <code>pieSelected</code> 事件相同。</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">series-pie</a> 中饼图扇形选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.pieselectchanged\">pieselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 中用户开关图例对应的事件从 <code>pieselected</code> 改为 <a href=\"#events.pieselectchanged\">pieselectchanged</a>。</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a> 中饼图扇形取消选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.pieselectchanged\">pieselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieunselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p><a href=\"option.html#series-map\" target=\"_blank\">series-map</a> 中地图区域切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselectchanged&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> 该事件同 ECharts 2 中的 <code>mapSelected</code> 事件相同。</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">series-map</a> 中地图区域选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.mapselectchanged\">mapselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 中用户开关图例对应的事件从 <code>mapselected</code> 改为 <a href=\"#events.mapselectchanged\">mapselectchanged</a>。</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p><a href=\"option.html#series-map\" target=\"_blank\">series-map</a> 中地图区域取消选中后的事件。</p>\n<p>使用<code>dispatchAction</code>可触发此事件,用户点击不会触发此事件(用户点击事件请使用 <a href=\"#events.mapselectchanged\">mapselectchanged</a>)。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapunselected&#39;,\n    // 系列 ID,可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p><a href=\"option.html#parallelAxis\" target=\"_blank\">平行坐标轴 (Parallel)</a>范围选取事件。</p>\n<p>当进行坐标轴范围选取时,可以用如下方式获取当前高亮的线所对应的 data indices\n(即 <code>series</code> 的 <code>data</code> 中的序号列表)。</p>\n<pre><code class=\"lang-javascript\">chart.on(&#39;axisareaselected&#39;, function () {\n    var series0 = chart.getModel().getSeries()[0];\n    var series1 = chart.getModel().getSeries()[1];\n    var indices0 = series0.getRawIndicesByActiveState(&#39;active&#39;);\n    var indices1 = series1.getRawIndicesByActiveState(&#39;active&#39;);\n    console.log(indices0, indices1);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p><a href=\"option.html#graph\" target=\"_blank\">graph</a>的邻接节点高亮事件。</p>\n<p>参见<a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>。</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p><a href=\"option.html#graph\" target=\"_blank\">graph</a>的邻接节点取消高亮事件。</p>\n<p>参见<a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>。</p>\n"},"brush":{"type":["Event"],"description":"<p>选框添加事件。即发出 <a href=\"#action.brush\">brush</a> action 得到的事件。</p>\n"},"brushselected":{"type":["Event"],"description":"<p>对外通知当前选中了什么。</p>\n<p>参见 <a href=\"option.html#brush\" target=\"_blank\">区域选择</a>。</p>\n<p>这个事件,在 <code>setOption</code> 时不会发出,在其他的 dispatchAction 时,或者用户在界面中创建、删除、修改选框时会发出。</p>\n<p>事件参数内容为:</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;brushselected&#39;,\n    batch: [\n        {\n            brushIndex: number // brush 组件的id,大多数情况只使用一个 brush 组件,所以不必理会。\n            selected: [ // 每个系列被选中的项。\n                        // 注意,如果某个系列不支持 brush,但是还是会在这里出现对应的项。\n                        // 也就是说,selected 可以使用 seriesIndex 来直接找到对应的项。\n                { // series 0 被选中的项\n                    seriesIndex: number,\n                    dataIndex: [ 3, 6, 12, 23 ] // 用这些 dataIndex,可以去原始数据中找到真正的值。\n                },\n                { // series 1 被选中的项\n                    seriesIndex: number,\n                    dataIndex: []\n                },\n                ...\n            ]\n        },\n        ...\n    ]\n}\n</code></pre>\n<p>事件使用方式例如:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n    [ 12, 23, 54, 6 ], // series 0 的数据\n    [ 34, 34433, 2223, 21122, 1232, 34 ] // series 1 的数据\n];\n\nchart.setOption({\n    ...,\n    brush: {\n        ...\n    },\n    series: [\n        { // series 0\n            data: dataBySeries[0]\n        },\n        { // series 1\n            data: dataBySeries[1]\n        }\n    ]\n});\n\nchart.on(&#39;brushSelected&#39;, function (params) {\n    var brushComponent = params.batch[0];\n\n    var sum = 0; // 统计选中项的数据值的和\n\n    for (var sIdx = 0; sIdx &lt; brushComponent.selected.length; sIdx++) {\n        // 对于每个 series:\n        var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n        for (var i = 0; i &lt; dataIndices.length; i++) {\n            var dataIndex = dataIndices[i];\n            sum += dataBySeries[sIdx][dataIndex];\n        }\n    }\n    console.log(sum); // 用某种方式输出统计值。\n});\n</code></pre>\n<p>如果想<strong>避免此事件频繁触发</strong>,可以使用 <a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a>。</p>\n"},"rendered":{"type":["Event"],"description":"<p>渲染结束事件。注意 <code>rendered</code> 事件并不代表渲染动画(参见 <a href=\"#animation\">animation</a> 相关配置)或者渐进渲染(参见 <a href=\"#series-scatter.progressive\">progressive</a> 相关配置)停止,只代表本帧的渲染结束。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;rendered&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>渲染完成事件。当渲染动画(参见 <a href=\"#animation\">animation</a> 相关配置)或者渐进渲染(参见 <a href=\"#series-scatter.progressive\">progressive</a> 相关配置)停止时触发。</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;finished&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
diff --git a/public/cn/documents/cn/changelog.html b/public/cn/documents/cn/changelog.html
index 81cb576..ac687ca 100644
--- a/public/cn/documents/cn/changelog.html
+++ b/public/cn/documents/cn/changelog.html
@@ -1,4 +1,43 @@
-<h2 id="v4-1-0-rc2">v4.1.0.rc2</h2>
+<h2 id="v4-2-0-rc1">v4.2.0.rc1</h2>
+<div class="time">2018-09-11</div>
+
+<ul>
+<li><p><strong>[Feature] 支持了 non-html tooltip</strong>,在一些不支持 HTML 的环境中,会有用。如微信小程序中。使用 <a href="http://echarts.baidu.com/option.html#tooltip.renderMode">tooltip.renderMode</a> 开启这个功能。</p>
+</li>
+<li><p><strong>[Feature] 鼠标/触摸事件中支持了选择器</strong>,从而能够比较方便得监听指定的组件(component)、系列(series)、数据项(data item)。参见 <a href="http://echarts.baidu.com/api.html#echartsInstance.on">chart.on</a>,新加的 <code>query</code> 参数提供了这个筛选功能。并且为 <a href="http://echarts.baidu.com/option.html#series-custom">自定义系列(custom series)</a> 和 <a href="http://echarts.baidu.com/option.html#graphic.triggerEvent">图形元素组件(graphic component)</a> 支持了鼠标/触摸事件能力,可以用 <code>query</code> 监听指定图形元素的事件。</p>
+</li>
+<li><p><strong>[Feature] 能够使用 dataZoom 实现仿浏览器的滚动条</strong>,参见 <a href="http://echarts.baidu.com/option.html#dataZoom-inside.moveOnMouseWheel">dataZoom-inside.moveOnMouseWheel</a>,以及 <a href="http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight">甘特图例子(Gantt)</a>。</p>
+</li>
+<li><p>[Feature] 在桑基图(sankey)中,当鼠标悬浮到节点或边时,支持临接节点和边的高亮。参见 <a href="http://echarts.baidu.com/option.html#series-sankey.focusNodeAdjacency">focusNodeAdjacency</a>,以及 <a href="http://echarts.baidu.com/examples/editor.html?c=sankey-product">例子</a>。</p>
+</li>
+<li><p>[Feature] 支持树图(tree)的平移和缩放(roam)。参见 <a href="http://echarts.baidu.com/option.html#series-tree.roam">series-tree.roam</a>。</p>
+</li>
+<li><p>[Feature] 支持桑基图(sankey)的纵向布局(vertical)。参见 <a href="http://echarts.baidu.com/option.html#series-sankey.orient">series-sankey.orient</a> 和 <a href="http://echarts.baidu.com/examples/editor.html?c=sankey-vertical">纵向布局桑基图例子</a>。</p>
+</li>
+<li><p>[Feature] 能够在 <a href="http://echarts.baidu.com/option.html#series-custom">自定义系列(custom series)</a> 的 <a href="http://echarts.baidu.com/option.html#series-custom.encode">encode</a> 中设置某个轴为 <code>-1</code>,意思是这个轴,以及它所对应的 dataZoom 组件,不控制这个系列数据(不用此系列计算轴的范围也不缩放过滤此系列)。参见 <a href="http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight">甘特图例子(Gantt)</a>。</p>
+</li>
+<li><p>[Feature] 支持在 <a href="http://echarts.baidu.com/option.html#series-custom">自定义系列(custom series)</a> 的 <a href="http://echarts.baidu.com/option.html#series-custom.renderItem.return_path.shape.layout">path shape</a> 中使用 <code>&#39;cover&#39;</code> 模式,从而便捷得使用 <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG PathData</a> 创建图形形状。参见 <a href="http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight">甘特图例子(Gantt)</a>。</p>
+</li>
+<li><p>[Feature] 增加了一些 <a href="http://echarts.baidu.com/option.html#series-custom">自定义系列(custom series)</a> 的属性和参数:增加了 <a href="http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params">params.actionType</a>,能够用此参数进行一些性能优化。在 geo 坐标系中增加了 <a href="http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params">params.coordSys.zoom</a>。在图形定义中增加了 <a href="http://echarts.baidu.com/option.html#series-custom.renderItem.return_text.invisible">invisible</a> 和<a href="http://echarts.baidu.com/option.html#series-custom.renderItem.return_text.ignore">ignore</a>,能够操作图形元素的显示和隐藏。</p>
+</li>
+<li><p>[Feature] 在 <a href="http://echarts.baidu.com/option.html#radar.radius">雷达图(radar)</a> 中支持了内半径设置。参见 <a href="https://github.com/apache/incubator-echarts/issues/8717">#8717</a>。</p>
+</li>
+<li><p>[Fix] 修复了极坐标(polar)中类目轴(category axis)interval 问题。参见 <a href="https://github.com/apache/incubator-echarts/issues/8791">#8791</a>。</p>
+</li>
+<li><p>[Fix] 不再支持在系列中设置极坐标(polar)的 center。Center 应该设置在 <a href="http://echarts.baidu.com/option.html#polar.center">polar.center</a> 中。</p>
+</li>
+<li><p>[Fix] 更新了 <a href="http://echarts.baidu.com/option.html#series-sunburst">sunburst</a> 的默认阴影样式。参见 <a href="https://github.com/apache/incubator-echarts/issues/8583">#8583</a>。</p>
+</li>
+<li><p>[Fix] 修复了 <a href="http://echarts.baidu.com/option.html#dataset">dataset</a> 中的空值问题。参见 <a href="https://github.com/apache/incubator-echarts/issues/8395">#8395</a>。</p>
+</li>
+<li><p>[Fix] 修复了柱状图(bar)中多轴存在时柱子起点的问题。参见 <a href="https://github.com/apache/incubator-echarts/issues/8747">#8747</a>。</p>
+</li>
+<li><p>[Fix] 为了动画扩展,移除了 clipPath。参见 <a href="https://github.com/apache/incubator-echarts/issues/8994">#8994</a>。</p>
+</li>
+<li><p>[Fix] 修复了当多个 Y 轴在同一 X 轴上时,Y 轴可能重叠的问题。参见 <a href="https://github.com/apache/incubator-echarts/issues/8975">#8975</a>。</p>
+</li>
+</ul>
+<h2 id="v4-1-0">v4.1.0</h2>
 <div class="time">2018-05-02</div>
 
 <ul>
@@ -155,7 +194,7 @@
 </li>
 <li><p>[+] <strong>发布旭日图(sunburst)</strong>,高效表达带有层次结构的数据占比情况,并有良好的交互体验。参见旭日图<a href="http://echarts.baidu.com/examples/index.html#chart-type-sunburst">例子</a>和<a href="http://echarts.baidu.com/option.html#series-sunburst">文档</a>。</p>
 </li>
-<li><p>[+] <strong>新增 <a href="http://echarts.baidu.com/tutorial.html#%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88dataset%EF%BC%89">dataset</a> 组件</strong>,从而能够数据与样式分离,便于单独管理数据,支持数据映射到视觉配置,可以多个系列共享数据,也省去数据分割处理的步骤。</p>
+<li><p>[+] <strong>新增 <a href="http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE">dataset</a> 组件</strong>,从而能够数据与样式分离,便于单独管理数据,支持数据映射到视觉配置,可以多个系列共享数据,也省去数据分割处理的步骤。</p>
 </li>
 <li><p>[+] <strong>支持无障碍富互联网应用规范集(WAI-ARIA,the Accessible Rich Internet Applications Suite)</strong>,致力于使得网⻚内容和网⻚应,用能够被更多残障人士访问。</p>
 </li>
diff --git a/public/cn/documents/cn/option.json b/public/cn/documents/cn/option.json
index fd04e7f..b54e465 100644
--- a/public/cn/documents/cn/option.json
+++ b/public/cn/documents/cn/option.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"title":{"type":["Object"],"description":"<p>标题组件,包含主标题和副标题。</p>\n<p>在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用。</p>\n<p><strong>例如下面不同缓动函数效果的示例,每一个缓动效果图都带有一个标题组件:</strong></p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=line-easing&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"show":{"type":["boolean"],"description":"<p>是否显示标题组件。</p>\n","default":true},"text":{"type":["string"],"description":"<p>主标题文本,支持使用 <code>\\n</code> 换行。</p>\n","default":"''"},"link":{"type":["string"],"description":"<p>主标题文本超链接。</p>\n","default":"''"},"target":{"type":["string"],"description":"<p>指定窗口打开主标题超链接。</p>\n<p><strong>可选:</strong></p>\n<ul>\n<li><p><code>&#39;self&#39;</code> 当前窗口打开</p>\n</li>\n<li><p><code>&#39;blank&#39;</code> 新窗口打开</p>\n</li>\n</ul>\n","default":"'blank'"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>主标题文字的颜色。</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p>主标题文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>主标题文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>主标题文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>主标题文字的字体大小</p>\n","default":18},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}},"subtext":{"type":["string"],"description":"<p>副标题文本,支持使用 <code>\\n</code> 换行。</p>\n","default":"''"},"sublink":{"type":["string"],"description":"<p>副标题文本超链接。</p>\n","default":"''"},"subtarget":{"type":["string"],"description":"<p>指定窗口打开副标题超链接,可选:</p>\n<ul>\n<li><p><code>&#39;self&#39;</code> 当前窗口打开</p>\n</li>\n<li><p><code>&#39;blank&#39;</code> 新窗口打开</p>\n</li>\n</ul>\n","default":"'blank'"},"subtextStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>副标题文字的颜色。</p>\n","default":"'#aaa'"},"fontStyle":{"type":["string"],"description":"<p>副标题文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>副标题文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>副标题文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>副标题文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}},"padding":{"type":["number"],"description":"<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","default":5},"itemGap":{"type":["number"],"description":"<p>主副标题之间的间距。</p>\n","default":10},"zlevel":{"type":["number"],"description":"<p>所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>grid 组件离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>。</p>\n<p>如果 <code>left</code> 的值为<code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>grid 组件离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>。</p>\n<p>如果 <code>top</code> 的值为<code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>grid 组件离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>grid 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n","default":"'auto'"},"backgroundColor":{"type":["Color"],"description":"<p>标题背景色,默认透明。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>   ,如果想要加上 alpha 通道,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code></p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>标题的边框颜色。支持的颜色格式同 backgroundColor。</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>标题的边框线宽。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。\n如:</p>\n<pre><code>borderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code> 以及值不为 <code>tranparent</code> 的背景色 <code>backgroundColor</code>。</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":0}}},"legend":{"type":["Object"],"description":"<p>图例组件。</p>\n<p>图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。</p>\n<p>ECharts 3 中单个 echarts 实例中可以存在多个图例组件,会方便多个图例的布局。</p>\n<p>当图例数量过多时,可以使用 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>,参见:<a href=\"#legend.type\">legend.type</a></p>\n","properties":{"type":{"type":["string"],"description":"<p>图例的类型。可选值:</p>\n<ul>\n<li><code>&#39;plain&#39;</code>:普通图例。缺省就是普通图例。</li>\n<li><code>&#39;scroll&#39;</code>:可滚动翻页的图例。当图例数量较多时可以使用。</li>\n</ul>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n<p>当使用 <code>&#39;scroll&#39;</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"},"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"show":{"type":["boolean"],"description":"","default":true},"zlevel":{"type":["number"],"description":"<p>所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>图例组件离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>。</p>\n<p>如果 <code>left</code> 的值为<code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>图例组件离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>。</p>\n<p>如果 <code>top</code> 的值为<code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>图例组件离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>图例组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>图例组件的宽度。默认自适应。</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>图例组件的高度。默认自适应。</p>\n","default":"'auto'"},"orient":{"type":["string"],"description":"<p>图例列表的布局朝向。</p>\n<p>可选:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n","default":"'horizontal'"},"align":{"type":["string"],"description":"<p>图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的 <a href=\"#legend.left\">left</a> 值为 &#39;right&#39; 以及纵向布局(<a href=\"#legend.orient\">orient</a> 为  &#39;vertical&#39;)的时候为右对齐,及为 &#39;right&#39;。</p>\n<p>可选:</p>\n<ul>\n<li>&#39;auto&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n","default":"'auto'"},"padding":{"type":["number"],"description":"<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","default":5},"itemGap":{"type":["number"],"description":"<p>图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。</p>\n","default":10},"itemWidth":{"type":["number"],"description":"<p>图例标记的图形宽度。</p>\n","default":25},"itemHeight":{"type":["number"],"description":"<p>图例标记的图形高度。</p>\n","default":14},"symbolKeepAspect":{"type":["boolean"],"description":"<p>如果图标(可能来自系列的 <code>symbol</code> 或用户自定义的 <code>legend.data.icon</code>)是 <code>path://</code> 的形式,是否在缩放时保持该图形的长宽比。</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>用来格式化图例文本,支持字符串模板和回调函数两种形式。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为图例名称 {name}\nformatter: &#39;Legend {name}&#39;\n// 使用回调函数\nformatter: function (name) {\n    return &#39;Legend &#39; + name;\n}\n</code></pre>\n","default":null},"selectedMode":{"type":["string","boolean"],"description":"<p>图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 <code>false</code> 关闭。</p>\n<p>除此之外也可以设成 <code>&#39;single&#39;</code> 或者  <code>&#39;multiple&#39;</code> 使用单选或者多选模式。</p>\n","default":true},"inactiveColor":{"type":["Color"],"description":"<p>图例关闭时的颜色。</p>\n","default":"'#ccc'"},"selected":{"type":["Object"],"description":"<p>图例选中状态表。</p>\n<p>示例:</p>\n<pre><code>selected: {\n    // 选中&#39;系列1&#39;\n    &#39;系列1&#39;: true,\n    // 不选中&#39;系列2&#39;\n    &#39;系列2&#39;: false\n}\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>图例的公用文本样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}},"tooltip":{"type":["Object"],"description":"<p>图例的 tooltip 配置,配置项同 <a href=\"#tooltip\">tooltip</a>。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip,如下示例:</p>\n<pre><code class=\"lang-js\">legend: {\n    formatter: function (name) {\n        return echarts.format.truncateText(name, 40, &#39;14px Microsoft Yahei&#39;, &#39;…&#39;);\n    },\n    tooltip: {\n        show: true\n    }\n}\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 <code>name</code>(如果是<a href=\"#series-pie\">饼图</a>,也可以是饼图单个数据的 <code>name</code>)。图例组件会自动根据对应系列的图形标记(symbol)来绘制自己的颜色和标记,特殊字符串 <code>&#39;&#39;</code>(空字符串)或者 <code>&#39;\\n&#39;</code>(换行字符串)用于图例的换行。</p>\n<p>如果 <code>data</code> 没有被指定,会自动从当前系列中获取。多数系列会取自 <a href=\"#series.name\">series.name</a> 或者 <a href=\"#series.encode\">series.encode</a> 的 <code>seriesName</code> 所指定的维度。如 <a href=\"#series-pie\">饼图</a> and <a href=\"#series-funnel\">漏斗图</a> 等会取自 series.data 中的 name。</p>\n<p>如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 <code>name</code> 属性对应表示系列的 <code>name</code>。</p>\n<p>示例</p>\n<pre><code>data: [{\n    name: &#39;系列1&#39;,\n    // 强制设置图形为圆。\n    icon: &#39;circle&#39;,\n    // 设置文本为红色\n    textStyle: {\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>图例项的名称,应等于某系列的<code>name</code>值(如果是饼图,也可以是饼图单个数据的 <code>name</code>)。</p>\n"},"icon":{"type":["string"],"description":"<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括 \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code>, <code>&#39;none&#39;</code></p>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>图例项的文本样式。</p>\n"}}}},"backgroundColor":{"type":["Color"],"description":"<p>图例背景色,默认透明。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>   ,如果想要加上 alpha 通道,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code></p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>图例的边框颜色。支持的颜色格式同 backgroundColor。</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>图例的边框线宽。</p>\n","default":1},"borderRadius":{"type":["number","Array"],"description":"<p>圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。\n如:</p>\n<pre><code>borderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code> 以及值不为 <code>tranparent</code> 的背景色 <code>backgroundColor</code>。</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":0},"scrollDataIndex":{"type":["number"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>图例当前最左上显示项的 <code>dataIndex</code>。</p>\n<p><code>setOption</code> 时指定此项的话,可决定当前图例滚动到哪里。</p>\n<p>但是,如果仅仅想改变图例翻页,一般并不调用 <code>setOption</code>(因为这太重量了),仅仅使用 action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> 即可。</p>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":0},"pageButtonItemGap":{"type":["number"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块中,按钮和页信息之间的间隔。</p>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":5},"pageButtonGap":{"type":["number"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块和图例项之间的间隔。</p>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":null},"pageButtonPosition":{"type":["string"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块的位置。可选值为:</p>\n<ul>\n<li><code>&#39;start&#39;</code>:控制块在左或上。</li>\n<li><code>&#39;end&#39;</code>:按钮快在右或下。</li>\n</ul>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":"'end'"},"pageFormatter":{"type":["string","Function"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块中,页信息的显示格式。默认为 <code>&#39;{current}/{total}&#39;</code>,其中 <code>{current}</code> 是当前页号(从 1 开始计数),<code>{total}</code> 是总页数。</p>\n<p>如果 <code>pageFormatter</code> 使用函数,须返回字符串,参数为:</p>\n<pre><code class=\"lang-js\">{\n    current: number\n    total: number\n}\n</code></pre>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":"'{current}/{total}'"},"pageIcons":{"type":["Object"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块的图标。</p>\n","properties":{"horizontal":{"type":["Array"],"description":"<p><a href=\"#legend.orient\">legend.orient</a> 为 <code>&#39;horizontal&#39;</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code>[previous page button, next page button]</code>。默认值为 <code>[&#39;M0,0L12,-10L12,10z&#39;, &#39;M0,0L-12,-10L-12,10z&#39;]</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"},"vertical":{"type":["Array"],"description":"<p><a href=\"#legend.orient\">legend.orient</a> 为 <code>&#39;vertical&#39;</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code>[previous page button, next page button]</code>。默认值为 <code>[&#39;M0,0L20,0L10,-20z&#39;, &#39;M0,0L20,0L10,20z&#39;]</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"}}},"pageIconColor":{"type":["string"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>翻页按钮的颜色。</p>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":"'#2f4554'"},"pageIconInactiveColor":{"type":["string"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>翻页按钮不激活时(即翻页到头时)的颜色。</p>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":"'#aaa'"},"pageIconSize":{"type":["number","Array"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>翻页按钮的大小。可以是数字,也可以是数组,如 <code>[10, 3]</code>,表示 <code>[宽,高]</code>。</p>\n<p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n","default":15},"pageTextStyle":{"type":["Object"],"description":"<p><a href=\"#legend.type\">legend.type</a> 为 <code>&#39;scroll&#39;</code> 时有效。</p>\n<p>图例页信息的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>图例翻页是否使用动画。</p>\n"},"animationDurationUpdate":{"type":["number"],"description":"<p>图例翻页时的动画时长。</p>\n","default":800}}},"grid":{"type":["Object"],"description":"<p>直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制<a href=\"#series-line\">折线图</a>,<a href=\"#series-bar\">柱状图</a>,<a href=\"#series-scatter\">散点图(气泡图)</a>。</p>\n<p>在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件,在 ECharts 3 中可以存在任意个 grid 组件。</p>\n<p><strong>例如下面这个 Anscombe Quartet 的示例:</strong></p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=scatter-anscombe-quartet&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"show":{"type":["boolean"],"description":"<p>是否显示直角坐标系网格。</p>\n","default":false},"zlevel":{"type":["number"],"description":"<p>所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>grid 组件离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>。</p>\n<p>如果 <code>left</code> 的值为<code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":"'10%'"},"top":{"type":["string","number"],"description":"<p>grid 组件离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>。</p>\n<p>如果 <code>top</code> 的值为<code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>grid 组件离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n","default":"'10%'"},"bottom":{"type":["string","number"],"description":"<p>grid 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>grid 组件的宽度。默认自适应。</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>grid 组件的高度。默认自适应。</p>\n","default":"'auto'"},"containLabel":{"type":["boolean"],"description":"<p>grid 区域是否包含坐标轴的<a href=\"#yAxis.axisLabel\">刻度标签</a>。</p>\n<ul>\n<li>containLabel 为 <code>false</code> 的时候:<ul>\n<li><code>grid.left</code> <code>grid.right</code> <code>grid.top</code> <code>grid.bottom</code> <code>grid.width</code> <code>grid.height</code> 决定的是由坐标轴形成的矩形的尺寸和位置。</li>\n<li>这比较适用于多个 <code>grid</code> 进行对齐的场景,因为往往多个 <code>grid</code> 对齐的时候,是依据坐标轴来对齐的。</li>\n</ul>\n</li>\n<li>containLabel 为 <code>true</code> 的时候:<ul>\n<li><code>grid.left</code> <code>grid.right</code> <code>grid.top</code> <code>grid.bottom</code> <code>grid.width</code> <code>grid.height</code> 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。</li>\n<li>这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。</li>\n</ul>\n</li>\n</ul>\n","default":false},"backgroundColor":{"type":["Color"],"description":"<p>网格背景色,默认透明。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>   ,如果想要加上 alpha 通道,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code></p>\n</blockquote>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>网格的边框颜色。支持的颜色格式同 backgroundColor。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>网格的边框线宽。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code> 以及值不为 <code>tranparent</code> 的背景色 <code>backgroundColor</code>。</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code>show: true</code>。</p>\n","default":0},"tooltip":{"type":["*"],"description":"<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","properties":{"show":{"type":["boolean"],"description":"<p>是否显示提示框组件,包括提示框浮层和 <a href=\"#tooltip.axisPointer\">axisPointer</a>。</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>触发类型。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>&#39;item&#39;</code></p>\n<p>  数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。</p>\n</li>\n<li><p><code>&#39;axis&#39;</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>&#39;none&#39;</code></p>\n<p>  什么都不触发。</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>坐标轴指示器配置项。</p>\n<p><code>tooltip.axisPointer</code> 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能,都可以通过轴上的 axisPointer 配置项完成(例如 <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> 或 <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>)。但是使用 <code>tooltip.axisPinter</code> 在简单场景下会更方便一些。</p>\n<blockquote>\n<p><strong>注意:</strong> <code>tooltip.axisPointer</code> 中诸配置项的优先级低于轴上的 axisPointer 的配置项。</p>\n</blockquote>\n<hr>\n<p>坐标轴指示器是指示坐标轴当前刻度的工具。</p>\n<p>如下例,鼠标悬浮到图上,可以出现标线和刻度文本。</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/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=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>坐标轴指示器在多轴的场景能起到辅助作用:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/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>tooltip</code> 中(如 <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>)。</p>\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>axisPointer.show</code>(例如 <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>)为 <code>true</code>,则显示此轴的 axisPointer。</p>\n</li>\n<li><p>设置 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code>&#39;axis&#39;</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</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>axisPointer.label.show</code>(例如 <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>)为 <code>true</code>,则显示此轴的 axisPointer 的 label。</p>\n</li>\n<li><p>设置 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 为 <code>&#39;cross&#39;</code> 时会自动显示 axisPointer 的 label。</p>\n</li>\n</ul>\n<hr>\n<p><strong>关于触屏的 axisPointer 的设置</strong></p>\n<p>设置轴上的 <code>axisPointer.handle.show</code>(例如 <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> 为 <code>true</code> 则会显示出此 axisPointer 的拖拽按钮。(polar 坐标系暂不支持此功能)。</p>\n<p><strong>注意:</strong>\n如果发现此时 tooltip 效果不良好,可设置 <a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> 为 <code>&#39;none&#39;</code>(于是效果为:手指按住按钮则显示 tooltip,松开按钮则隐藏 tooltip),或者 <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> 为 <code>true</code>(效果为 tooltip 一直显示)。</p>\n<p>参见<a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n<hr>\n<p><strong>自动吸附到数据(snap)</strong></p>\n<p>对于数值轴、时间轴,如果开启了 <a href=\"#xAxis.axisPointer.snap\">snap</a>,则 axisPointer 会自动吸附到最近的点上。</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> 直线指示器</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> 阴影指示器</p>\n</li>\n<li><p><code>&#39;cross&#39;</code> 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>指示器的坐标轴。</p>\n<p>默认情况,坐标系会自动选择显示哪个轴的 axisPointer(默认取类目轴或者时间轴)。</p>\n<p>可以是 <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code>, <code>&#39;radius&#39;</code>, <code>&#39;angle&#39;</code>。</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。</p>\n"},"z":{"type":["number"],"description":"<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n"},"label":{"type":["Object"],"description":"<p>坐标轴指示器的文本标签。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code> 则默认显示标签,否则默认不显示。</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code>2</code> 表示保留两位小数。</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>文本标签文字的格式化器。</p>\n<p>如果为 <code>string</code>,可以是例如:<code>formatter: &#39;some text {value} some text</code>,其中 <code>{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code>function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code>{Object}</code> params: 含有:</p>\n<p><code>{Object}</code> params.value: 轴当前值,如果 axis.type 为 &#39;category&#39; 时,其值为 axis.data 里的数值。如果 axis.type 为 <code>&#39;time&#39;</code>,其值为时间戳。</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // 当前 axisPointer 对应的 value。\n    axisValueLabel: &#39;文本&#39;\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // 假设此轴的 type 为 &#39;time&#39;。\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>label 距离轴的距离。</p>\n","default":3},"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<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","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>文本标签的背景颜色,默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>文本标签的边框颜色。</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>文本标签的边框宽度。</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;line&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;shadow&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;cross&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"position":{"type":["string","Array","Function"],"description":"<p>提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p>  回调函数,格式如下</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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>x</code>, <code>y</code>, <code>width</code>, <code>height</code>四个属性表达的图形包围盒。<br>\n  size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:<code>{contentSize: [width, height], viewSize: [width, height]}</code>。<br></p>\n<p>  <strong>返回值:</strong><br>\n  可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相  百分比。<br>\n  也可以是一个对象,如:<code>{left: 10, top: 30}</code>,或者 <code>{right: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n</ul>\n<ul>\n<li><p><code>&#39;inside&#39;</code></p>\n<p>  鼠标所在图形的内部中心位置,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;top&#39;</code></p>\n<p>  鼠标所在图形上侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;left&#39;</code></p>\n<p>  鼠标所在图形左侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;right&#39;</code></p>\n<p>  鼠标所在图形右侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;bottom&#39;</code></p>\n<p>  鼠标所在图形底侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>提示框浮层内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p><strong>1, 字符串模板</strong></p>\n<p>模板变量有 <code>{a}</code>, <code>{b}</code>,<code>{c}</code>,<code>{d}</code>,<code>{e}</code>,分别表示系列名,数据名,数据值等。\n在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code>&#39;axis&#39;</code> 的时候,会有多个系列的数据,此时可以通过 <code>{a0}</code>, <code>{a1}</code>, <code>{a2}</code> 这种后面加索引的方式表示系列的索引。\n不同图表类型下的 <code>{a}</code>,<code>{b}</code>,<code>{c}</code>,<code>{d}</code> 含义不一样。\n其中变量<code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code>在不同图表类型下代表数据含义为:</p>\n<ul>\n<li><p>折线(区域)图、柱状(条形)图、K线图 : <code>{a}</code>(系列名称),<code>{b}</code>(类目值),<code>{c}</code>(数值), <code>{d}</code>(无)</p>\n</li>\n<li><p>散点图(气泡)图 : <code>{a}</code>(系列名称),<code>{b}</code>(数据名称),<code>{c}</code>(数值数组), <code>{d}</code>(无)</p>\n</li>\n<li><p>地图 : <code>{a}</code>(系列名称),<code>{b}</code>(区域名称),<code>{c}</code>(合并数值), <code>{d}</code>(无)</p>\n</li>\n<li><p>饼图、仪表盘、漏斗图: <code>{a}</code>(系列名称),<code>{b}</code>(数据项名称),<code>{c}</code>(数值), <code>{d}</code>(百分比)</p>\n</li>\n</ul>\n<p>更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; string\n</code></pre>\n<p>第一个参数 <code>params</code> 是 formatter 需要的数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n    // 饼图的百分比\n    percent: number,\n\n}\n</code></pre>\n<p>在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code>&#39;axis&#39;</code> 的时候,或者 tooltip 被 <a href=\"#xAxis.axisPointer\">axisPointer</a> 触发的时候,<code>params</code> 是多个系列的数据数组。其中每项内容格式同上,并且,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 使用数组表示各参数的方式不再支持。</p>\n<p>第二个参数 <code>ticket</code> 是异步回调标识,配合第三个参数 <code>callback</code> 使用。\n第三个参数 <code>callback</code> 是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 <code>ticket</code> 和 <code>html</code> 更新提示框浮层内容。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>提示框浮层的背景颜色。</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>提示框浮层的边框颜色。</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>提示框浮层的边框宽。</p>\n","default":0},"padding":{"type":["number"],"description":"<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","default":5},"textStyle":{"type":["Object"],"description":"<p>提示框浮层的文本样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"xAxis":{"type":["Object"],"description":"<p>直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 <a href=\"#xAxis.offset\">offset</a> 属性防止同个位置多个 x 轴的重叠。</p>\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"show":{"type":["boolean"],"description":"<p>是否显示 x 轴。</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>x 轴所在的 grid 的索引,默认位于第一个 grid。</p>\n","default":0},"position":{"type":["string"],"description":"<p>x 轴的位置。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>默认 grid 中的第一个 x 轴在 grid 的下方(<code>&#39;bottom&#39;</code>),第二个 x 轴视第一个 x 轴的位置放在另一侧。</p>\n"},"offset":{"type":["number"],"description":"<p>X 轴相对于默认位置的偏移,在相同的 <code>position</code> 上有多个 X 轴的时候有用。</p>\n","default":0},"type":{"type":["string"],"description":"<p>坐标轴类型。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  数值轴,适用于连续数据。</p>\n</li>\n<li><p><code>&#39;category&#39;</code>\n  类目轴,适用于离散的类目数据,为该类型时必须通过 <a href=\"#xAxis.data\">data</a> 设置类目数据。</p>\n</li>\n<li><p><code>&#39;time&#39;</code>\n  时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。</p>\n</li>\n<li><p><code>&#39;log&#39;</code>\n  对数轴。适用于对数数据。</p>\n</li>\n</ul>\n","default":"'category'"},"name":{"type":["string"],"description":"<p>坐标轴名称。</p>\n"},"nameLocation":{"type":["string"],"description":"<p>坐标轴名称显示位置。</p>\n<p><strong>可选:</strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> 或者 <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>坐标轴名称的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>坐标轴名称的颜色,默认取 <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"fontStyle":{"type":["string"],"description":"<p>坐标轴名称文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>坐标轴名称文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>坐标轴名称文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>坐标轴名称文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>坐标轴名称与轴线之间的距离。</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>坐标轴名字旋转,角度值。</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>是否是反向坐标轴。ECharts 3 中新加。</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。</p>\n<p>类目轴中 <code>boundaryGap</code> 可以配置为 <code>true</code> 和 <code>false</code>。默认为 <code>true</code>,这时候<a href=\"#xAxis.axisTick\">刻度</a>只是作为分隔线,标签和数据点都会在两个<a href=\"#xAxis.axisTick\">刻度</a>之间的带(band)中间。</p>\n<p>非类目轴,包括时间,数值,对数轴,<code>boundaryGap</code>是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 <a href=\"#xAxis.min\">min</a> 和 <a href=\"#xAxis.max\">max</a> 后无效。\n<strong>示例:</strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","function"],"description":"<p>坐标轴刻度最小值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMin&#39;</code>,此时取数据在该轴上的最小值作为最小刻度。</p>\n<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>min: function(value) {\n    return value.min - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最小值。</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>坐标轴刻度最大值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMax&#39;</code>,此时取数据在该轴上的最大值作为最大刻度。</p>\n<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>max: function(value) {\n    return value.max - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最大值。</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>只在数值轴中(<a href=\"#xAxis.type\">type</a>: &#39;value&#39;)有效。</p>\n<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n<p>在设置 <a href=\"#xAxis.min\">min</a> 和 <a href=\"#xAxis.max\">max</a> 之后该配置项无效。</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最小间隔大小。</p>\n<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#xAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最大间隔大小。</p>\n<p>例如,在时间轴((<a href=\"#xAxis.type\">type</a>: &#39;time&#39;))可以设置成 <code>3600 * 24 * 1000</code> 保证坐标轴分割刻度最大为一天。</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 24 * 1000\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#xAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n"},"interval":{"type":["number"],"description":"<p>强制设置坐标轴分割间隔。</p>\n<p>因为 <a href=\"#xAxis.splitNumber\">splitNumber</a> 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 <a href=\"#xAxis.min\">min</a>、<a href=\"#xAxis.max\">max</a> 强制设定刻度划分,一般不建议使用。</p>\n<p>无法在类目轴中使用。在时间轴(<a href=\"#xAxis.type\">type</a>: &#39;time&#39;)中需要传时间戳,在对数轴(<a href=\"#xAxis.type\">type</a>: &#39;log&#39;)中需要传指数值。</p>\n"},"logBase":{"type":["number"],"description":"<p>对数轴的底数,只在对数轴中(<a href=\"#xAxis.type\">type</a>: &#39;log&#39;)有效。</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>坐标轴是否是静态无法交互。</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>坐标轴的标签是否响应和触发鼠标事件,默认不响应。</p>\n<p>事件参数如下:</p>\n<pre><code class=\"lang-js\">{\n    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis\n    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex\n    componentType: string,\n    // 未格式化过的刻度值, 点击刻度标签有效\n    value: &#39;&#39;,\n    // 坐标轴名称, 点击坐标轴名称有效\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴轴线。</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>当有双轴时,可以用这个属性手动指定,在哪个轴的 0 刻度上。</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。默认不显示箭头,即 <code>&#39;none&#39;</code>。两端都显示箭头可以设置为 <code>&#39;arrow&#39;</code>,只在末端显示箭头可以设置为 <code>[&#39;none&#39;, &#39;arrow&#39;]</code>。</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>坐标轴线线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>坐标轴线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴刻度。</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效,可以保证刻度线和标签对齐。如下图:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度的显示间隔,在类目轴中有效。默认同 <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>坐标轴刻度是否朝内,默认朝外。</p>\n","default":false},"length":{"type":["number"],"description":"<p>坐标轴刻度的长度。</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>刻度线的颜色,默认取 <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>坐标轴刻度线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴刻度线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- Overwrite color -->"}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示刻度标签。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度标签的显示间隔,在类目轴中有效。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>刻度标签是否朝内,默认朝外。</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>\n<p>旋转的角度从 -90 度到 90 度。</p>\n","default":0},"margin":{"type":["number"],"description":"<p>刻度标签与轴线之间的距离。</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>刻度标签的内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为刻度默认标签 {value}\nformatter: &#39;{value} kg&#39;\n\n// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引\nformatter: function (value, index) {\n    // 格式化成月/日,只在第一个刻度显示年份\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>是否显示最小 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)。</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>是否显示最大 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>刻度标签文字的颜色,默认取 <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数,格式如下</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>参数是标签的文本,返回颜色值,如下示例:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示分隔线。默认数值轴显示,类目轴不显示。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔,在类目轴中有效。默认同 <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>分隔线颜色,可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // 使用深浅的间隔色\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>分隔线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>分隔线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔区域,默认不显示。</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>是否显示分隔区域。</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>类目数据,在类目轴(<a href=\"#xAxis.type\">type</a>: <code>&#39;category&#39;</code>)中有效。</p>\n<p>如果没有设置 <a href=\"#xAxis.type\">type</a>,但是设置了 <code>axis.data</code>,则认为 <code>type</code> 是 <code>&#39;category&#39;</code>。</p>\n<p>如果设置了 <a href=\"#xAxis.type\">type</a> 是 <code>&#39;category&#39;</code>,但没有设置 <code>axis.data</code>,则 <code>axis.data</code> 的内容会自动从 <a href=\"#series.data\">series.data</a> 中获取,这会比较方便。不过注意,<code>axis.data</code> 指明的是 <code>&#39;category&#39;</code> 轴的取值范围。如果不指定而是从 <a href=\"#series.data\">series.data</a> 中获取,那么只能获取到 <a href=\"#series.data\">series.data</a> 中出现的值。比如说,假如 <a href=\"#series.data\">series.data</a> 为空时,就什么也获取不到。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: [&#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名\ndata: [{\n    value: &#39;周一&#39;,\n    // 突出周一\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>单个类目名称。</p>\n"},"textStyle":{"type":["Object"],"description":"<p>类目标签的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>默认不显示。但是如果 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code>&#39;axis&#39;</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code>,则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer,也可以使用 <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> 改变这种选择。</p>\n","default":false},"type":{"type":["string"],"description":"<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> 直线指示器</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> 阴影指示器</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。</p>\n"},"z":{"type":["number"],"description":"<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n"},"label":{"type":["Object"],"description":"<p>坐标轴指示器的文本标签。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code> 则默认显示标签,否则默认不显示。</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code>2</code> 表示保留两位小数。</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>文本标签文字的格式化器。</p>\n<p>如果为 <code>string</code>,可以是例如:<code>formatter: &#39;some text {value} some text</code>,其中 <code>{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code>function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code>{Object}</code> params: 含有:</p>\n<p><code>{Object}</code> params.value: 轴当前值,如果 axis.type 为 &#39;category&#39; 时,其值为 axis.data 里的数值。如果 axis.type 为 <code>&#39;time&#39;</code>,其值为时间戳。</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // 当前 axisPointer 对应的 value。\n    axisValueLabel: &#39;文本&#39;\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // 假设此轴的 type 为 &#39;time&#39;。\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>label 距离轴的距离。</p>\n","default":3},"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<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","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>文本标签的背景颜色,默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>文本标签的边框颜色。</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>文本标签的边框宽度。</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;line&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;shadow&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>是否触发 tooltip。如果不想触发 tooltip 可以关掉。</p>\n","default":true},"value":{"type":["number"],"description":"<p>当前的 value。在使用 <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a> 时,可以设置此值进行初始值设定,从而决定 axisPointer 的初始位置。</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>当前的状态,可取值为 <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>。</p>\n"},"handle":{"type":["Object"],"description":"<p>拖拽手柄,适用于触屏的环境。参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>当 show 设为 <code>true</code> 时开启,这时显示手柄,并且 axisPointer 会一直显示。</p>\n","default":false},"icon":{"type":["*"],"description":"<p>手柄的图标。</p>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">使用图片的例子</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>手柄的尺寸,可以设置单值,如 <code>45</code>,也可以设置为数组:<code>[width, height]</code>。</p>\n","default":45},"margin":{"type":["number"],"description":"<p>手柄与轴的距离。注意,这是手柄中心点和轴的距离。</p>\n","default":50},"color":{"type":["string"],"description":"<p>手柄颜色。</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>手柄拖拽时触发视图更新周期,单位毫秒,调大这个数值可以改善性能,但是降低体验。</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p>X 轴所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>X 轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":0}}},"yAxis":{"type":["Object"],"description":"<p>直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 <a href=\"#yAxis.offset\">offset</a> 属性防止同个位置多个 Y 轴的重叠。</p>\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"show":{"type":["boolean"],"description":"<p>是否显示 y 轴。</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>y 轴所在的 grid 的索引,默认位于第一个 grid。</p>\n","default":0},"position":{"type":["string"],"description":"<p>y 轴的位置。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>默认 grid 中的第一个 y 轴在 grid 的左侧(<code>&#39;left&#39;</code>),第二个 y 轴视第一个 y 轴的位置放在另一侧。</p>\n"},"offset":{"type":["number"],"description":"<p>Y 轴相对于默认位置的偏移,在相同的 <code>position</code> 上有多个 Y 轴的时候有用。</p>\n","default":0},"type":{"type":["string"],"description":"<p>坐标轴类型。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  数值轴,适用于连续数据。</p>\n</li>\n<li><p><code>&#39;category&#39;</code>\n  类目轴,适用于离散的类目数据,为该类型时必须通过 <a href=\"#yAxis.data\">data</a> 设置类目数据。</p>\n</li>\n<li><p><code>&#39;time&#39;</code>\n  时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。</p>\n</li>\n<li><p><code>&#39;log&#39;</code>\n  对数轴。适用于对数数据。</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>坐标轴名称。</p>\n"},"nameLocation":{"type":["string"],"description":"<p>坐标轴名称显示位置。</p>\n<p><strong>可选:</strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> 或者 <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>坐标轴名称的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>坐标轴名称的颜色,默认取 <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"fontStyle":{"type":["string"],"description":"<p>坐标轴名称文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>坐标轴名称文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>坐标轴名称文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>坐标轴名称文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>坐标轴名称与轴线之间的距离。</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>坐标轴名字旋转,角度值。</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>是否是反向坐标轴。ECharts 3 中新加。</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。</p>\n<p>类目轴中 <code>boundaryGap</code> 可以配置为 <code>true</code> 和 <code>false</code>。默认为 <code>true</code>,这时候<a href=\"#yAxis.axisTick\">刻度</a>只是作为分隔线,标签和数据点都会在两个<a href=\"#yAxis.axisTick\">刻度</a>之间的带(band)中间。</p>\n<p>非类目轴,包括时间,数值,对数轴,<code>boundaryGap</code>是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 <a href=\"#yAxis.min\">min</a> 和 <a href=\"#yAxis.max\">max</a> 后无效。\n<strong>示例:</strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","function"],"description":"<p>坐标轴刻度最小值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMin&#39;</code>,此时取数据在该轴上的最小值作为最小刻度。</p>\n<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>min: function(value) {\n    return value.min - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最小值。</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>坐标轴刻度最大值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMax&#39;</code>,此时取数据在该轴上的最大值作为最大刻度。</p>\n<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>max: function(value) {\n    return value.max - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最大值。</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>只在数值轴中(<a href=\"#yAxis.type\">type</a>: &#39;value&#39;)有效。</p>\n<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n<p>在设置 <a href=\"#yAxis.min\">min</a> 和 <a href=\"#yAxis.max\">max</a> 之后该配置项无效。</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最小间隔大小。</p>\n<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#yAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最大间隔大小。</p>\n<p>例如,在时间轴((<a href=\"#yAxis.type\">type</a>: &#39;time&#39;))可以设置成 <code>3600 * 24 * 1000</code> 保证坐标轴分割刻度最大为一天。</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 24 * 1000\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#yAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n"},"interval":{"type":["number"],"description":"<p>强制设置坐标轴分割间隔。</p>\n<p>因为 <a href=\"#yAxis.splitNumber\">splitNumber</a> 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 <a href=\"#yAxis.min\">min</a>、<a href=\"#yAxis.max\">max</a> 强制设定刻度划分,一般不建议使用。</p>\n<p>无法在类目轴中使用。在时间轴(<a href=\"#yAxis.type\">type</a>: &#39;time&#39;)中需要传时间戳,在对数轴(<a href=\"#yAxis.type\">type</a>: &#39;log&#39;)中需要传指数值。</p>\n"},"logBase":{"type":["number"],"description":"<p>对数轴的底数,只在对数轴中(<a href=\"#yAxis.type\">type</a>: &#39;log&#39;)有效。</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>坐标轴是否是静态无法交互。</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>坐标轴的标签是否响应和触发鼠标事件,默认不响应。</p>\n<p>事件参数如下:</p>\n<pre><code class=\"lang-js\">{\n    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis\n    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex\n    componentType: string,\n    // 未格式化过的刻度值, 点击刻度标签有效\n    value: &#39;&#39;,\n    // 坐标轴名称, 点击坐标轴名称有效\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴轴线。</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>当有双轴时,可以用这个属性手动指定,在哪个轴的 0 刻度上。</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。默认不显示箭头,即 <code>&#39;none&#39;</code>。两端都显示箭头可以设置为 <code>&#39;arrow&#39;</code>,只在末端显示箭头可以设置为 <code>[&#39;none&#39;, &#39;arrow&#39;]</code>。</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>坐标轴线线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>坐标轴线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴刻度。</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效,可以保证刻度线和标签对齐。如下图:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度的显示间隔,在类目轴中有效。默认同 <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>坐标轴刻度是否朝内,默认朝外。</p>\n","default":false},"length":{"type":["number"],"description":"<p>坐标轴刻度的长度。</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>刻度线的颜色,默认取 <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>坐标轴刻度线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴刻度线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- Overwrite color -->"}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示刻度标签。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度标签的显示间隔,在类目轴中有效。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>刻度标签是否朝内,默认朝外。</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>\n<p>旋转的角度从 -90 度到 90 度。</p>\n","default":0},"margin":{"type":["number"],"description":"<p>刻度标签与轴线之间的距离。</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>刻度标签的内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为刻度默认标签 {value}\nformatter: &#39;{value} kg&#39;\n\n// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引\nformatter: function (value, index) {\n    // 格式化成月/日,只在第一个刻度显示年份\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>是否显示最小 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)。</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>是否显示最大 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>刻度标签文字的颜色,默认取 <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数,格式如下</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>参数是标签的文本,返回颜色值,如下示例:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示分隔线。默认数值轴显示,类目轴不显示。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔,在类目轴中有效。默认同 <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>分隔线颜色,可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // 使用深浅的间隔色\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>分隔线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>分隔线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔区域,默认不显示。</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>是否显示分隔区域。</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>类目数据,在类目轴(<a href=\"#yAxis.type\">type</a>: <code>&#39;category&#39;</code>)中有效。</p>\n<p>如果没有设置 <a href=\"#yAxis.type\">type</a>,但是设置了 <code>axis.data</code>,则认为 <code>type</code> 是 <code>&#39;category&#39;</code>。</p>\n<p>如果设置了 <a href=\"#yAxis.type\">type</a> 是 <code>&#39;category&#39;</code>,但没有设置 <code>axis.data</code>,则 <code>axis.data</code> 的内容会自动从 <a href=\"#series.data\">series.data</a> 中获取,这会比较方便。不过注意,<code>axis.data</code> 指明的是 <code>&#39;category&#39;</code> 轴的取值范围。如果不指定而是从 <a href=\"#series.data\">series.data</a> 中获取,那么只能获取到 <a href=\"#series.data\">series.data</a> 中出现的值。比如说,假如 <a href=\"#series.data\">series.data</a> 为空时,就什么也获取不到。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: [&#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名\ndata: [{\n    value: &#39;周一&#39;,\n    // 突出周一\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>单个类目名称。</p>\n"},"textStyle":{"type":["Object"],"description":"<p>类目标签的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>默认不显示。但是如果 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code>&#39;axis&#39;</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code>,则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer,也可以使用 <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> 改变这种选择。</p>\n","default":false},"type":{"type":["string"],"description":"<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> 直线指示器</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> 阴影指示器</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。</p>\n"},"z":{"type":["number"],"description":"<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n"},"label":{"type":["Object"],"description":"<p>坐标轴指示器的文本标签。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code> 则默认显示标签,否则默认不显示。</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code>2</code> 表示保留两位小数。</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>文本标签文字的格式化器。</p>\n<p>如果为 <code>string</code>,可以是例如:<code>formatter: &#39;some text {value} some text</code>,其中 <code>{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code>function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code>{Object}</code> params: 含有:</p>\n<p><code>{Object}</code> params.value: 轴当前值,如果 axis.type 为 &#39;category&#39; 时,其值为 axis.data 里的数值。如果 axis.type 为 <code>&#39;time&#39;</code>,其值为时间戳。</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // 当前 axisPointer 对应的 value。\n    axisValueLabel: &#39;文本&#39;\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // 假设此轴的 type 为 &#39;time&#39;。\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>label 距离轴的距离。</p>\n","default":3},"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<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","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>文本标签的背景颜色,默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>文本标签的边框颜色。</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>文本标签的边框宽度。</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;line&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;shadow&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>是否触发 tooltip。如果不想触发 tooltip 可以关掉。</p>\n","default":true},"value":{"type":["number"],"description":"<p>当前的 value。在使用 <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a> 时,可以设置此值进行初始值设定,从而决定 axisPointer 的初始位置。</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>当前的状态,可取值为 <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>。</p>\n"},"handle":{"type":["Object"],"description":"<p>拖拽手柄,适用于触屏的环境。参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>当 show 设为 <code>true</code> 时开启,这时显示手柄,并且 axisPointer 会一直显示。</p>\n","default":false},"icon":{"type":["*"],"description":"<p>手柄的图标。</p>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">使用图片的例子</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>手柄的尺寸,可以设置单值,如 <code>45</code>,也可以设置为数组:<code>[width, height]</code>。</p>\n","default":45},"margin":{"type":["number"],"description":"<p>手柄与轴的距离。注意,这是手柄中心点和轴的距离。</p>\n","default":50},"color":{"type":["string"],"description":"<p>手柄颜色。</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>手柄拖拽时触发视图更新周期,单位毫秒,调大这个数值可以改善性能,但是降低体验。</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p>Y 轴所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>Y 轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":0}}},"polar":{"type":["Object"],"description":"<p>极坐标系,可以用于散点图和折线图。每个极坐标系拥有一个<a href=\"#angleAxis\">角度轴</a>和一个<a href=\"#radiusAxis\">半径轴</a>。</p>\n<p><strong>示例:</strong></p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=scatter-polar-punchCard&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"zlevel":{"type":["number"],"description":"<p>所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":2},"center":{"type":["Array"],"description":"<p>极坐标系的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。</p>\n<p>支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。</p>\n<p><strong>使用示例:</strong></p>\n<pre><code>// 设置成绝对的像素值\ncenter: [400, 300]\n// 设置成相对的百分比\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["Array"],"description":"<p>极坐标系的半径,数组的第一项是内半径,第二项是外半径。</p>\n<p>支持设置成百分比,相对于容器高宽中较小的一项的一半。</p>\n"},"tooltip":{"type":["*"],"description":"<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","properties":{"show":{"type":["boolean"],"description":"<p>是否显示提示框组件,包括提示框浮层和 <a href=\"#tooltip.axisPointer\">axisPointer</a>。</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>触发类型。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>&#39;item&#39;</code></p>\n<p>  数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。</p>\n</li>\n<li><p><code>&#39;axis&#39;</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>&#39;none&#39;</code></p>\n<p>  什么都不触发。</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>坐标轴指示器配置项。</p>\n<p><code>tooltip.axisPointer</code> 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能,都可以通过轴上的 axisPointer 配置项完成(例如 <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> 或 <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>)。但是使用 <code>tooltip.axisPinter</code> 在简单场景下会更方便一些。</p>\n<blockquote>\n<p><strong>注意:</strong> <code>tooltip.axisPointer</code> 中诸配置项的优先级低于轴上的 axisPointer 的配置项。</p>\n</blockquote>\n<hr>\n<p>坐标轴指示器是指示坐标轴当前刻度的工具。</p>\n<p>如下例,鼠标悬浮到图上,可以出现标线和刻度文本。</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/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=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>坐标轴指示器在多轴的场景能起到辅助作用:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/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>tooltip</code> 中(如 <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>)。</p>\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>axisPointer.show</code>(例如 <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>)为 <code>true</code>,则显示此轴的 axisPointer。</p>\n</li>\n<li><p>设置 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code>&#39;axis&#39;</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</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>axisPointer.label.show</code>(例如 <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>)为 <code>true</code>,则显示此轴的 axisPointer 的 label。</p>\n</li>\n<li><p>设置 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 为 <code>&#39;cross&#39;</code> 时会自动显示 axisPointer 的 label。</p>\n</li>\n</ul>\n<hr>\n<p><strong>关于触屏的 axisPointer 的设置</strong></p>\n<p>设置轴上的 <code>axisPointer.handle.show</code>(例如 <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> 为 <code>true</code> 则会显示出此 axisPointer 的拖拽按钮。(polar 坐标系暂不支持此功能)。</p>\n<p><strong>注意:</strong>\n如果发现此时 tooltip 效果不良好,可设置 <a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> 为 <code>&#39;none&#39;</code>(于是效果为:手指按住按钮则显示 tooltip,松开按钮则隐藏 tooltip),或者 <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> 为 <code>true</code>(效果为 tooltip 一直显示)。</p>\n<p>参见<a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n<hr>\n<p><strong>自动吸附到数据(snap)</strong></p>\n<p>对于数值轴、时间轴,如果开启了 <a href=\"#xAxis.axisPointer.snap\">snap</a>,则 axisPointer 会自动吸附到最近的点上。</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> 直线指示器</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> 阴影指示器</p>\n</li>\n<li><p><code>&#39;cross&#39;</code> 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>指示器的坐标轴。</p>\n<p>默认情况,坐标系会自动选择显示哪个轴的 axisPointer(默认取类目轴或者时间轴)。</p>\n<p>可以是 <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code>, <code>&#39;radius&#39;</code>, <code>&#39;angle&#39;</code>。</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。</p>\n"},"z":{"type":["number"],"description":"<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n"},"label":{"type":["Object"],"description":"<p>坐标轴指示器的文本标签。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code> 则默认显示标签,否则默认不显示。</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code>2</code> 表示保留两位小数。</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>文本标签文字的格式化器。</p>\n<p>如果为 <code>string</code>,可以是例如:<code>formatter: &#39;some text {value} some text</code>,其中 <code>{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code>function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code>{Object}</code> params: 含有:</p>\n<p><code>{Object}</code> params.value: 轴当前值,如果 axis.type 为 &#39;category&#39; 时,其值为 axis.data 里的数值。如果 axis.type 为 <code>&#39;time&#39;</code>,其值为时间戳。</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // 当前 axisPointer 对应的 value。\n    axisValueLabel: &#39;文本&#39;\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // 假设此轴的 type 为 &#39;time&#39;。\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>label 距离轴的距离。</p>\n","default":3},"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<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","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>文本标签的背景颜色,默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>文本标签的边框颜色。</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>文本标签的边框宽度。</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;line&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;shadow&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;cross&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"position":{"type":["string","Array","Function"],"description":"<p>提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p>  回调函数,格式如下</p>\n<pre><code class=\"lang-js\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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>x</code>, <code>y</code>, <code>width</code>, <code>height</code>四个属性表达的图形包围盒。<br>\n  size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:<code>{contentSize: [width, height], viewSize: [width, height]}</code>。<br></p>\n<p>  <strong>返回值:</strong><br>\n  可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相  百分比。<br>\n  也可以是一个对象,如:<code>{left: 10, top: 30}</code>,或者 <code>{right: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n</ul>\n<ul>\n<li><p><code>&#39;inside&#39;</code></p>\n<p>  鼠标所在图形的内部中心位置,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;top&#39;</code></p>\n<p>  鼠标所在图形上侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;left&#39;</code></p>\n<p>  鼠标所在图形左侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;right&#39;</code></p>\n<p>  鼠标所在图形右侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n<li><p><code>&#39;bottom&#39;</code></p>\n<p>  鼠标所在图形底侧,只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code>&#39;item&#39;</code>的时候有效。</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>提示框浮层内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p><strong>1, 字符串模板</strong></p>\n<p>模板变量有 <code>{a}</code>, <code>{b}</code>,<code>{c}</code>,<code>{d}</code>,<code>{e}</code>,分别表示系列名,数据名,数据值等。\n在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code>&#39;axis&#39;</code> 的时候,会有多个系列的数据,此时可以通过 <code>{a0}</code>, <code>{a1}</code>, <code>{a2}</code> 这种后面加索引的方式表示系列的索引。\n不同图表类型下的 <code>{a}</code>,<code>{b}</code>,<code>{c}</code>,<code>{d}</code> 含义不一样。\n其中变量<code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code>在不同图表类型下代表数据含义为:</p>\n<ul>\n<li><p>折线(区域)图、柱状(条形)图、K线图 : <code>{a}</code>(系列名称),<code>{b}</code>(类目值),<code>{c}</code>(数值), <code>{d}</code>(无)</p>\n</li>\n<li><p>散点图(气泡)图 : <code>{a}</code>(系列名称),<code>{b}</code>(数据名称),<code>{c}</code>(数值数组), <code>{d}</code>(无)</p>\n</li>\n<li><p>地图 : <code>{a}</code>(系列名称),<code>{b}</code>(区域名称),<code>{c}</code>(合并数值), <code>{d}</code>(无)</p>\n</li>\n<li><p>饼图、仪表盘、漏斗图: <code>{a}</code>(系列名称),<code>{b}</code>(数据项名称),<code>{c}</code>(数值), <code>{d}</code>(百分比)</p>\n</li>\n</ul>\n<p>更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; string\n</code></pre>\n<p>第一个参数 <code>params</code> 是 formatter 需要的数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n    // 饼图的百分比\n    percent: number,\n\n}\n</code></pre>\n<p>在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code>&#39;axis&#39;</code> 的时候,或者 tooltip 被 <a href=\"#xAxis.axisPointer\">axisPointer</a> 触发的时候,<code>params</code> 是多个系列的数据数组。其中每项内容格式同上,并且,</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p><strong>注:</strong> ECharts 2.x 使用数组表示各参数的方式不再支持。</p>\n<p>第二个参数 <code>ticket</code> 是异步回调标识,配合第三个参数 <code>callback</code> 使用。\n第三个参数 <code>callback</code> 是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 <code>ticket</code> 和 <code>html</code> 更新提示框浮层内容。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>提示框浮层的背景颜色。</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>提示框浮层的边框颜色。</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>提示框浮层的边框宽。</p>\n","default":0},"padding":{"type":["number"],"description":"<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","default":5},"textStyle":{"type":["Object"],"description":"<p>提示框浮层的文本样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"radiusAxis":{"type":["Object"],"description":"<p>极坐标系的径向轴。</p>\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"polarIndex":{"type":["number"],"description":"<p>径向轴所在的极坐标系的索引,默认使用第一个极坐标系。</p>\n","default":0},"type":{"type":["string"],"description":"<p>坐标轴类型。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  数值轴,适用于连续数据。</p>\n</li>\n<li><p><code>&#39;category&#39;</code>\n  类目轴,适用于离散的类目数据,为该类型时必须通过 <a href=\"#radiusAxis.data\">data</a> 设置类目数据。</p>\n</li>\n<li><p><code>&#39;time&#39;</code>\n  时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。</p>\n</li>\n<li><p><code>&#39;log&#39;</code>\n  对数轴。适用于对数数据。</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>坐标轴名称。</p>\n"},"nameLocation":{"type":["string"],"description":"<p>坐标轴名称显示位置。</p>\n<p><strong>可选:</strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> 或者 <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>坐标轴名称的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>坐标轴名称的颜色,默认取 <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"fontStyle":{"type":["string"],"description":"<p>坐标轴名称文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>坐标轴名称文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>坐标轴名称文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>坐标轴名称文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>坐标轴名称与轴线之间的距离。</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>坐标轴名字旋转,角度值。</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>是否是反向坐标轴。ECharts 3 中新加。</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。</p>\n<p>类目轴中 <code>boundaryGap</code> 可以配置为 <code>true</code> 和 <code>false</code>。默认为 <code>true</code>,这时候<a href=\"#radiusAxis.axisTick\">刻度</a>只是作为分隔线,标签和数据点都会在两个<a href=\"#radiusAxis.axisTick\">刻度</a>之间的带(band)中间。</p>\n<p>非类目轴,包括时间,数值,对数轴,<code>boundaryGap</code>是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 <a href=\"#radiusAxis.min\">min</a> 和 <a href=\"#radiusAxis.max\">max</a> 后无效。\n<strong>示例:</strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","function"],"description":"<p>坐标轴刻度最小值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMin&#39;</code>,此时取数据在该轴上的最小值作为最小刻度。</p>\n<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>min: function(value) {\n    return value.min - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最小值。</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>坐标轴刻度最大值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMax&#39;</code>,此时取数据在该轴上的最大值作为最大刻度。</p>\n<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>max: function(value) {\n    return value.max - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最大值。</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>只在数值轴中(<a href=\"#radiusAxis.type\">type</a>: &#39;value&#39;)有效。</p>\n<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n<p>在设置 <a href=\"#radiusAxis.min\">min</a> 和 <a href=\"#radiusAxis.max\">max</a> 之后该配置项无效。</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最小间隔大小。</p>\n<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#radiusAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最大间隔大小。</p>\n<p>例如,在时间轴((<a href=\"#radiusAxis.type\">type</a>: &#39;time&#39;))可以设置成 <code>3600 * 24 * 1000</code> 保证坐标轴分割刻度最大为一天。</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 24 * 1000\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#radiusAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n"},"interval":{"type":["number"],"description":"<p>强制设置坐标轴分割间隔。</p>\n<p>因为 <a href=\"#radiusAxis.splitNumber\">splitNumber</a> 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 <a href=\"#radiusAxis.min\">min</a>、<a href=\"#radiusAxis.max\">max</a> 强制设定刻度划分,一般不建议使用。</p>\n<p>无法在类目轴中使用。在时间轴(<a href=\"#radiusAxis.type\">type</a>: &#39;time&#39;)中需要传时间戳,在对数轴(<a href=\"#radiusAxis.type\">type</a>: &#39;log&#39;)中需要传指数值。</p>\n"},"logBase":{"type":["number"],"description":"<p>对数轴的底数,只在对数轴中(<a href=\"#radiusAxis.type\">type</a>: &#39;log&#39;)有效。</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>坐标轴是否是静态无法交互。</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>坐标轴的标签是否响应和触发鼠标事件,默认不响应。</p>\n<p>事件参数如下:</p>\n<pre><code class=\"lang-js\">{\n    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis\n    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex\n    componentType: string,\n    // 未格式化过的刻度值, 点击刻度标签有效\n    value: &#39;&#39;,\n    // 坐标轴名称, 点击坐标轴名称有效\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴轴线。</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。默认不显示箭头,即 <code>&#39;none&#39;</code>。两端都显示箭头可以设置为 <code>&#39;arrow&#39;</code>,只在末端显示箭头可以设置为 <code>[&#39;none&#39;, &#39;arrow&#39;]</code>。</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>坐标轴线线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>坐标轴线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴刻度。</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效,可以保证刻度线和标签对齐。如下图:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度的显示间隔,在类目轴中有效。默认同 <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>坐标轴刻度是否朝内,默认朝外。</p>\n","default":false},"length":{"type":["number"],"description":"<p>坐标轴刻度的长度。</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>刻度线的颜色,默认取 <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>坐标轴刻度线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴刻度线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- Overwrite color -->"}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示刻度标签。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度标签的显示间隔,在类目轴中有效。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>刻度标签是否朝内,默认朝外。</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>\n<p>旋转的角度从 -90 度到 90 度。</p>\n","default":0},"margin":{"type":["number"],"description":"<p>刻度标签与轴线之间的距离。</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>刻度标签的内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为刻度默认标签 {value}\nformatter: &#39;{value} kg&#39;\n\n// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引\nformatter: function (value, index) {\n    // 格式化成月/日,只在第一个刻度显示年份\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>是否显示最小 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)。</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>是否显示最大 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>刻度标签文字的颜色,默认取 <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数,格式如下</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>参数是标签的文本,返回颜色值,如下示例:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示分隔线。默认数值轴显示,类目轴不显示。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔,在类目轴中有效。默认同 <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>分隔线颜色,可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // 使用深浅的间隔色\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>分隔线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>分隔线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔区域,默认不显示。</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>是否显示分隔区域。</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>类目数据,在类目轴(<a href=\"#radiusAxis.type\">type</a>: <code>&#39;category&#39;</code>)中有效。</p>\n<p>如果没有设置 <a href=\"#radiusAxis.type\">type</a>,但是设置了 <code>axis.data</code>,则认为 <code>type</code> 是 <code>&#39;category&#39;</code>。</p>\n<p>如果设置了 <a href=\"#radiusAxis.type\">type</a> 是 <code>&#39;category&#39;</code>,但没有设置 <code>axis.data</code>,则 <code>axis.data</code> 的内容会自动从 <a href=\"#series.data\">series.data</a> 中获取,这会比较方便。不过注意,<code>axis.data</code> 指明的是 <code>&#39;category&#39;</code> 轴的取值范围。如果不指定而是从 <a href=\"#series.data\">series.data</a> 中获取,那么只能获取到 <a href=\"#series.data\">series.data</a> 中出现的值。比如说,假如 <a href=\"#series.data\">series.data</a> 为空时,就什么也获取不到。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: [&#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名\ndata: [{\n    value: &#39;周一&#39;,\n    // 突出周一\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>单个类目名称。</p>\n"},"textStyle":{"type":["Object"],"description":"<p>类目标签的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>默认不显示。但是如果 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code>&#39;axis&#39;</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code>,则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer,也可以使用 <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> 改变这种选择。</p>\n","default":false},"type":{"type":["string"],"description":"<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> 直线指示器</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> 阴影指示器</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。</p>\n"},"z":{"type":["number"],"description":"<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n"},"label":{"type":["Object"],"description":"<p>坐标轴指示器的文本标签。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code> 则默认显示标签,否则默认不显示。</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code>2</code> 表示保留两位小数。</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>文本标签文字的格式化器。</p>\n<p>如果为 <code>string</code>,可以是例如:<code>formatter: &#39;some text {value} some text</code>,其中 <code>{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code>function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code>{Object}</code> params: 含有:</p>\n<p><code>{Object}</code> params.value: 轴当前值,如果 axis.type 为 &#39;category&#39; 时,其值为 axis.data 里的数值。如果 axis.type 为 <code>&#39;time&#39;</code>,其值为时间戳。</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // 当前 axisPointer 对应的 value。\n    axisValueLabel: &#39;文本&#39;\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // 假设此轴的 type 为 &#39;time&#39;。\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>label 距离轴的距离。</p>\n","default":3},"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<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","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>文本标签的背景颜色,默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>文本标签的边框颜色。</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>文本标签的边框宽度。</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;line&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;shadow&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>是否触发 tooltip。如果不想触发 tooltip 可以关掉。</p>\n","default":true},"value":{"type":["number"],"description":"<p>当前的 value。在使用 <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a> 时,可以设置此值进行初始值设定,从而决定 axisPointer 的初始位置。</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>当前的状态,可取值为 <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>。</p>\n"},"handle":{"type":["Object"],"description":"<p>拖拽手柄,适用于触屏的环境。参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>当 show 设为 <code>true</code> 时开启,这时显示手柄,并且 axisPointer 会一直显示。</p>\n","default":false},"icon":{"type":["*"],"description":"<p>手柄的图标。</p>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">使用图片的例子</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>手柄的尺寸,可以设置单值,如 <code>45</code>,也可以设置为数组:<code>[width, height]</code>。</p>\n","default":45},"margin":{"type":["number"],"description":"<p>手柄与轴的距离。注意,这是手柄中心点和轴的距离。</p>\n","default":50},"color":{"type":["string"],"description":"<p>手柄颜色。</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>手柄拖拽时触发视图更新周期,单位毫秒,调大这个数值可以改善性能,但是降低体验。</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p>半径轴所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>半径轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":0}}},"angleAxis":{"type":["Object"],"description":"<p>极坐标系的角度轴。</p>\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"polarIndex":{"type":["number"],"description":"<p>角度轴所在的极坐标系的索引,默认使用第一个极坐标系。</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。</p>\n<p>如下示例是 startAngle 为 45 的效果:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n","default":90},"clockwise":{"type":["boolean"],"description":"<p>刻度增长是否按顺时针,默认顺时针。</p>\n<p>如下示例是 clockwise 为 <code>false</code> (逆时针)的效果:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n\n","default":true},"type":{"type":["string"],"description":"<p>坐标轴类型。</p>\n<p>可选:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  数值轴,适用于连续数据。</p>\n</li>\n<li><p><code>&#39;category&#39;</code>\n  类目轴,适用于离散的类目数据,为该类型时必须通过 <a href=\"#angleAxis.data\">data</a> 设置类目数据。</p>\n</li>\n<li><p><code>&#39;time&#39;</code>\n  时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。</p>\n</li>\n<li><p><code>&#39;log&#39;</code>\n  对数轴。适用于对数数据。</p>\n</li>\n</ul>\n","default":"'category'"},"boundaryGap":{"type":["boolean","Array"],"description":"<p>坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。</p>\n<p>类目轴中 <code>boundaryGap</code> 可以配置为 <code>true</code> 和 <code>false</code>。默认为 <code>true</code>,这时候<a href=\"#angleAxis.axisTick\">刻度</a>只是作为分隔线,标签和数据点都会在两个<a href=\"#angleAxis.axisTick\">刻度</a>之间的带(band)中间。</p>\n<p>非类目轴,包括时间,数值,对数轴,<code>boundaryGap</code>是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 <a href=\"#angleAxis.min\">min</a> 和 <a href=\"#angleAxis.max\">max</a> 后无效。\n<strong>示例:</strong></p>\n<pre><code class=\"lang-js\">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"type":["number","string","function"],"description":"<p>坐标轴刻度最小值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMin&#39;</code>,此时取数据在该轴上的最小值作为最小刻度。</p>\n<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>min: function(value) {\n    return value.min - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最小值。</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>坐标轴刻度最大值。</p>\n<p>可以设置成特殊值 <code>&#39;dataMax&#39;</code>,此时取数据在该轴上的最大值作为最大刻度。</p>\n<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>\n<p>在类目轴中,也可以设置为类目的序数(如类目轴 <code>data: [&#39;类A&#39;, &#39;类B&#39;, &#39;类C&#39;]</code> 中,序数 <code>2</code> 表示 <code>&#39;类C&#39;</code>。也可以设置为负数,如 <code>-3</code>)。</p>\n<p>当设置成 <code>function</code> 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:</p>\n<pre><code>max: function(value) {\n    return value.max - 20;\n}\n</code></pre><p>其中 <code>value</code> 是一个包含 <code>min</code> 和 <code>max</code> 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最大值。</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>只在数值轴中(<a href=\"#angleAxis.type\">type</a>: &#39;value&#39;)有效。</p>\n<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n<p>在设置 <a href=\"#angleAxis.min\">min</a> 和 <a href=\"#angleAxis.max\">max</a> 之后该配置项无效。</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>\n<p>在类目轴中无效。</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最小间隔大小。</p>\n<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>\n<pre><code class=\"lang-js\">{\n    minInterval: 1\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#angleAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n","default":0},"maxInterval":{"type":["number"],"description":"<p>自动计算的坐标轴最大间隔大小。</p>\n<p>例如,在时间轴((<a href=\"#angleAxis.type\">type</a>: &#39;time&#39;))可以设置成 <code>3600 * 24 * 1000</code> 保证坐标轴分割刻度最大为一天。</p>\n<pre><code class=\"lang-js\">{\n    maxInterval: 3600 * 24 * 1000\n}\n</code></pre>\n<p>只在数值轴或时间轴中(<a href=\"#angleAxis.type\">type</a>: &#39;value&#39; 或 &#39;time&#39;)有效。</p>\n"},"interval":{"type":["number"],"description":"<p>强制设置坐标轴分割间隔。</p>\n<p>因为 <a href=\"#angleAxis.splitNumber\">splitNumber</a> 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 <a href=\"#angleAxis.min\">min</a>、<a href=\"#angleAxis.max\">max</a> 强制设定刻度划分,一般不建议使用。</p>\n<p>无法在类目轴中使用。在时间轴(<a href=\"#angleAxis.type\">type</a>: &#39;time&#39;)中需要传时间戳,在对数轴(<a href=\"#angleAxis.type\">type</a>: &#39;log&#39;)中需要传指数值。</p>\n"},"logBase":{"type":["number"],"description":"<p>对数轴的底数,只在对数轴中(<a href=\"#angleAxis.type\">type</a>: &#39;log&#39;)有效。</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>坐标轴是否是静态无法交互。</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>坐标轴的标签是否响应和触发鼠标事件,默认不响应。</p>\n<p>事件参数如下:</p>\n<pre><code class=\"lang-js\">{\n    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis\n    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex\n    componentType: string,\n    // 未格式化过的刻度值, 点击刻度标签有效\n    value: &#39;&#39;,\n    // 坐标轴名称, 点击坐标轴名称有效\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴轴线。</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。默认不显示箭头,即 <code>&#39;none&#39;</code>。两端都显示箭头可以设置为 <code>&#39;arrow&#39;</code>,只在末端显示箭头可以设置为 <code>[&#39;none&#39;, &#39;arrow&#39;]</code>。</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>坐标轴线线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>坐标轴线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴刻度。</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效,可以保证刻度线和标签对齐。如下图:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度的显示间隔,在类目轴中有效。默认同 <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>坐标轴刻度是否朝内,默认朝外。</p>\n","default":false},"length":{"type":["number"],"description":"<p>坐标轴刻度的长度。</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>刻度线的颜色,默认取 <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>坐标轴刻度线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴刻度线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- Overwrite color -->"}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示刻度标签。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴刻度标签的显示间隔,在类目轴中有效。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>刻度标签是否朝内,默认朝外。</p>\n","default":false},"margin":{"type":["number"],"description":"<p>刻度标签与轴线之间的距离。</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>刻度标签的内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为刻度默认标签 {value}\nformatter: &#39;{value} kg&#39;\n\n// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引\nformatter: function (value, index) {\n    // 格式化成月/日,只在第一个刻度显示年份\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>是否显示最小 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)。</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>是否显示最大 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>刻度标签文字的颜色,默认取 <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数,格式如下</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>参数是标签的文本,返回颜色值,如下示例:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示分隔线。默认数值轴显示,类目轴不显示。</p>\n","default":true},"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔线的显示间隔,在类目轴中有效。默认同 <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>分隔线颜色,可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // 使用深浅的间隔色\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>分隔线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>分隔线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔区域,默认不显示。</p>\n","properties":{"interval":{"type":["number","Function"],"description":"<p>坐标轴分隔区域的显示间隔,在类目轴中有效。默认同 <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> 一样。</p>\n<p>默认会采用标签不重叠的策略间隔显示标签。</p>\n<p>可以设置成 0 强制显示所有标签。</p>\n<p>如果设置为 <code>1</code>,表示『隔一个标签显示一个标签』,如果值为 <code>2</code>,表示隔两个标签显示一个标签,以此类推。</p>\n<p>可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 <code>false</code>。</p>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>是否显示分隔区域。</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>类目数据,在类目轴(<a href=\"#angleAxis.type\">type</a>: <code>&#39;category&#39;</code>)中有效。</p>\n<p>如果没有设置 <a href=\"#angleAxis.type\">type</a>,但是设置了 <code>axis.data</code>,则认为 <code>type</code> 是 <code>&#39;category&#39;</code>。</p>\n<p>如果设置了 <a href=\"#angleAxis.type\">type</a> 是 <code>&#39;category&#39;</code>,但没有设置 <code>axis.data</code>,则 <code>axis.data</code> 的内容会自动从 <a href=\"#series.data\">series.data</a> 中获取,这会比较方便。不过注意,<code>axis.data</code> 指明的是 <code>&#39;category&#39;</code> 轴的取值范围。如果不指定而是从 <a href=\"#series.data\">series.data</a> 中获取,那么只能获取到 <a href=\"#series.data\">series.data</a> 中出现的值。比如说,假如 <a href=\"#series.data\">series.data</a> 为空时,就什么也获取不到。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 所有类目名称列表\ndata: [&#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名\ndata: [{\n    value: &#39;周一&#39;,\n    // 突出周一\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>单个类目名称。</p>\n"},"textStyle":{"type":["Object"],"description":"<p>类目标签的文字样式。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>默认不显示。但是如果 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code>&#39;axis&#39;</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code>,则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer,也可以使用 <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> 改变这种选择。</p>\n","default":false},"type":{"type":["string"],"description":"<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> 直线指示器</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> 阴影指示器</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。</p>\n"},"z":{"type":["number"],"description":"<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n"},"label":{"type":["Object"],"description":"<p>坐标轴指示器的文本标签。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code>&#39;cross&#39;</code> 则默认显示标签,否则默认不显示。</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code>2</code> 表示保留两位小数。</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>文本标签文字的格式化器。</p>\n<p>如果为 <code>string</code>,可以是例如:<code>formatter: &#39;some text {value} some text</code>,其中 <code>{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code>function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code>{Object}</code> params: 含有:</p>\n<p><code>{Object}</code> params.value: 轴当前值,如果 axis.type 为 &#39;category&#39; 时,其值为 axis.data 里的数值。如果 axis.type 为 <code>&#39;time&#39;</code>,其值为时间戳。</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\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    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色\n    color: string,\n\n}\n</code></pre>\n<p>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // 当前 axisPointer 对应的 value。\n    axisValueLabel: &#39;文本&#39;\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n    // 假设此轴的 type 为 &#39;time&#39;。\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>label 距离轴的距离。</p>\n","default":3},"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<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","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>文本标签的背景颜色,默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>文本标签的边框颜色。</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>文本标签的边框宽度。</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;line&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code>&#39;shadow&#39;</code> 时有效。</p>\n","properties":{"color":{"type":["Color"],"description":"<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>是否触发 tooltip。如果不想触发 tooltip 可以关掉。</p>\n","default":true},"value":{"type":["number"],"description":"<p>当前的 value。在使用 <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a> 时,可以设置此值进行初始值设定,从而决定 axisPointer 的初始位置。</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>当前的状态,可取值为 <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>。</p>\n"},"handle":{"type":["Object"],"description":"<p>拖拽手柄,适用于触屏的环境。参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>当 show 设为 <code>true</code> 时开启,这时显示手柄,并且 axisPointer 会一直显示。</p>\n","default":false},"icon":{"type":["*"],"description":"<p>手柄的图标。</p>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">使用图片的例子</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>手柄的尺寸,可以设置单值,如 <code>45</code>,也可以设置为数组:<code>[width, height]</code>。</p>\n","default":45},"margin":{"type":["number"],"description":"<p>手柄与轴的距离。注意,这是手柄中心点和轴的距离。</p>\n","default":50},"color":{"type":["string"],"description":"<p>手柄颜色。</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>手柄拖拽时触发视图更新周期,单位毫秒,调大这个数值可以改善性能,但是降低体验。</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p>角度轴所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>角度轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":0}}},"radar":{"type":["Object"],"description":"<p>雷达图坐标系组件,只适用于<a href=\"#series-radar\">雷达图</a>。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件,为避免混淆,雷达图使用 radar 组件作为其坐标系。</p>\n<p>雷达图坐标系与极坐标系不同的是它的每一个轴(indicator 指示器)都是一个单独的维度,可以通过 <a href=\"#radar.name\">name</a>、<a href=\"#radar.axisLine\">axisLine</a>、<a href=\"#radar.axisTick\">axisTick</a>、<a href=\"#radar.axisLabel\">axisLabel</a>、<a href=\"#radar.splitLine\">splitLine</a>、 <a href=\"#radar.splitArea\">splitArea</a> 几个配置项配置指示器坐标轴线的样式。</p>\n<p>下面是一个 radar 组件的一个自定义例子。</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/radar&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"zlevel":{"type":["number"],"description":"<p>所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":2},"center":{"type":["Array"],"description":"<p>的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。</p>\n<p>支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。</p>\n<p><strong>使用示例:</strong></p>\n<pre><code>// 设置成绝对的像素值\ncenter: [400, 300]\n// 设置成相对的百分比\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string"],"description":"<p>的半径,数组的第一项是内半径,第二项是外半径。</p>\n<p>支持设置成百分比,相对于容器高宽中较小的一项的一半。</p>\n","default":"75%"},"startAngle":{"type":["number"],"description":"<p>坐标系起始角度,也就是第一个指示器轴的角度。</p>\n","default":90},"name":{"type":["Object"],"description":"<p>雷达图每个指示器名称的配置项。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示指示器名称。</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>指示器名称显示的格式器。支持字符串和回调函数,如下示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为指示器名称 {value}\nformatter: &#39;【{value}】&#39;\n// 使用回调函数,第一个参数是指示器名称,第二个参数是指示器配置项\nformatter: function (value, indicator) {\n    return &#39;【&#39; + value + &#39;】&#39;;\n}\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>指示器名称和指示器轴的距离。</p>\n","default":15},"splitNumber":{"type":["number"],"description":"<p>指示器轴的分割段数。</p>\n","default":5},"shape":{"type":["string"],"description":"<p>雷达图绘制类型,支持 <code>&#39;polygon&#39;</code> 和 <code>&#39;circle&#39;</code>。</p>\n","default":"'polygon'"},"scale":{"type":["boolean"],"description":"<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>\n","default":false},"silent":{"type":["boolean"],"description":"<p>坐标轴是否是静态无法交互。</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>坐标轴的标签是否响应和触发鼠标事件,默认不响应。</p>\n<p>事件参数如下:</p>\n<pre><code class=\"lang-js\">{\n    // 组件类型,xAxis, yAxis, radiusAxis, angleAxis\n    // 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex\n    componentType: string,\n    // 未格式化过的刻度值, 点击刻度标签有效\n    value: &#39;&#39;,\n    // 坐标轴名称, 点击坐标轴名称有效\n    name: &#39;&#39;\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>坐标轴轴线相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴轴线。</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。默认不显示箭头,即 <code>&#39;none&#39;</code>。两端都显示箭头可以设置为 <code>&#39;arrow&#39;</code>,只在末端显示箭头可以设置为 <code>[&#39;none&#39;, &#39;arrow&#39;]</code>。</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>坐标轴线线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>坐标轴线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>坐标轴刻度相关设置。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示坐标轴刻度。</p>\n","default":false},"alignWithLabel":{"type":["boolean"],"description":"<p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效,可以保证刻度线和标签对齐。如下图:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"inside":{"type":["boolean"],"description":"<p>坐标轴刻度是否朝内,默认朝外。</p>\n","default":false},"length":{"type":["number"],"description":"<p>坐标轴刻度的长度。</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>刻度线的颜色,默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。</p>\n"},"width":{"type":["number"],"description":"<p>坐标轴刻度线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>坐标轴刻度线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- Overwrite color -->"}}}}},"axisLabel":{"type":["Object"],"description":"<p>坐标轴刻度标签的相关设置。</p>\n","properties":{"inside":{"type":["boolean"],"description":"<p>刻度标签是否朝内,默认朝外。</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>\n<p>旋转的角度从 -90 度到 90 度。</p>\n","default":0},"margin":{"type":["number"],"description":"<p>刻度标签与轴线之间的距离。</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>刻度标签的内容格式器,支持字符串模板和回调函数两种形式。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为刻度默认标签 {value}\nformatter: &#39;{value} kg&#39;\n\n// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引\nformatter: function (value, index) {\n    // 格式化成月/日,只在第一个刻度显示年份\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>是否显示最小 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)。</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>是否显示最大 tick 的 label。可取值 <code>true</code>, <code>false</code>, <code>null</code>。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>刻度标签文字的颜色,默认取 <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a>。支持回调函数,格式如下</p>\n<pre><code class=\"lang-js\">(val: string) =&gt; Color\n</code></pre>\n<p>参数是标签的文本,返回颜色值,如下示例:</p>\n<pre><code class=\"lang-js\">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>在 <code>rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中,可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号:\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意,换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>文字的颜色。</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p>文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>文字的字体大小</p>\n","default":12},"align":{"type":["string"],"description":"<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>align</code>,则会取父层级的 <code>align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`,则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p><code>rich</code> 中如果没有设置 <code>verticalAlign</code>,则会取父层级的 <code>verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"backgroundColor":{"type":["string","Object"],"description":"<p>文字块背景色。</p>\n<p>可以是直接的颜色值,例如:<code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>可以支持使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL,\n    // 或者图片的 dataURI,\n    // 或者 HTMLImageElement 对象,\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code>width</code> 或 <code>height</code> 指定高宽,也可以不指定自适应。</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>文字块边框颜色。</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>文字块边框宽度。</p>\n","default":0},"borderRadius":{"type":["number","Array"],"description":"<p>文字块的圆角。</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>文字块的内边距。例如:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>:表示 <code>[上, 右, 下, 左]</code> 的边距。</li>\n<li><code>padding: 4</code>:表示 <code>padding: [4, 4, 4, 4]</code>。</li>\n<li><code>padding: [3, 4]</code>:表示 <code>padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>文字块的背景阴影颜色。</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>文字块的背景阴影长度。</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>文字块的背景阴影 X 偏移。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>文字块的背景阴影 Y 偏移。</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n<!-- Overwrite color -->","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔线。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示分隔线。默认数值轴显示,类目轴不显示。</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>分隔线颜色,可以设置成单个颜色。</p>\n<p>也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。</p>\n<p>示例</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // 使用深浅的间隔色\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>分隔线线宽。</p>\n","default":1},"type":{"type":["string"],"description":"<p>分隔线线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n<!-- overwrite color -->"}}}}},"splitArea":{"type":["Object"],"description":"<p>坐标轴在 <a href=\"#grid\">grid</a> 区域中的分隔区域,默认不显示。</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>是否显示分隔区域。</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>分隔区域的样式设置。</p>\n","properties":{"color":{"type":["Array"],"description":"<p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}}}},"indicator":{"type":["Array"],"description":"<p>雷达图的指示器,用来指定雷达图中的多个变量(维度),如下示例。</p>\n<pre><code class=\"lang-js\">indicator: [\n   { name: &#39;销售(sales)&#39;, max: 6500},\n   { name: &#39;管理(Administration)&#39;, max: 16000, color: &#39;red&#39;}, // 标签设置为红色\n   { name: &#39;信息技术(Information Techology)&#39;, max: 30000},\n   { name: &#39;客服(Customer Support)&#39;, max: 38000},\n   { name: &#39;研发(Development)&#39;, max: 52000},\n   { name: &#39;市场(Marketing)&#39;, max: 25000}\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>指示器名称。</p>\n"},"max":{"type":["number"],"description":"<p>指示器的最大值,可选,建议设置</p>\n"},"min":{"type":["number"],"description":"<p>指示器的最小值,可选,默认为 0。</p>\n"},"color":{"type":["string"],"description":"<p>标签特定的颜色。</p>\n"}}}}}},"dataZoom":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>内置型数据区域缩放组件(dataZoomInside)</strong></p>\n<p>(参考<a href=\"#dataZoom\">数据区域缩放组件(dataZoom)的介绍</a>)</p>\n<p>所谓『内置』,即内置在坐标系中。</p>\n<ul>\n<li>平移:在坐标系中滑动拖拽进行数据区域平移。</li>\n<li>缩放:<ul>\n<li>PC端:鼠标在坐标系范围内滚轮滚动(MAC触控板类同)</li>\n<li>移动端:在移动端触屏上,支持两指滑动缩放。</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'inside'"},"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"disabled":{"type":["boolean"],"description":"<p>是否停止组件的功能。</p>\n","default":false},"xAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-inside</code> 组件控制的 <code>x轴</code>(即<a href=\"#xAxis\">xAxis</a>,是直角坐标系中的概念,参见 <a href=\"#grid\">grid</a>)。</p>\n<p>不指定时,当 <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> 为 <code>&#39;horizontal&#39;</code>时,默认控制和 dataZoom 平行的第一个 <code>xAxis</code>。但是不建议使用默认值,建议显式指定。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    xAxis: [\n        {...}, // 第一个 xAxis\n        {...}, // 第二个 xAxis\n        {...}, // 第三个 xAxis\n        {...}  // 第四个 xAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis\n        },\n        { // 第二个 dataZoom 组件\n            xAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 xAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-inside</code> 组件控制的 <code>y轴</code>(即<a href=\"#yAxis\">yAxis</a>,是直角坐标系中的概念,参见 <a href=\"#grid\">grid</a>)。</p>\n<p>不指定时,当 <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> 为 <code>&#39;vertical&#39;</code>时,默认控制和 dataZoom 平行的第一个 <code>yAxis</code>。但是不建议使用默认值,建议显式指定。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    yAxis: [\n        {...}, // 第一个 yAxis\n        {...}, // 第二个 yAxis\n        {...}, // 第三个 yAxis\n        {...}  // 第四个 yAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis\n        },\n        { // 第二个 dataZoom 组件\n            yAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 yAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-inside</code> 组件控制的 <code>radius 轴</code>(即<a href=\"#radiusAxis\">radiusAxis</a>,是直角坐标系中的概念,参见 <a href=\"#polar\">polar</a>)。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    radiusAxis: [\n        {...}, // 第一个 radiusAxis\n        {...}, // 第二个 radiusAxis\n        {...}, // 第三个 radiusAxis\n        {...}  // 第四个 radiusAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis\n        },\n        { // 第二个 dataZoom 组件\n            radiusAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 radiusAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-inside</code> 组件控制的 <code>angle 轴</code>(即<a href=\"#angleAxis\">angleAxis</a>,是直角坐标系中的概念,参见 <a href=\"#polar\">polar</a>)。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    angleAxis: [\n        {...}, // 第一个 angleAxis\n        {...}, // 第二个 angleAxis\n        {...}, // 第三个 angleAxis\n        {...}  // 第四个 angleAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            angleAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 angleAxis\n        },\n        { // 第二个 dataZoom 组件\n            angleAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 angleAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p><code>dataZoom</code> 的运行原理是通过 <code>数据过滤</code> 来达到 <code>数据窗口缩放</code> 的效果。数据过滤模式的设置不同,效果也不同。</p>\n<p>可选值为:</p>\n<ul>\n<li><p>&#39;filter&#39;:当前数据窗口外的数据,被 <strong>过滤掉</strong>。即 <strong>会</strong> 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。</p>\n</li>\n<li><p>&#39;weakFilter&#39;:当前数据窗口外的数据,被 <strong>过滤掉</strong>。即 <strong>会</strong> 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。</p>\n</li>\n<li><p>&#39;empty&#39;:当前数据窗口外的数据,被 <strong>设置为空</strong>。即 <strong>不会</strong> 影响其他轴的数据范围。</p>\n</li>\n<li><p>&#39;none&#39;: 不过滤数据,只改变数轴范围。</p>\n</li>\n</ul>\n<p>如何设置,由用户根据场景和需求自己决定。经验来说:</p>\n<ul>\n<li><p>当『只有 X 轴 或 只有 Y 轴受 <code>dataZoom</code> 组件控制』时,常使用 <code>filterMode: &#39;filter&#39;</code>,这样能使另一个轴自适应过滤后的数值范围。</p>\n</li>\n<li><p>当『X 轴 Y 轴分别受 <code>dataZoom</code> 组件控制』时:</p>\n<ul>\n<li><p>如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 <code>fiterMode: &#39;empty&#39;</code>。</p>\n</li>\n<li><p>如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 <code>dataZoomX</code> 改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 <code>dataZoomY</code> 改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 <code>fiterMode: &#39;filter&#39;</code>,Y 轴设为 <code>fiterMode: &#39;empty&#39;</code>,即主轴 <code>&#39;filter&#39;</code>,辅轴 <code>&#39;empty&#39;</code>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>下面是个具体例子:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // 第一列对应 X 轴,第二列对应 Y 轴。\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>上例中,<code>dataZoomX</code> 的 <code>filterMode</code> 设置为 <code>&#39;filter&#39;</code>。于是,假设当用户拖拽 <code>dataZoomX</code>(不去动 <code>dataZoomY</code>)导致其 valueWindow 变为 <code>[2, 50]</code> 时,<code>dataZoomX</code> 对 series.data 的第一列进行遍历,窗口外的整项去掉,最终得到的 series.data 为:</p>\n<pre><code class=\"lang-javascript\">[\n    // 第一列对应 X 轴,第二列对应 Y 轴。\n    [12, 24, 36],\n    // [90, 80, 70] 整项被过滤掉,因为 90 在 dataWindow 之外。\n    [3, 9, 27]\n    // [1, 11, 111] 整项被过滤掉,因为 1 在 dataWindow 之外。\n]\n</code></pre>\n<p>过滤前,series.data 中对应 Y 轴的值有 <code>24</code>、<code>80</code>、<code>9</code>、<code>11</code>,过滤后,只剩下 <code>24</code> 和 <code>9</code>,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 <code>min</code>、<code>max</code> 固定其显示范围的话)。</p>\n<p>所以,<code>filterMode: &#39;filter&#39;</code> 的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。</p>\n<p>再从头来,上例中 <code>dataZoomY</code> 的 <code>filterMode</code> 设置为 <code>&#39;empty&#39;</code>。于是,假设当用户拖拽 <code>dataZoomY</code>(不去动 <code>dataZoomX</code>)导致其 dataWindow 变为 <code>[10, 60]</code> 时,<code>dataZoomY</code> 对 series.data 的第二列进行遍历,窗口外的值被设置为 empty (即替换为 NaN,这样设置为空的项,其所对应柱形,在 X 轴还有占位,只是不显示出来)。最终得到的 series.data 为:</p>\n<pre><code class=\"lang-javascript\">[\n    // 第一列对应 X 轴,第二列对应 Y 轴。\n    [12, 24, 36],\n    [90, NaN, 70], // 设置为 empty (NaN)\n    [3, NaN, 27],  // 设置为 empty (NaN)\n    [1, 11, 111]\n]\n</code></pre>\n<p>这时,series.data 中对应于 X 轴的值仍然全部保留不受影响,为 <code>12</code>、<code>90</code>、<code>3</code>、<code>1</code>。那么用户对 <code>dataZoomY</code> 的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。</p>\n<p>如下面的例子:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> 和 <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> 共同用 <strong>百分比</strong> 的形式定义了数据窗口范围。</p>\n","default":0},"end":{"type":["number"],"description":"<p>数据窗口范围的结束百分比。范围是:0 ~ 100。</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> 和 <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> 共同用 <strong>百分比</strong> 的形式定义了数据窗口范围。</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>数据窗口范围的起始数值。如果设置了 <a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> 则 <code>startValue</code> 失效。</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> 和 <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> 共同用 <strong>绝对数值</strong> 的形式定义了数据窗口范围。</p>\n<p>注意,如果轴的类型为 <code>category</code>,则 <code>startValue</code> 既可以设置为 <code>axis.data</code> 数组的 <code>index</code>,也可以设置为数组值本身。\n但是如果设置为数组值本身,会在内部自动转化为数组的 index。</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>数据窗口范围的结束数值。如果设置了 <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> 则 <code>endValue</code> 失效。</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> 和 <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> 共同用 <strong>绝对数值</strong> 的形式定义了数据窗口范围。</p>\n<p>注意,如果轴的类型为 <code>category</code>,则 <code>endValue</code> 即可以设置为 <code>axis.data</code> 数组的 <code>index</code>,也可以设置为数组值本身。\n但是如果设置为数组值本身,会在内部自动转化为数组的 index。</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>用于限制窗口大小的最小值(百分比值),取值范围是 <code>0</code> ~ <code>100</code>。</p>\n<p>如果设置了 <a href=\"#dataZoom-inside.minValueSpan\">dataZoom-inside.minValueSpan</a> 则 <code>minSpan</code> 失效。</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>用于限制窗口大小的最大值(百分比值),取值范围是 <code>0</code> ~ <code>100</code>。</p>\n<p>如果设置了 <a href=\"#dataZoom-inside.maxValueSpan\">dataZoom-inside.maxValueSpan</a> 则 <code>maxSpan</code> 失效。</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>用于限制窗口大小的最小值(实际数值)。</p>\n<p>如在时间轴上可以设置为:<code>3600 * 24 * 1000 * 5</code> 表示 5 天。\n在类目轴上可以设置为 <code>5</code> 表示 5 个类目。</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>用于限制窗口大小的最大值(实际数值)。</p>\n<p>如在时间轴上可以设置为:<code>3600 * 24 * 1000 * 5</code> 表示 5 天。\n在类目轴上可以设置为 <code>5</code> 表示 5 个类目。</p>\n","default":null},"orient":{"type":["string"],"description":"<p>布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。</p>\n<p>可选值为:</p>\n<ul>\n<li><p><code>&#39;horizontal&#39;</code>:水平。</p>\n</li>\n<li><p><code>&#39;vertical&#39;</code>:竖直。</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>是否锁定选择区域(或叫做数据窗口)的大小。</p>\n<p>如果设置为 <code>true</code> 则锁定选择区域的大小,也就是说,只能平移,不能缩放。</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>设置触发视图刷新的频率。单位为毫秒(ms)。</p>\n<p>如果 <a href=\"#animation\">animation</a> 设为 <code>true</code> 且 <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> 大于 <code>0</code>,可以保持 <code>throttle</code> 为默认值 <code>100</code>(或者设置为大于 <code>0</code> 的值),否则拖拽时有可能画面感觉卡顿。</p>\n<p>如果 <a href=\"#animation\">animation</a> 设为 <code>false</code> 或者 <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> 设为 <code>0</code>,且在数据量不大时,拖拽时画面感觉卡顿,可以把尝试把 <code>throttle</code> 设为 <code>0</code> 来改善。</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>例如 <code>rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code>,表示 start 值取绝对数值,end 取百分比。</p>\n<p>可选值为:<code>&#39;value&#39;</code>, <code>&#39;percent&#39;</code></p>\n"},"zoomOnMouseWheel":{"type":["boolean"],"description":"<p>如何触发缩放。可选值为:</p>\n<ul>\n<li><code>true</code>:表示不按任何功能键,鼠标滚轮能触发缩放。</li>\n<li><code>false</code>:表示鼠标滚轮不能触发缩放。</li>\n<li><code>&#39;shift&#39;</code>:表示按住 <code>shift</code> 和鼠标滚轮能触发缩放。</li>\n<li><code>&#39;ctrl&#39;</code>:表示按住 <code>ctrl</code> 和鼠标滚轮能触发缩放。</li>\n<li><code>&#39;alt&#39;</code>:表示按住 <code>alt</code> 和鼠标滚轮能触发缩放。</li>\n</ul>\n","default":true},"moveOnMouseMove":{"type":["boolean"],"description":"<p>如何触发数据窗口平移。可选值为:</p>\n<ul>\n<li><code>true</code>:表示不按任何功能键,鼠标移动能触发数据窗口平移。</li>\n<li><code>false</code>:表示鼠标滚轮不能触发平移。</li>\n<li><code>&#39;shift&#39;</code>:表示按住 <code>shift</code> 和鼠标移动能触发数据窗口平移。</li>\n<li><code>&#39;ctrl&#39;</code>:表示按住 <code>ctrl</code> 和鼠标移动能触发数据窗口平移。</li>\n<li><code>&#39;alt&#39;</code>:表示按住 <code>alt</code> 和鼠标移动能触发数据窗口平移。</li>\n</ul>\n","default":true},"preventDefaultMouseMove":{"type":["boolean"],"description":"<p>是否阻止 mousemove 事件的默认行为。</p>\n","default":true}}},{"type":["Object"],"description":"<p><strong>滑动条型数据区域缩放组件(dataZoomSlider)</strong></p>\n<p>(参考<a href=\"#dataZoom\">数据区域缩放组件(dataZoom)的介绍</a>)</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'slider'"},"id":{"type":["string"],"description":"<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"},"show":{"type":["boolean"],"description":"<p>是否显示  组件。如果设置为 <code>false</code>,不会显示,但是数据过滤的功能还存在。</p>\n","default":true},"backgroundColor":{"type":["Color"],"description":"<p>组件的背景颜色。</p>\n","default":"'rgba(47,69,84,0)'"},"dataBackground":{"type":["Object"],"description":"<p>数据阴影的样式。</p>\n","properties":{"lineStyle":{"type":["Object"],"description":"<p>阴影的线条样式</p>\n","properties":{"color":{"type":["Color"],"description":"<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#2f4554"},"width":{"type":["number"],"description":"<p>线宽。</p>\n","default":0.5},"type":{"type":["string"],"description":"<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n","default":0.3}}},"areaStyle":{"type":["Object"],"description":"<p>阴影的填充样式</p>\n","properties":{"color":{"type":["Color"],"description":"<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"rgba(47,69,84,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n","default":0.3}}}}},"fillerColor":{"type":["Color"],"description":"<p>选中范围的填充颜色。</p>\n","default":"'rgba(167,183,204,0.4)'"},"borderColor":{"type":["Color"],"description":"<p>边框颜色。</p>\n","default":"'#ddd'"},"handleIcon":{"type":["string"],"description":"<p>手柄的 icon 形状,支持路径字符串,默认为:</p>\n<pre><code class=\"lang-js\">&#39;M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z&#39;\n</code></pre>\n<p>可以通过 <code>&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code>dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code>dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>自定义 icon 见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-simple\" target=\"_blank\">示例 area-simple</a></p>\n"},"handleSize":{"type":["number"],"description":"<p>控制手柄的尺寸,可以是像素大小,也可以是相对于 dataZoom 组件宽度的百分比,默认跟 dataZoom 宽度相同。</p>\n","default":"'100%'"},"handleStyle":{"type":["Object"],"description":"<p>手柄的样式配置,见 <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-simple\" target=\"_blank\">示例 area-simple</a></p>\n","properties":{"color":{"type":["Color"],"description":"<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code>&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code>&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // 0% 处的颜色\n    }, {\n        offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n    }],\n    globalCoord: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n    repeat: &#39;repeat&#39; // 是否平铺, 可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n","default":"#a7b7cc"},"borderColor":{"type":["Color"],"description":"<p>图形的描边颜色。支持的颜色格式同 <code>color</code>,不支持回调函数。</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>描边线宽。为 0 时无描边。</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>柱条的描边类型,默认为实线,支持 <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, <code>&#39;dotted&#39;</code>。</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>阴影颜色。支持的格式同<code>color</code>。</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>阴影水平方向上的偏移距离。</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>阴影垂直方向上的偏移距离。</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n"}}},"labelPrecision":{"type":["number"],"description":"<p>显示label的小数精度。默认根据数据自动决定。</p>\n","default":"'auto'"},"labelFormatter":{"type":["string","Function"],"description":"<p>显示的label的格式化器。</p>\n<ul>\n<li><p>如果为 <code>string</code>,表示模板,例如:<code>aaaa{value}bbbb</code>,其中<code>{value}</code>会被替换为实际的数值。</p>\n</li>\n<li><p>如果为 <code>Function</code>,表示回调函数,例如:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">/**\n * @param {*} value 如果 axis.type 为 &#39;category&#39;,则 `value` 为 axis.data 的 index。\n *                  否则 `value` 是当前值。\n * @param {strign} valueStr 内部格式化的结果。\n * @return {string} 返回最终的label内容。\n */\nlabelFormatter: function (value) {\n    return &#39;aaa&#39; + value + &#39;bbb&#39;;\n}\n</code></pre>\n","default":null},"showDetail":{"type":["boolean"],"description":"<p>是否显示detail,即拖拽时候显示详细数值信息。</p>\n","default":true},"showDataShadow":{"type":["string"],"description":"<p>是否在 <code>dataZoom-silder</code> 组件中显示数据阴影。数据阴影可以简单地反应数据走势。</p>\n","default":"'auto'"},"realtime":{"type":["boolean"],"description":"<p>拖动时,是否实时更新系列的视图。如果设置为 <code>false</code>,则只在拖拽结束的时候更新。</p>\n","default":true},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>dataZoom 文字的颜色。</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>dataZoom 文字字体的风格</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>dataZoom 文字字体的粗细</p>\n<p>可选:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>dataZoom 文字的字体系列</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>dataZoom 文字的字体大小</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>行高。</p>\n<p><code>rich</code> 中如果没有设置 <code>lineHeight</code>,则会取父层级的 <code>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"},"width":{"type":["number","string"],"description":"<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p><code>width</code> 也可以是百分比字符串,如 <code>&#39;100%&#39;</code>。表示的是所在文本块的 <code>contentWidth</code>(即不包含文本块的 <code>padding</code>)的百分之多少。之所以以 <code>contentWidth</code> 做基数,因为每个文本片段只能基于 <code>content box</code> 布局。如果以 <code>outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"height":{"type":["number","string"],"description":"<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code>backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code>width</code> 和 <code>height</code> 指定的是内容高宽,不包含 <code>padding</code>。</p>\n<p>注意,如果不定义 <code>rich</code> 属性,则不能指定 <code>width</code> 和 <code>height</code>。</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>文字本身的描边颜色。</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>文字本身的描边宽度。</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>文字本身的阴影颜色。</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>文字本身的阴影长度。</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>文字本身的阴影 X 偏移。</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>文字本身的阴影 Y 偏移。</p>\n","default":0}}},"xAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-slider</code> 组件控制的 <code>x轴</code>(即<a href=\"#xAxis\">xAxis</a>,是直角坐标系中的概念,参见 <a href=\"#grid\">grid</a>)。</p>\n<p>不指定时,当 <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> 为 <code>&#39;horizontal&#39;</code>时,默认控制和 dataZoom 平行的第一个 <code>xAxis</code>。但是不建议使用默认值,建议显式指定。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    xAxis: [\n        {...}, // 第一个 xAxis\n        {...}, // 第二个 xAxis\n        {...}, // 第三个 xAxis\n        {...}  // 第四个 xAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis\n        },\n        { // 第二个 dataZoom 组件\n            xAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 xAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-slider</code> 组件控制的 <code>y轴</code>(即<a href=\"#yAxis\">yAxis</a>,是直角坐标系中的概念,参见 <a href=\"#grid\">grid</a>)。</p>\n<p>不指定时,当 <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> 为 <code>&#39;vertical&#39;</code>时,默认控制和 dataZoom 平行的第一个 <code>yAxis</code>。但是不建议使用默认值,建议显式指定。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    yAxis: [\n        {...}, // 第一个 yAxis\n        {...}, // 第二个 yAxis\n        {...}, // 第三个 yAxis\n        {...}  // 第四个 yAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis\n        },\n        { // 第二个 dataZoom 组件\n            yAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 yAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-slider</code> 组件控制的 <code>radius 轴</code>(即<a href=\"#radiusAxis\">radiusAxis</a>,是直角坐标系中的概念,参见 <a href=\"#polar\">polar</a>)。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    radiusAxis: [\n        {...}, // 第一个 radiusAxis\n        {...}, // 第二个 radiusAxis\n        {...}, // 第三个 radiusAxis\n        {...}  // 第四个 radiusAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis\n        },\n        { // 第二个 dataZoom 组件\n            radiusAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 radiusAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>设置 <code>dataZoom-slider</code> 组件控制的 <code>angle 轴</code>(即<a href=\"#angleAxis\">angleAxis</a>,是直角坐标系中的概念,参见 <a href=\"#polar\">polar</a>)。</p>\n<p>如果是 <code>number</code> 表示控制一个轴,如果是 <code>Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option:</p>\n<pre><code class=\"lang-javascript\">option: {\n    angleAxis: [\n        {...}, // 第一个 angleAxis\n        {...}, // 第二个 angleAxis\n        {...}, // 第三个 angleAxis\n        {...}  // 第四个 angleAxis\n    ],\n    dataZoom: [\n        { // 第一个 dataZoom 组件\n            angleAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 angleAxis\n        },\n        { // 第二个 dataZoom 组件\n            angleAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 angleAxis\n        }\n    ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p><code>dataZoom</code> 的运行原理是通过 <code>数据过滤</code> 来达到 <code>数据窗口缩放</code> 的效果。数据过滤模式的设置不同,效果也不同。</p>\n<p>可选值为:</p>\n<ul>\n<li><p>&#39;filter&#39;:当前数据窗口外的数据,被 <strong>过滤掉</strong>。即 <strong>会</strong> 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。</p>\n</li>\n<li><p>&#39;weakFilter&#39;:当前数据窗口外的数据,被 <strong>过滤掉</strong>。即 <strong>会</strong> 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。</p>\n</li>\n<li><p>&#39;empty&#39;:当前数据窗口外的数据,被 <strong>设置为空</strong>。即 <strong>不会</strong> 影响其他轴的数据范围。</p>\n</li>\n<li><p>&#39;none&#39;: 不过滤数据,只改变数轴范围。</p>\n</li>\n</ul>\n<p>如何设置,由用户根据场景和需求自己决定。经验来说:</p>\n<ul>\n<li><p>当『只有 X 轴 或 只有 Y 轴受 <code>dataZoom</code> 组件控制』时,常使用 <code>filterMode: &#39;filter&#39;</code>,这样能使另一个轴自适应过滤后的数值范围。</p>\n</li>\n<li><p>当『X 轴 Y 轴分别受 <code>dataZoom</code> 组件控制』时:</p>\n<ul>\n<li><p>如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 <code>fiterMode: &#39;empty&#39;</code>。</p>\n</li>\n<li><p>如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 <code>dataZoomX</code> 改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 <code>dataZoomY</code> 改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 <code>fiterMode: &#39;filter&#39;</code>,Y 轴设为 <code>fiterMode: &#39;empty&#39;</code>,即主轴 <code>&#39;filter&#39;</code>,辅轴 <code>&#39;empty&#39;</code>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>下面是个具体例子:</p>\n<pre><code class=\"lang-javascript\">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // 第一列对应 X 轴,第二列对应 Y 轴。\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>上例中,<code>dataZoomX</code> 的 <code>filterMode</code> 设置为 <code>&#39;filter&#39;</code>。于是,假设当用户拖拽 <code>dataZoomX</code>(不去动 <code>dataZoomY</code>)导致其 valueWindow 变为 <code>[2, 50]</code> 时,<code>dataZoomX</code> 对 series.data 的第一列进行遍历,窗口外的整项去掉,最终得到的 series.data 为:</p>\n<pre><code class=\"lang-javascript\">[\n    // 第一列对应 X 轴,第二列对应 Y 轴。\n    [12, 24, 36],\n    // [90, 80, 70] 整项被过滤掉,因为 90 在 dataWindow 之外。\n    [3, 9, 27]\n    // [1, 11, 111] 整项被过滤掉,因为 1 在 dataWindow 之外。\n]\n</code></pre>\n<p>过滤前,series.data 中对应 Y 轴的值有 <code>24</code>、<code>80</code>、<code>9</code>、<code>11</code>,过滤后,只剩下 <code>24</code> 和 <code>9</code>,那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示(如果 Y 轴没有被设置 <code>min</code>、<code>max</code> 固定其显示范围的话)。</p>\n<p>所以,<code>filterMode: &#39;filter&#39;</code> 的效果是:过滤数据后使另外的轴也能自动适应当前数据的范围。</p>\n<p>再从头来,上例中 <code>dataZoomY</code> 的 <code>filterMode</code> 设置为 <code>&#39;empty&#39;</code>。于是,假设当用户拖拽 <code>dataZoomY</code>(不去动 <code>dataZoomX</code>)导致其 dataWindow 变为 <code>[10, 60]</code> 时,<code>dataZoomY</code> 对 series.data 的第二列进行遍历,窗口外的值被设置为 empty (即替换为 NaN,这样设置为空的项,其所对应柱形,在 X 轴还有占位,只是不显示出来)。最终得到的 series.data 为:</p>\n<pre><code class=\"lang-javascript\">[\n    // 第一列对应 X 轴,第二列对应 Y 轴。\n    [12, 24, 36],\n    [90, NaN, 70], // 设置为 empty (NaN)\n    [3, NaN, 27],  // 设置为 empty (NaN)\n    [1, 11, 111]\n]\n</code></pre>\n<p>这时,series.data 中对应于 X 轴的值仍然全部保留不受影响,为 <code>12</code>、<code>90</code>、<code>3</code>、<code>1</code>。那么用户对 <code>dataZoomY</code> 的拖拽操作不会影响到 X 轴的范围。这样的效果,对于离群点(outlier)过滤功能,比较清晰。</p>\n<p>如下面的例子:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> 和 <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> 共同用 <strong>百分比</strong> 的形式定义了数据窗口范围。</p>\n","default":0},"end":{"type":["number"],"description":"<p>数据窗口范围的结束百分比。范围是:0 ~ 100。</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> 和 <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> 共同用 <strong>百分比</strong> 的形式定义了数据窗口范围。</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>数据窗口范围的起始数值。如果设置了 <a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> 则 <code>startValue</code> 失效。</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> 和 <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> 共同用 <strong>绝对数值</strong> 的形式定义了数据窗口范围。</p>\n<p>注意,如果轴的类型为 <code>category</code>,则 <code>startValue</code> 既可以设置为 <code>axis.data</code> 数组的 <code>index</code>,也可以设置为数组值本身。\n但是如果设置为数组值本身,会在内部自动转化为数组的 index。</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>数据窗口范围的结束数值。如果设置了 <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> 则 <code>endValue</code> 失效。</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> 和 <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> 共同用 <strong>绝对数值</strong> 的形式定义了数据窗口范围。</p>\n<p>注意,如果轴的类型为 <code>category</code>,则 <code>endValue</code> 即可以设置为 <code>axis.data</code> 数组的 <code>index</code>,也可以设置为数组值本身。\n但是如果设置为数组值本身,会在内部自动转化为数组的 index。</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>用于限制窗口大小的最小值(百分比值),取值范围是 <code>0</code> ~ <code>100</code>。</p>\n<p>如果设置了 <a href=\"#dataZoom-slider.minValueSpan\">dataZoom-slider.minValueSpan</a> 则 <code>minSpan</code> 失效。</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>用于限制窗口大小的最大值(百分比值),取值范围是 <code>0</code> ~ <code>100</code>。</p>\n<p>如果设置了 <a href=\"#dataZoom-slider.maxValueSpan\">dataZoom-slider.maxValueSpan</a> 则 <code>maxSpan</code> 失效。</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>用于限制窗口大小的最小值(实际数值)。</p>\n<p>如在时间轴上可以设置为:<code>3600 * 24 * 1000 * 5</code> 表示 5 天。\n在类目轴上可以设置为 <code>5</code> 表示 5 个类目。</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>用于限制窗口大小的最大值(实际数值)。</p>\n<p>如在时间轴上可以设置为:<code>3600 * 24 * 1000 * 5</code> 表示 5 天。\n在类目轴上可以设置为 <code>5</code> 表示 5 个类目。</p>\n","default":null},"orient":{"type":["string"],"description":"<p>布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。</p>\n<p>可选值为:</p>\n<ul>\n<li><p><code>&#39;horizontal&#39;</code>:水平。</p>\n</li>\n<li><p><code>&#39;vertical&#39;</code>:竖直。</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>是否锁定选择区域(或叫做数据窗口)的大小。</p>\n<p>如果设置为 <code>true</code> 则锁定选择区域的大小,也就是说,只能平移,不能缩放。</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>设置触发视图刷新的频率。单位为毫秒(ms)。</p>\n<p>如果 <a href=\"#animation\">animation</a> 设为 <code>true</code> 且 <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> 大于 <code>0</code>,可以保持 <code>throttle</code> 为默认值 <code>100</code>(或者设置为大于 <code>0</code> 的值),否则拖拽时有可能画面感觉卡顿。</p>\n<p>如果 <a href=\"#animation\">animation</a> 设为 <code>false</code> 或者 <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> 设为 <code>0</code>,且在数据量不大时,拖拽时画面感觉卡顿,可以把尝试把 <code>throttle</code> 设为 <code>0</code> 来改善。</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>例如 <code>rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code>,表示 start 值取绝对数值,end 取百分比。</p>\n<p>可选值为:<code>&#39;value&#39;</code>, <code>&#39;percent&#39;</code></p>\n"},"zlevel":{"type":["number"],"description":"<p>所有图形的 zlevel 值。</p>\n<p><code>zlevel</code>用于 Canvas 分层,不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>\n","default":0},"z":{"type":["number"],"description":"<p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>\n<p><code>z</code>相比<code>zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>dataZoom-slider组件离容器左侧的距离。</p>\n<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>。</p>\n<p>如果 <code>left</code> 的值为<code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>dataZoom-slider组件离容器上侧的距离。</p>\n<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>。</p>\n<p>如果 <code>top</code> 的值为<code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>,组件会根据相应的位置自动对齐。</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>dataZoom-slider组件离容器右侧的距离。</p>\n<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>dataZoom-slider组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值,可以是像 <code>&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n","default":"'auto'"}}}]},"description":"<p><code>dataZoom</code> 组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。</p>\n<p>现在支持这几种类型的 <code>dataZoom</code> 组件:</p>\n<ul>\n<li><p><a href=\"#dataZoom-inside\">内置型数据区域缩放组件(dataZoomInside)</a>:内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系。</p>\n</li>\n<li><p><a href=\"#dataZoom-slider\">滑动条型数据区域缩放组件(dataZoomSlider)</a>:有单独的滑动条,用户在滑动条上进行缩放或漫游。</p>\n</li>\n<li><p><a href=\"#toolbox.feature.dataZoom\">框选型数据区域缩放组件(dataZoomSelect)</a>:提供一个选框进行数据区域缩放。即 <a href=\"#toolbox.feature.dataZoom\">toolbox.feature.dataZoom</a>,配置项在 <code>toolbox</code> 中。</p>\n</li>\n</ul>\n<p>如下例子:</p>\n<iframe data-src=\"https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></ifr