Google Git
Sign in
apache / echarts-doc / b90521b623fdce39563245867299280f427d8709 / . / public / documents / option.html
blob: 2b617317b1bf5e1cfe1c96d9840b7076d59b96b8 [file] [log] [blame]
<html><head><meta charset="utf-8"></head><body><div class="container"><h3 class="opt">hoverLayerThreshold</h3><p>图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层。</p>
<p>单独的 hover 层主要是为了在高亮图形的时候不需要重绘整个图表，只需要把高亮的图形放入单独的一个 canvas 层进行绘制，防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿。</p>
<p>ECharts 2 里是底层强制使用单独的层绘制高亮图形，但是会带来很多问题，比如高亮的图形可能会不正确的遮挡所有其它图形，还有图形有透明度因为高亮和正常图形叠加导致不正确的透明度显示，还有移动端上因为每个图表都要多一个 canvas 带来的额外内存开销。因此 3 里默认不会开启该优化，只有在图形数量特别多，有必要做该优化时才会自动开启。</p>
<h3 class="opt">blendMode</h3><p>图形的混合模式，不同的混合模式见 <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a> 。</p>
<p>默认为 <code>'source-over'</code>。 支持每个系列单独设置。</p>
<p><code>'lighter'</code> 也是比较常见的一种混合模式，该模式下图形数量集中的区域会颜色叠加成高亮度的颜色（白色）。常常能起到突出该区域的效果。见示例 <a href="http://echarts.baidu.com/gallery/editor.html?c=lines-airline" target="_blank">全球飞行航线</a></p>
<h3 class="opt">progressiveThreshold</h3><p>启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。</p>
<h3 class="opt">progressive</h3><p>渐进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置。</p>
<p>在图中有数千图形甚至好几万图形的时候，一下子把图形绘制出来，或者交互重绘的时候可能会造成界面的卡顿甚至假死，因此 ECharts 从 3.2.0 开始支持大量图形的渐进式渲染（progressive rendering），渲染的时候会把创建好的图形分到数帧中渲染，每一帧渲染只渲染指定数量的图形。</p>
<p>该配置项就是用于配置该系列每一帧渲染的图形数，默认是 400 个，可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢，这个数字就可以设置小一点，而线宽小于等于 1 的 polyline 绘制非常快，该配置项就可以相对调得比较大。</p>
<h3 class="opt">animationDelayUpdate</h3><p>数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>
<p>如下示例：</p>
<pre><code class="lang-js">animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
</code></pre>
<p>也可以看<a href="http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay" target="_blank">该示例</a></p>
<h3 class="opt">animationEasingUpdate</h3><p>数据更新动画的缓动效果。</p>
<h3 class="opt">animationDurationUpdate</h3><p>数据更新动画的时长。</p>
<h3 class="opt">animationDelay</h3><p>初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>
<p>如下示例：</p>
<pre><code class="lang-js">animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
</code></pre>
<p>也可以看<a href="http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay" target="_blank">该示例</a></p>
<h3 class="opt">animationEasing</h3><p>初始动画的缓动效果。不同的缓动效果可以参考 <a href="http://echarts.baidu.com/gallery/editor.html?c=line-easing" target="_blank">缓动示例</a>。</p>
<h3 class="opt">animationDuration</h3><p>初始动画的时长。</p>
<h3 class="opt">animationThreshold = 2000</h3><p>是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>
<h3 class="opt">animation</h3><p>是否开启动画，默认开启。</p>
<h3 class="opt">textStyle</h3><p>全局的字体样式。</p>
<h3 class="opt">textStyle.fontSize</h3><p>文字的字体大小</p>
<h3 class="opt">textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">textStyle.color</h3><p>文字的颜色。</p>
<h3 class="opt">backgroundColor</h3><p>背景色，默认无背景。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">color</h3><p>调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。</p>
<p>默认为：</p>
<pre><code class="lang-js">['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
</code></pre>
<h3 class="opt">series</h3><p>系列列表。每个系列通过 <code>type</code> 决定自己的图表类型</p>
<h3 class="opt">timeline</h3><p><code>timeline</code> 组件，提供了在多个 ECharts <code>option</code> 间进行切换、播放等操作的功能。</p>
<p>示例效果如下：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/mix-timeline-all&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<p><code>timeline</code> 和其他组件有些不同，它需要操作『多个option』。
假设，我们把 ECharts 的传统的 option 称为<em>原子option</em>，那么使用 <code>timeline</code> 时，传入 ECharts 的 option 就成为了一个集合多个原子option的<em>复合option</em>。如下示例：</p>
<pre><code class="lang-javascript">// 如下，baseOption 是一个 『原子option』，options 数组中的每一项也是一个 『原子option』。
// 每个『原子option』中就是本文档中描述的各种配置项。
myChart.setOption(
{
baseOption: {
timeline: {
...,
data: ['2002-01-01', '2003-01-01', '2004-01-01']
},
title: {
subtext: '数据来自国家统计局'
},
grid: {...},
xAxis: [...],
yAxis: [...],
series: [
{ // 系列一的一些其他配置
type: 'bar',
...
},
{ // 系列二的一些其他配置
type: 'line',
...
},
{ // 系列三的一些其他配置
type: 'pie',
...
}
]
},
options: [
{ // 这是'2002-01-01' 对应的 option
title: {
text: '2002年统计值'
},
series: [
{data: []}, // 系列一的数据
{data: []}, // 系列二的数据
{data: []} // 系列三的数据
]
},
{ // 这是'2003-01-01' 对应的 option
title: {
text: '2003年统计值'
},
series: [
{data: []},
{data: []},
{data: []}
]
},
{ // 这是'2004-01-01' 对应的 option
title: {
text: '2004年统计值'
},
series: [
{data: []},
{data: []},
{data: []}
]
}
]
}
);
</code></pre>
<p>在上例中，<code>timeline.data</code> 中的每一项，对应于 <code>options</code> 数组中的每个 <code>option</code>。</p>
<p><br>
<strong>使用注意与最佳实践：</strong></p>
<ul>
<li><p>公有的配置项，推荐配置在 <code>baseOption</code> 中。<code>timeline</code> 播放切换时，会把 <code>options</code> 数组中的对应的 <code>option</code>，与 <code>baseOption</code> 进行 merge 形成最终的 <code>option</code>。</p>
</li>
<li><p><code>options</code> 数组中，如果某一数组项中配置了某个属性，那么其他数组项中也必须配置某个属性，而不能缺省。否则这个属性的执行效果会遗留。</p>
</li>
<li><p><em>复合 option</em> 中的 <code>options</code> 不支持 merge。</p>
<p> 也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是<em>复合 option</em>（即包含 <code>options</code> 列表），那么新的 <code>rawOption.options</code> 列表不会和老的 <code>options</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>
</li>
</ul>
<p><br>
<strong>与 ECharts 2 的兼容性：</strong></p>
<ul>
<li><p>ECharts 3 中不再支持 timeline.notMerge 参数，也就是不支持 notMerge 模式。如果遇到这种场景需要使用，可在外部进行option管理，并用 setOption(option, true) 这样的notMerge方式设置。</p>
</li>
<li><p>ECharts 3 和 ECharts 2 相比，timeline 属性的定义位置有所不同，移到了 <code>baseOption</code> 中，统一作为一个普通的组件看待。但是，仍然兼容 ECharts2 的 timeline 定义位置，只是不再推荐这样写。</p>
</li>
</ul>
<h3 class="opt">timeline.data</h3><p><code>timeline</code> 数据。<code>Array</code> 的每一项，可以是直接的数值。
如果需要对每个数据项单独进行样式定义，则数据项写成 <code>Object</code>。<code>Object</code>中，<code>value</code>属性为数值。其他属性如下例子，可以覆盖 <code>timeline</code> 中的属性配置。</p>
<p>如下例：</p>
<pre><code class="lang-javascript">[
'2002-01-01',
'2003-01-01',
'2004-01-01',
{
value: '2005-01-01',
tooltip: { // 让鼠标悬浮到此项时能够显示 `tooltip`。
formatter: '{b} xxxx'
},
symbol: 'diamond', // 此项的图形的特别设置。
symbolSize: 16 // 此项的图形大小的特别设置。
},
'2006-01-01',
'2007-01-01',
'2008-01-01',
'2009-01-01',
'2010-01-01',
{
value: '2011-01-01',
tooltip: { // 让鼠标悬浮到此项时能够显示 `tooltip`。
formatter: function (params) {
return params.name + 'xxxx';
}
},
symbol: 'diamond',
symbolSize: 18
},
]
</code></pre>
<h3 class="opt">timeline.controlStyle</h3><p>『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。</p>
<h3 class="opt">timeline.controlStyle.emphasis</h3><p>控制按钮的『高亮状态』的样式（hover时）。</p>
<h3 class="opt">timeline.controlStyle.emphasis.borderWidth</h3><p>按钮边框线宽。</p>
<h3 class="opt">timeline.controlStyle.emphasis.borderColor</h3><p>按钮边框颜色。</p>
<h3 class="opt">timeline.controlStyle.emphasis.color</h3><p>按钮颜色。</p>
<h3 class="opt">timeline.controlStyle.normal</h3><p>控制按钮的『正常状态』的样式。</p>
<h3 class="opt">timeline.controlStyle.normal.borderWidth</h3><p>按钮边框线宽。</p>
<h3 class="opt">timeline.controlStyle.normal.borderColor</h3><p>按钮边框颜色。</p>
<h3 class="opt">timeline.controlStyle.normal.color</h3><p>按钮颜色。</p>
<h3 class="opt">timeline.controlStyle.nextIcon</h3><p>『前进按钮』的图形</p>
<p>在 ECharts 3 里可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">timeline.controlStyle.prevIcon</h3><p>『后退按钮』的图形</p>
<p>在 ECharts 3 里可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">timeline.controlStyle.stopIcon</h3><p>『播放按钮』的『可停止状态』的图形。</p>
<p>在 ECharts 3 里可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">timeline.controlStyle.playIcon</h3><p>『播放按钮』的『可播放状态』的图形。</p>
<p>在 ECharts 3 里可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">timeline.controlStyle.position</h3><p>『控制按钮』的位置。</p>
<ul>
<li><p>当 <a href="#timeline.orient">timeline.orient</a> 为 <code>'horizontal'</code>时，<code>'left'</code>、<code>'right'</code>有效。</p>
</li>
<li><p>当 <a href="#timeline.orient">timeline.orient</a> 为 <code>'vertical'</code>时，<code>'top'</code>、<code>'bottom'</code>有效。</p>
</li>
</ul>
<h3 class="opt">timeline.controlStyle.itemGap</h3><p>『控制按钮』的间隔，单位为像素（px）。</p>
<h3 class="opt">timeline.controlStyle.itemSize</h3><p>『控制按钮』的尺寸，单位为像素（px）。</p>
<h3 class="opt">timeline.controlStyle.showNextBtn</h3><p>是否显示『前进按钮』。</p>
<h3 class="opt">timeline.controlStyle.showPrevBtn</h3><p>是否显示『后退按钮』。</p>
<h3 class="opt">timeline.controlStyle.showPlayBtn</h3><p>是否显示『播放按钮』。</p>
<h3 class="opt">timeline.controlStyle.show</h3><p>是否显示『控制按钮』。设置为 <code>false</code> 则全不显示。</p>
<h3 class="opt">timeline.checkpointStyle</h3><p>『当前项』（<code>checkpoint</code>）的图形样式。</p>
<h3 class="opt">timeline.checkpointStyle.animationEasing</h3><p><code>timeline</code>组件中『当前项』（<code>checkpoint</code>）的动画的缓动效果。不同的缓动效果可以参考 <a href="http://echarts.baidu.com/gallery/view.html?c=line-easing" target="_blank">缓动示例</a>。</p>
<h3 class="opt">timeline.checkpointStyle.animationDuration</h3><p><code>timeline</code>组件中『当前项』（<code>checkpoint</code>）的动画时长。</p>
<h3 class="opt">timeline.checkpointStyle.animation</h3><p><code>timeline</code>组件中『当前项』（<code>checkpoint</code>）在 <code>timeline</code> 播放切换中的移动，是否有动画。</p>
<h3 class="opt">timeline.checkpointStyle.borderColor</h3><p><code>timeline</code>组件中『当前项』（<code>checkpoint</code>）的边框颜色。</p>
<h3 class="opt">timeline.checkpointStyle.borderWidth</h3><p><code>timeline</code>组件中『当前项』（<code>checkpoint</code>）的边框宽度。</p>
<h3 class="opt">timeline.checkpointStyle.color</h3><p><code>timeline</code>组件中『当前项』（<code>checkpoint</code>）的颜色。</p>
<h3 class="opt">timeline.checkpointStyle.symbolOffset</h3><p>timeline.checkpointStyle 标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。</p>
<p>例如 <code>[0, '50%']</code> 就是把自己向上移动了一半的位置，在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。</p>
<h3 class="opt">timeline.checkpointStyle.symbolRotate</h3><p>timeline.checkpointStyle 标记的旋转角度。注意在 <code>markLine</code> 中当 <code>symbol</code> 为 <code>'arrow'</code> 时会忽略 <code>symbolRotate</code> 强制设置为切线的角度。</p>
<h3 class="opt">timeline.checkpointStyle.symbolSize</h3><p>timeline.checkpointStyle 标记的大小，可以设置成诸如 <code>10</code> 这样单一的数字，也可以用数组分开表示宽和高，例如 <code>[20, 10]</code> 表示标记宽为<code>20</code>，高为<code>10</code>。</p>
<h3 class="opt">timeline.checkpointStyle.symbol</h3><p>timeline.checkpointStyle 标记的图形。</p>
<p>ECharts 提供的标记类型包括
<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code></p>
<p>也可以通过 <code>'image://url'</code> 设置为图片，其中 url 为图片的链接。</p>
<p>在 ECharts 3 里可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">timeline.itemStyle</h3><p>timeline 图形样式，有 <code>normal</code> 和 <code>emphasis</code> 两个状态。<code>normal</code> 是图形在默认状态下的样式；<code>emphasis</code> 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。</p>
<h3 class="opt">timeline.itemStyle.emphasis</h3><h3 class="opt">timeline.itemStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">timeline.itemStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">timeline.itemStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">timeline.itemStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">timeline.itemStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">timeline.itemStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">timeline.itemStyle.emphasis.borderWidth</h3><p>timeline 描边线宽。为 0 时无描边。</p>
<h3 class="opt">timeline.itemStyle.emphasis.borderColor</h3><p>timeline 图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">timeline.itemStyle.emphasis.color</h3><p>timeline 图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">timeline.itemStyle.normal</h3><h3 class="opt">timeline.itemStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">timeline.itemStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">timeline.itemStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">timeline.itemStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">timeline.itemStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">timeline.itemStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">timeline.itemStyle.normal.borderWidth</h3><p>timeline 描边线宽。为 0 时无描边。</p>
<h3 class="opt">timeline.itemStyle.normal.borderColor</h3><p>timeline 图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">timeline.itemStyle.normal.color</h3><p>timeline 图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">timeline.label</h3><p>轴的文本标签。有 <code>normal</code> 和 <code>emphasis</code> 两个状态，<code>normal</code> 是文本正常的样式，<code>emphasis</code> 是文本高亮的样式，比如鼠标悬浮或者图例联动高亮的时候会使用 <code>emphasis</code> 作为文本的样式。</p>
<h3 class="opt">timeline.label.emphasis</h3><h3 class="opt">timeline.label.emphasis.textStyle</h3><h3 class="opt">timeline.label.emphasis.textStyle.fontSize</h3><p>timeline.lable.emphasis文字的字体大小</p>
<h3 class="opt">timeline.label.emphasis.textStyle.fontFamily</h3><p>timeline.lable.emphasis文字的字体系列</p>
<h3 class="opt">timeline.label.emphasis.textStyle.fontWeight</h3><p>timeline.lable.emphasis文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">timeline.label.emphasis.textStyle.fontStyle</h3><p>timeline.lable.emphasis文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">timeline.label.emphasis.textStyle.color</h3><p>timeline.lable.emphasis文字的颜色。</p>
<h3 class="opt">timeline.label.emphasis.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">timeline.label.emphasis.rotate</h3><p><code>label</code> 的旋转角度。正值表示逆时针旋转。</p>
<h3 class="opt">timeline.label.emphasis.interval</h3><p><code>label</code> 的间隔。当指定为数值时，例如指定为 <code>2</code>，则每隔两个显示一个 label。</p>
<h3 class="opt">timeline.label.emphasis.show</h3><p>是否显示 label。</p>
<h3 class="opt">timeline.label.normal</h3><h3 class="opt">timeline.label.normal.textStyle</h3><h3 class="opt">timeline.label.normal.textStyle.fontSize</h3><p>timeline.lable.normal文字的字体大小</p>
<h3 class="opt">timeline.label.normal.textStyle.fontFamily</h3><p>timeline.lable.normal文字的字体系列</p>
<h3 class="opt">timeline.label.normal.textStyle.fontWeight</h3><p>timeline.lable.normal文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">timeline.label.normal.textStyle.fontStyle</h3><p>timeline.lable.normal文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">timeline.label.normal.textStyle.color</h3><p>timeline.lable.normal文字的颜色。</p>
<h3 class="opt">timeline.label.normal.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">timeline.label.normal.rotate</h3><p><code>label</code> 的旋转角度。正值表示逆时针旋转。</p>
<h3 class="opt">timeline.label.normal.interval</h3><p><code>label</code> 的间隔。当指定为数值时，例如指定为 <code>2</code>，则每隔两个显示一个 label。</p>
<h3 class="opt">timeline.label.normal.show</h3><p>是否显示 label。</p>
<h3 class="opt">timeline.label.position</h3><p>可选的配置方式：</p>
<ul>
<li><p><code>'auto'</code>：
完全自动决定。</p>
</li>
<li><p><code>'left'</code>：
贴左边界放置。
当 <a href="#timeline.orient">timline.orient</a> 为 <code>'vertical'</code> 时有效。</p>
</li>
<li><p><code>'right'</code>：当 <a href="#timeline.orient">timline.orient</a> 为 <code>'vertical'</code> 时有效。
贴右边界放置。</p>
</li>
<li><p><code>'top'</code>：
贴上边界放置。
当 <a href="#timeline.orient">timline.orient</a> 为 <code>'horizontal'</code> 时有效。</p>
</li>
<li><p><code>'bottom'</code>：
贴下边界放置。
当 <a href="#timeline.orient">timline.orient</a> 为 <code>'horizontal'</code> 时有效。</p>
</li>
<li><p><code>number</code>：
指定某个数值时，表示 <code>label</code> 和轴的距离。为 <code>0</code> 时则和坐标轴重合，可以为正负值，决定 <code>label</code> 在坐标轴的哪一边。</p>
</li>
</ul>
<h3 class="opt">timeline.lineStyle</h3><h3 class="opt">timeline.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">timeline.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">timeline.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">timeline.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">timeline.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">timeline.lineStyle.type</h3><p>timeline 线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">timeline.lineStyle.width</h3><p>timeline 线宽。</p>
<h3 class="opt">timeline.lineStyle.color</h3><p>timeline 线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">timeline.lineStyle.show</h3><p>是否显示轴线。可以设置为 <code>false</code> 不显示轴线，则可以做出不同的样式效果。</p>
<h3 class="opt">timeline.symbolOffset</h3><p>timeline标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。</p>
<p>例如 <code>[0, '50%']</code> 就是把自己向上移动了一半的位置，在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。</p>
<h3 class="opt">timeline.symbolRotate</h3><p>timeline标记的旋转角度。注意在 <code>markLine</code> 中当 <code>symbol</code> 为 <code>'arrow'</code> 时会忽略 <code>symbolRotate</code> 强制设置为切线的角度。</p>
<h3 class="opt">timeline.symbolSize</h3><p>timeline标记的大小，可以设置成诸如 <code>10</code> 这样单一的数字，也可以用数组分开表示宽和高，例如 <code>[20, 10]</code> 表示标记宽为<code>20</code>，高为<code>10</code>。</p>
<h3 class="opt">timeline.symbol</h3><p>timeline标记的图形。</p>
<p>ECharts 提供的标记类型包括
<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code></p>
<p>也可以通过 <code>'image://url'</code> 设置为图片，其中 url 为图片的链接。</p>
<p>在 ECharts 3 里可以通过 <code>'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 <code>symbol</code> 的话就是 <code>symbolSize</code>）的大小。路径的格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">timeline.inverse</h3><ul>
<li>是否反向放置 <code>timeline</code>，反向则首位颠倒过来。</li>
</ul>
<h3 class="opt">timeline.orient</h3><p>摆放方式，可选值有：</p>
<ul>
<li><code>'vertical'</code>：竖直放置。</li>
<li><code>'horizontal'</code>：水平放置。</li>
</ul>
<h3 class="opt">timeline.padding</h3><p>timeline内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>
<p>使用示例：</p>
<pre><code class="lang-js">// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
</code></pre>
<h3 class="opt">timeline.bottom</h3><p>timeline组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">timeline.right</h3><p>timeline组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">timeline.top</h3><p>timeline组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">timeline.left</h3><p>timeline组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">timeline.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">timeline.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">timeline.controlPosition</h3><p>表示『播放』按钮的位置。可选值：<code>'left'</code>、<code>'right'</code>。</p>
<h3 class="opt">timeline.realtime</h3><p>拖动圆点的时候，是否实时更新视图。</p>
<h3 class="opt">timeline.playInterval</h3><p>表示播放的速度（跳动的间隔），单位毫秒（ms）。</p>
<h3 class="opt">timeline.loop</h3><p>表示是否循环播放。</p>
<h3 class="opt">timeline.rewind</h3><p>表示是否反向播放。</p>
<h3 class="opt">timeline.autoPlay</h3><p>表示是否自动播放。</p>
<h3 class="opt">timeline.currentIndex</h3><p>表示当前选中项是哪项。比如，<code>currentIndex</code> 为 <code>0</code> 时，表示当前选中项为 <code>timeline.data[0]</code>（即使用 <code>options[0]</code>）。</p>
<h3 class="opt">timeline.axisType</h3><p>轴的类型。可选值为：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
</ul>
<h3 class="opt">timeline.type</h3><p>这个属性目前只支持为 <code>slider</code>，不需要更改。</p>
<h3 class="opt">timeline.show</h3><p>是否显示 <code>timeline</code> 组件。如果设置为<code>false</code>，不会显示，但是功能还存在。</p>
<h3 class="opt">singleAxis</h3><p>单轴。可以被应用到散点图中展现一维数据，如下示例</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=scatter-single-axis&amp;edit=1&amp;reset=1" width="700" height="500"></iframe>
<h3 class="opt">singleAxis.data</h3><p>类目数据，在类目轴（<a href="#singleAxis.type">type</a>: 'category'）中有效。</p>
<p>示例：</p>
<pre><code class="lang-js">// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
</code></pre>
<h3 class="opt">singleAxis.splitArea</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔区域，默认不显示。</p>
<h3 class="opt">singleAxis.splitArea.areaStyle</h3><p>分隔区域的样式设置。</p>
<h3 class="opt">singleAxis.splitArea.areaStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">singleAxis.splitArea.areaStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">singleAxis.splitArea.areaStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">singleAxis.splitArea.areaStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">singleAxis.splitArea.areaStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">singleAxis.splitArea.areaStyle.color</h3><p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>
<h3 class="opt">singleAxis.splitArea.show</h3><p>是否显示分隔区域。</p>
<h3 class="opt">singleAxis.splitArea.interval</h3><p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href="#singleAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">singleAxis.splitLine</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔线。</p>
<h3 class="opt">singleAxis.splitLine.lineStyle</h3><h3 class="opt">singleAxis.splitLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- overwrite color --><h3 class="opt">singleAxis.splitLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">singleAxis.splitLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">singleAxis.splitLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">singleAxis.splitLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">singleAxis.splitLine.lineStyle.type</h3><p>分隔线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">singleAxis.splitLine.lineStyle.width</h3><p>分隔线线宽。</p>
<h3 class="opt">singleAxis.splitLine.lineStyle.color</h3><p>分隔线颜色，可以设置成单个颜色。</p>
<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>
<p>示例</p>
<pre><code>splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
</code></pre><h3 class="opt">singleAxis.splitLine.interval</h3><p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href="#singleAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">singleAxis.splitLine.show</h3><p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>
<h3 class="opt">singleAxis.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">singleAxis.axisLabel.textStyle</h3><h3 class="opt">singleAxis.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">singleAxis.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">singleAxis.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">singleAxis.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">singleAxis.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#singleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">singleAxis.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">singleAxis.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">singleAxis.axisLabel.rotate</h3><p>刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>
<p>旋转的角度从 -90 度到 90 度。</p>
<h3 class="opt">singleAxis.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">singleAxis.axisLabel.interval</h3><p>坐标轴刻度标签的显示间隔，在类目轴中有效。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">singleAxis.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">singleAxis.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">singleAxis.axisTick.lineStyle</h3><h3 class="opt">singleAxis.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">singleAxis.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">singleAxis.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">singleAxis.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">singleAxis.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">singleAxis.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">singleAxis.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">singleAxis.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#singleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">singleAxis.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">singleAxis.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">singleAxis.axisTick.interval</h3><p>坐标轴刻度的显示间隔，在类目轴中有效。默认同 <a href="#singleAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">singleAxis.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">singleAxis.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">singleAxis.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">singleAxis.axisLine.lineStyle</h3><h3 class="opt">singleAxis.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">singleAxis.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">singleAxis.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">singleAxis.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">singleAxis.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">singleAxis.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">singleAxis.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">singleAxis.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">singleAxis.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">singleAxis.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">singleAxis.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">singleAxis.logBase</h3><p>对数轴的底数，只在对数轴中（<a href="#singleAxis.type">type</a>: 'log'）有效。</p>
<h3 class="opt">singleAxis.interval</h3><p>强制设置坐标轴分割间隔。</p>
<p>因为 <a href="#singleAxis.splitNumber">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href="#singleAxis.min">min</a>、<a href="#singleAxis.max">max</a> 强制设定刻度划分，一般不建议使用。</p>
<p>无法在类目轴中使用。在时间轴（<a href="#singleAxis.type">type</a>: 'time'）中需要传时间戳，在对数轴（<a href="#singleAxis.type">type</a>: 'log'）中需要传指数值。</p>
<h3 class="opt">singleAxis.minInterval</h3><p>自动计算的坐标轴最小间隔大小。</p>
<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>
<pre><code class="lang-js">{
minInterval: 1
}
</code></pre>
<p>只在数值轴中（<a href="#singleAxis.type">type</a>: 'value'）有效。</p>
<h3 class="opt">singleAxis.splitNumber</h3><p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>
<p>在类目轴中无效。</p>
<h3 class="opt">singleAxis.scale</h3><p>只在数值轴中（<a href="#singleAxis.type">type</a>: 'value'）有效。</p>
<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<p>在设置 <a href="#singleAxis.min">min</a> 和 <a href="#singleAxis.max">max</a> 之后该配置项无效。</p>
<h3 class="opt">singleAxis.max</h3><p>坐标轴刻度最大值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>
<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">singleAxis.min</h3><p>坐标轴刻度最小值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>
<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">singleAxis.boundaryGap</h3><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。</p>
<p>类目轴中 <code>boundaryGap</code> 可以配置为 <code>true</code> 和 <code>false</code>。默认为 <code>true</code>，这时候<a href="#singleAxis.axisTick">刻度</a>只是作为分隔线，标签和数据点都会在两个<a href="#singleAxis.axisTick">刻度</a>之间的带(band)中间。</p>
<p>非类目轴，包括时间，数值，对数轴，<code>boundaryGap</code>是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href="#singleAxis.min">min</a> 和 <a href="#singleAxis.max">max</a> 后无效。
<strong>示例：</strong></p>
<pre><code class="lang-js">boundaryGap: ['20%', '20%']
</code></pre>
<h3 class="opt">singleAxis.inverse</h3><p>是否是反向坐标轴。ECharts 3 中新加。</p>
<h3 class="opt">singleAxis.nameRotate</h3><p>坐标轴名字旋转，角度值。</p>
<h3 class="opt">singleAxis.nameGap</h3><p>坐标轴名称与轴线之间的距离。</p>
<h3 class="opt">singleAxis.nameTextStyle</h3><p>坐标轴名称的文字样式。</p>
<h3 class="opt">singleAxis.nameTextStyle.fontSize</h3><p>坐标轴名称文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">singleAxis.nameTextStyle.fontFamily</h3><p>坐标轴名称文字的字体系列</p>
<h3 class="opt">singleAxis.nameTextStyle.fontWeight</h3><p>坐标轴名称文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">singleAxis.nameTextStyle.fontStyle</h3><p>坐标轴名称文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">singleAxis.nameTextStyle.color</h3><p>坐标轴名称的颜色，默认取 <a href="#singleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">singleAxis.nameLocation</h3><p>坐标轴名称显示位置。</p>
<p><strong>可选：</strong></p>
<ul>
<li><code>'start'</code></li>
<li><code>'middle'</code></li>
<li><code>'end'</code></li>
</ul>
<h3 class="opt">singleAxis.name</h3><p>坐标轴名称。</p>
<h3 class="opt">singleAxis.type</h3><p>坐标轴类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据，为该类型时必须通过 <a href="#singleAxis.data">data</a> 设置类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
<li><p><code>'log'</code>
对数轴。适用于对数数据。</p>
</li>
</ul>
<h3 class="opt">singleAxis.orient</h3><p>轴的朝向，默认水平朝向，可以设置成 <code>'vertical'</code> 垂直朝向。</p>
<h3 class="opt">singleAxis.height</h3><p>grid 组件的高度。默认自适应。</p>
<h3 class="opt">singleAxis.width</h3><p>grid 组件的宽度。默认自适应。</p>
<h3 class="opt">singleAxis.bottom</h3><p>grid 组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<h3 class="opt">singleAxis.right</h3><p>grid 组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<h3 class="opt">singleAxis.top</h3><p>grid 组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">singleAxis.left</h3><p>grid 组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">singleAxis.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">singleAxis.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">parallelAxis</h3><p>这个组件是平行坐标系中的坐标轴。</p>
<p><br></p>
<hr>
<p><strong>平行坐标系介绍</strong></p>
<p><a href="https://en.wikipedia.org/wiki/Parallel_coordinates" target="_blank">平行坐标系（Parallel Coordinates）</a> 是一种常用的可视化高维数据的图表。</p>
<p>例如 <a href="#series-parallel.data">series-parallel.data</a> 中有如下数据：</p>
<pre><code class="lang-javascript">[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object，从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
</code></pre>
<p>数据中，每一行是一个『数据项』，每一列属于一个『维度』。（例如上面数据每一列的含义分别是：『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。</p>
<p>平行坐标系适用于对这种多维数据进行可视化分析。每一个维度（每一列）对应一个坐标轴，每一个『数据项』是一条线，贯穿多个坐标轴。在坐标轴上，可以进行数据选取等操作。如下：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/parallel-all&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<p><br></p>
<hr>
<p><strong>配置方式概要</strong></p>
<p>『平行坐标系』的 <code>option</code> 基本配置如下例：</p>
<pre><code class="lang-javascript">option = {
parallelAxis: [ // 这是一个个『坐标轴』的定义
{dim: 0, name: schema[0].text}, // 每个『坐标轴』有个 'dim' 属性，表示坐标轴的维度号。
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // 坐标轴也可以支持类别型数据
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
}
],
parallel: { // 这是『坐标系』的定义
left: '5%', // 平行坐标系的位置设置
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // 『坐标轴』的公有属性可以配置在这里避免重复书写
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // 这里三个系列共用一个平行坐标系
{
name: '北京',
type: 'parallel', // 这个系列类型是 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
...
]
},
{
name: '上海',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
...
]
},
{
name: '广州',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
...
]
}
]
};
</code></pre>
<p>需要涉及到三个组件：<a href="#parallel">parallel</a>、<a href="#parallelAxis">parallelAxis</a>、<a href="#series-parallel">series-parallel</a></p>
<ul>
<li><p><a href="#parallel">parallel</a></p>
<p> 这个配置项是平行坐标系的『坐标系』本身。一个系列（<code>series</code>）或多个系列（如上图中的『北京』、『上海』、『广州』分别各是一个系列）可以共用这个『坐标系』。</p>
<p> 和其他坐标系一样，坐标系也可以创建多个。</p>
<p> 位置设置，也是放在这里进行。</p>
</li>
<li><p><a href="#parallelAxis">parallelAxis</a></p>
<p> 这个是『坐标系』中的坐标轴的配置。自然，需要有多个坐标轴。</p>
<p> 其中有 <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> 属性，指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。</p>
</li>
<li><p><a href="#series-parallel">series-parallel</a></p>
<p> 这个是『系列』的定义。系列被画到『坐标系』上。</p>
<p> 其中有 <a href="#series-parallel.parallelIndex">series-parallel.parallelIndex</a> 属性，指定使用哪个『坐标系』。默认使用第一个『坐标系』。</p>
</li>
</ul>
<p><br></p>
<hr>
<p><strong>配置注意和最佳实践</strong></p>
<p>配置多个 <a href="#parallelAxis">parallelAxis</a> 时，有些值一样的属性，如果书写多遍则比较繁琐，那么可以放置在 <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> 里。在坐标轴初始化前，<a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> 里的配置项，会分别融合进 <a href="#parallelAxis">parallelAxis</a>，形成最终的坐标轴的配置。</p>
<p><strong>如果数据量很大并且发生卡顿</strong></p>
<p>建议把 <a href="#series-parallel.lineStyle.normal.width">series-parallel.lineStyle.normal.width</a> 设为 <code>0.5</code>（或更小），
可能显著改善性能。</p>
<p><br></p>
<hr>
<p><strong>高维数据的显示</strong></p>
<p>维度比较多时，比如有 50+ 的维度，那么就会有 50+ 个轴。那么可能会页面显示不下。</p>
<p>可以通过 <a href="#parallel.axisExpandable">parallel.axisExpandable</a> 来改善显示效果，如下例子：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=map-parallel-prices&amp;edit=1&amp;reset=1" width="600" height="460"></iframe>
<p><br>
<br></p>
<h3 class="opt">parallelAxis.data</h3><p>类目数据，在类目轴（<a href="#parallelAxis.type">type</a>: 'category'）中有效。</p>
<p>示例：</p>
<pre><code class="lang-js">// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
</code></pre>
<h3 class="opt">parallelAxis.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">parallelAxis.axisLabel.textStyle</h3><h3 class="opt">parallelAxis.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">parallelAxis.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">parallelAxis.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">parallelAxis.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">parallelAxis.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">parallelAxis.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">parallelAxis.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">parallelAxis.axisLabel.rotate</h3><p>刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>
<p>旋转的角度从 -90 度到 90 度。</p>
<h3 class="opt">parallelAxis.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">parallelAxis.axisLabel.interval</h3><p>坐标轴刻度标签的显示间隔，在类目轴中有效。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">parallelAxis.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">parallelAxis.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">parallelAxis.axisTick.lineStyle</h3><h3 class="opt">parallelAxis.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">parallelAxis.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">parallelAxis.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">parallelAxis.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">parallelAxis.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">parallelAxis.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">parallelAxis.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">parallelAxis.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">parallelAxis.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">parallelAxis.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">parallelAxis.axisTick.interval</h3><p>坐标轴刻度的显示间隔，在类目轴中有效。默认同 <a href="#parallelAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">parallelAxis.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">parallelAxis.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">parallelAxis.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">parallelAxis.axisLine.lineStyle</h3><h3 class="opt">parallelAxis.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">parallelAxis.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">parallelAxis.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">parallelAxis.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">parallelAxis.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">parallelAxis.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">parallelAxis.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">parallelAxis.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">parallelAxis.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">parallelAxis.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">parallelAxis.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">parallelAxis.logBase</h3><p>对数轴的底数，只在对数轴中（<a href="#parallelAxis.type">type</a>: 'log'）有效。</p>
<h3 class="opt">parallelAxis.interval</h3><p>强制设置坐标轴分割间隔。</p>
<p>因为 <a href="#parallelAxis.splitNumber">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href="#parallelAxis.min">min</a>、<a href="#parallelAxis.max">max</a> 强制设定刻度划分，一般不建议使用。</p>
<p>无法在类目轴中使用。在时间轴（<a href="#parallelAxis.type">type</a>: 'time'）中需要传时间戳，在对数轴（<a href="#parallelAxis.type">type</a>: 'log'）中需要传指数值。</p>
<h3 class="opt">parallelAxis.minInterval</h3><p>自动计算的坐标轴最小间隔大小。</p>
<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>
<pre><code class="lang-js">{
minInterval: 1
}
</code></pre>
<p>只在数值轴中（<a href="#parallelAxis.type">type</a>: 'value'）有效。</p>
<h3 class="opt">parallelAxis.splitNumber</h3><p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>
<p>在类目轴中无效。</p>
<h3 class="opt">parallelAxis.scale</h3><p>只在数值轴中（<a href="#parallelAxis.type">type</a>: 'value'）有效。</p>
<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<p>在设置 <a href="#parallelAxis.min">min</a> 和 <a href="#parallelAxis.max">max</a> 之后该配置项无效。</p>
<h3 class="opt">parallelAxis.max</h3><p>坐标轴刻度最大值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>
<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">parallelAxis.min</h3><p>坐标轴刻度最小值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>
<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">parallelAxis.boundaryGap</h3><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。</p>
<p>类目轴中 <code>boundaryGap</code> 可以配置为 <code>true</code> 和 <code>false</code>。默认为 <code>true</code>，这时候<a href="#parallelAxis.axisTick">刻度</a>只是作为分隔线，标签和数据点都会在两个<a href="#parallelAxis.axisTick">刻度</a>之间的带(band)中间。</p>
<p>非类目轴，包括时间，数值，对数轴，<code>boundaryGap</code>是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href="#parallelAxis.min">min</a> 和 <a href="#parallelAxis.max">max</a> 后无效。
<strong>示例：</strong></p>
<pre><code class="lang-js">boundaryGap: ['20%', '20%']
</code></pre>
<h3 class="opt">parallelAxis.inverse</h3><p>是否是反向坐标轴。ECharts 3 中新加。</p>
<h3 class="opt">parallelAxis.nameRotate</h3><p>坐标轴名字旋转，角度值。</p>
<h3 class="opt">parallelAxis.nameGap</h3><p>坐标轴名称与轴线之间的距离。</p>
<h3 class="opt">parallelAxis.nameTextStyle</h3><p>坐标轴名称的文字样式。</p>
<h3 class="opt">parallelAxis.nameTextStyle.fontSize</h3><p>坐标轴名称文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">parallelAxis.nameTextStyle.fontFamily</h3><p>坐标轴名称文字的字体系列</p>
<h3 class="opt">parallelAxis.nameTextStyle.fontWeight</h3><p>坐标轴名称文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">parallelAxis.nameTextStyle.fontStyle</h3><p>坐标轴名称文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">parallelAxis.nameTextStyle.color</h3><p>坐标轴名称的颜色，默认取 <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">parallelAxis.nameLocation</h3><p>坐标轴名称显示位置。</p>
<p><strong>可选：</strong></p>
<ul>
<li><code>'start'</code></li>
<li><code>'middle'</code></li>
<li><code>'end'</code></li>
</ul>
<h3 class="opt">parallelAxis.name</h3><p>坐标轴名称。</p>
<h3 class="opt">parallelAxis.type</h3><p>坐标轴类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据，为该类型时必须通过 <a href="#parallelAxis.data">data</a> 设置类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
<li><p><code>'log'</code>
对数轴。适用于对数数据。</p>
</li>
</ul>
<h3 class="opt">parallelAxis.areaSelectStyle</h3><p>在坐标轴上可以进行框选，这里是一些框选的设置。</p>
<p><br></p>
<h3 class="opt">parallelAxis.areaSelectStyle.opacity</h3><p>选框的透明度。</p>
<h3 class="opt">parallelAxis.areaSelectStyle.color</h3><p>选框的填充色。</p>
<h3 class="opt">parallelAxis.areaSelectStyle.borderColor</h3><p>选框的边框颜色。</p>
<h3 class="opt">parallelAxis.areaSelectStyle.borderWidth</h3><p>选框的边框宽度。</p>
<h3 class="opt">parallelAxis.areaSelectStyle.width</h3><p>框选范围的宽度。</p>
<h3 class="opt">parallelAxis.realtime</h3><p>是否坐标轴刷选的时候，实时刷新视图。如果设为 <code>false</code>，则在刷选动作结束时候，才刷新视图。</p>
<p>大数据量时，建议设置成 <code>false</code>，从而避免卡顿。</p>
<h3 class="opt">parallelAxis.parallelIndex</h3><p>用于定义『坐标轴』对应到哪个『坐标系』中。</p>
<p>比如有如下配置：</p>
<pre><code class="lang-javascript">myChart.setOption({
parallel: [
{...}, // 第一个平行坐标系
{...} // 第二个平行坐标系
],
parallelAxis: [
{parallelIndex: 1, ...}, // 第一个坐标轴，对应到第二个平行坐标系
{parallelIndex: 0, ...}, // 第二个坐标轴，对应到第一个平行坐标系
{parallelIndex: 1, ...}, // 第三个坐标轴，对应到第二个平行坐标系
{parallelIndex: 0, ...} // 第四个坐标轴，对应到第一个平行坐标系
],
...
});
</code></pre>
<p>只有一个平行坐标系时可不用设置，自动取默认值 <code>0</code>。</p>
<h3 class="opt">parallelAxis.dim</h3><p>坐标轴的维度序号。</p>
<p>例如 <a href="#series-parallel.data">series-parallel.data</a> 中有如下数据：</p>
<pre><code class="lang-javascript">[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object，从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
</code></pre>
<p>数据中，每一行是一个『数据项』，每一列属于一个『维度』。（例如上面数据每一列的含义分别是：『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。</p>
<p><code>dim</code> 定义了数据的哪个维度（即哪个『列』）会对应到此坐标轴上。</p>
<p>从 <code>0</code> 开始计数。例如，假设坐标轴的 <code>dim</code> 为 <code>1</code>，则表示数据中的第二列会对应到此坐标轴上。</p>
<h3 class="opt">parallel</h3><p><br></p>
<hr>
<p><strong>平行坐标系介绍</strong></p>
<p><a href="https://en.wikipedia.org/wiki/Parallel_coordinates" target="_blank">平行坐标系（Parallel Coordinates）</a> 是一种常用的可视化高维数据的图表。</p>
<p>例如 <a href="#series-parallel.data">series-parallel.data</a> 中有如下数据：</p>
<pre><code class="lang-javascript">[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object，从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
</code></pre>
<p>数据中，每一行是一个『数据项』，每一列属于一个『维度』。（例如上面数据每一列的含义分别是：『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。</p>
<p>平行坐标系适用于对这种多维数据进行可视化分析。每一个维度（每一列）对应一个坐标轴，每一个『数据项』是一条线，贯穿多个坐标轴。在坐标轴上，可以进行数据选取等操作。如下：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/parallel-all&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<p><br></p>
<hr>
<p><strong>配置方式概要</strong></p>
<p>『平行坐标系』的 <code>option</code> 基本配置如下例：</p>
<pre><code class="lang-javascript">option = {
parallelAxis: [ // 这是一个个『坐标轴』的定义
{dim: 0, name: schema[0].text}, // 每个『坐标轴』有个 'dim' 属性，表示坐标轴的维度号。
{dim: 1, name: schema[1].text},
{dim: 2, name: schema[2].text},
{dim: 3, name: schema[3].text},
{dim: 4, name: schema[4].text},
{dim: 5, name: schema[5].text},
{dim: 6, name: schema[6].text},
{dim: 7, name: schema[7].text,
type: 'category', // 坐标轴也可以支持类别型数据
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
}
],
parallel: { // 这是『坐标系』的定义
left: '5%', // 平行坐标系的位置设置
right: '13%',
bottom: '10%',
top: '20%',
parallelAxisDefault: { // 『坐标轴』的公有属性可以配置在这里避免重复书写
type: 'value',
nameLocation: 'end',
nameGap: 20
}
},
series: [ // 这里三个系列共用一个平行坐标系
{
name: '北京',
type: 'parallel', // 这个系列类型是 'parallel'
data: [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
...
]
},
{
name: '上海',
type: 'parallel',
data: [
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
...
]
},
{
name: '广州',
type: 'parallel',
data: [
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
...
]
}
]
};
</code></pre>
<p>需要涉及到三个组件：<a href="#parallel">parallel</a>、<a href="#parallelAxis">parallelAxis</a>、<a href="#series-parallel">series-parallel</a></p>
<ul>
<li><p><a href="#parallel">parallel</a></p>
<p> 这个配置项是平行坐标系的『坐标系』本身。一个系列（<code>series</code>）或多个系列（如上图中的『北京』、『上海』、『广州』分别各是一个系列）可以共用这个『坐标系』。</p>
<p> 和其他坐标系一样，坐标系也可以创建多个。</p>
<p> 位置设置，也是放在这里进行。</p>
</li>
<li><p><a href="#parallelAxis">parallelAxis</a></p>
<p> 这个是『坐标系』中的坐标轴的配置。自然，需要有多个坐标轴。</p>
<p> 其中有 <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> 属性，指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。</p>
</li>
<li><p><a href="#series-parallel">series-parallel</a></p>
<p> 这个是『系列』的定义。系列被画到『坐标系』上。</p>
<p> 其中有 <a href="#series-parallel.parallelIndex">series-parallel.parallelIndex</a> 属性，指定使用哪个『坐标系』。默认使用第一个『坐标系』。</p>
</li>
</ul>
<p><br></p>
<hr>
<p><strong>配置注意和最佳实践</strong></p>
<p>配置多个 <a href="#parallelAxis">parallelAxis</a> 时，有些值一样的属性，如果书写多遍则比较繁琐，那么可以放置在 <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> 里。在坐标轴初始化前，<a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> 里的配置项，会分别融合进 <a href="#parallelAxis">parallelAxis</a>，形成最终的坐标轴的配置。</p>
<p><strong>如果数据量很大并且发生卡顿</strong></p>
<p>建议把 <a href="#series-parallel.lineStyle.normal.width">series-parallel.lineStyle.normal.width</a> 设为 <code>0.5</code>（或更小），
可能显著改善性能。</p>
<p><br></p>
<hr>
<p><strong>高维数据的显示</strong></p>
<p>维度比较多时，比如有 50+ 的维度，那么就会有 50+ 个轴。那么可能会页面显示不下。</p>
<p>可以通过 <a href="#parallel.axisExpandable">parallel.axisExpandable</a> 来改善显示效果，如下例子：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=map-parallel-prices&amp;edit=1&amp;reset=1" width="600" height="460"></iframe>
<p><br>
<br></p>
<h3 class="opt">parallel.parallelAxisDefault</h3><p>配置多个 <a href="#parallelAxis">parallelAxis</a> 时，有些值一样的属性，如果书写多遍则比较繁琐，那么可以放置在 <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> 里。在坐标轴初始化前，<a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> 里的配置项，会分别融合进 <a href="#parallelAxis">parallelAxis</a>，形成最终的坐标轴的配置。</p>
<p><a href="http://echarts.baidu.com/gallery/editor.html?c=doc-example/parallel-all&amp;edit=1&amp;reset=1" target="_blank">参见示例</a></p>
<p><br></p>
<h3 class="opt">parallel.parallelAxisDefault.data</h3><p>类目数据，在类目轴（<a href="#parallelAxis.type">type</a>: 'category'）中有效。</p>
<p>示例：</p>
<pre><code class="lang-js">// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
</code></pre>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.textStyle</h3><h3 class="opt">parallel.parallelAxisDefault.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">parallel.parallelAxisDefault.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.rotate</h3><p>刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>
<p>旋转的角度从 -90 度到 90 度。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.interval</h3><p>坐标轴刻度标签的显示间隔，在类目轴中有效。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle</h3><h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.interval</h3><p>坐标轴刻度的显示间隔，在类目轴中有效。默认同 <a href="#parallelAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">parallel.parallelAxisDefault.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle</h3><h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">parallel.parallelAxisDefault.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">parallel.parallelAxisDefault.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">parallel.parallelAxisDefault.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">parallel.parallelAxisDefault.logBase</h3><p>对数轴的底数，只在对数轴中（<a href="#parallelAxis.type">type</a>: 'log'）有效。</p>
<h3 class="opt">parallel.parallelAxisDefault.interval</h3><p>强制设置坐标轴分割间隔。</p>
<p>因为 <a href="#parallelAxis.splitNumber">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href="#parallelAxis.min">min</a>、<a href="#parallelAxis.max">max</a> 强制设定刻度划分，一般不建议使用。</p>
<p>无法在类目轴中使用。在时间轴（<a href="#parallelAxis.type">type</a>: 'time'）中需要传时间戳，在对数轴（<a href="#parallelAxis.type">type</a>: 'log'）中需要传指数值。</p>
<h3 class="opt">parallel.parallelAxisDefault.minInterval</h3><p>自动计算的坐标轴最小间隔大小。</p>
<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>
<pre><code class="lang-js">{
minInterval: 1
}
</code></pre>
<p>只在数值轴中（<a href="#parallelAxis.type">type</a>: 'value'）有效。</p>
<h3 class="opt">parallel.parallelAxisDefault.splitNumber</h3><p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>
<p>在类目轴中无效。</p>
<h3 class="opt">parallel.parallelAxisDefault.scale</h3><p>只在数值轴中（<a href="#parallelAxis.type">type</a>: 'value'）有效。</p>
<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<p>在设置 <a href="#parallelAxis.min">min</a> 和 <a href="#parallelAxis.max">max</a> 之后该配置项无效。</p>
<h3 class="opt">parallel.parallelAxisDefault.max</h3><p>坐标轴刻度最大值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>
<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">parallel.parallelAxisDefault.min</h3><p>坐标轴刻度最小值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>
<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">parallel.parallelAxisDefault.boundaryGap</h3><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。</p>
<p>类目轴中 <code>boundaryGap</code> 可以配置为 <code>true</code> 和 <code>false</code>。默认为 <code>true</code>，这时候<a href="#parallelAxis.axisTick">刻度</a>只是作为分隔线，标签和数据点都会在两个<a href="#parallelAxis.axisTick">刻度</a>之间的带(band)中间。</p>
<p>非类目轴，包括时间，数值，对数轴，<code>boundaryGap</code>是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href="#parallelAxis.min">min</a> 和 <a href="#parallelAxis.max">max</a> 后无效。
<strong>示例：</strong></p>
<pre><code class="lang-js">boundaryGap: ['20%', '20%']
</code></pre>
<h3 class="opt">parallel.parallelAxisDefault.inverse</h3><p>是否是反向坐标轴。ECharts 3 中新加。</p>
<h3 class="opt">parallel.parallelAxisDefault.nameRotate</h3><p>坐标轴名字旋转，角度值。</p>
<h3 class="opt">parallel.parallelAxisDefault.nameGap</h3><p>坐标轴名称与轴线之间的距离。</p>
<h3 class="opt">parallel.parallelAxisDefault.nameTextStyle</h3><p>坐标轴名称的文字样式。</p>
<h3 class="opt">parallel.parallelAxisDefault.nameTextStyle.fontSize</h3><p>坐标轴名称文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">parallel.parallelAxisDefault.nameTextStyle.fontFamily</h3><p>坐标轴名称文字的字体系列</p>
<h3 class="opt">parallel.parallelAxisDefault.nameTextStyle.fontWeight</h3><p>坐标轴名称文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">parallel.parallelAxisDefault.nameTextStyle.fontStyle</h3><p>坐标轴名称文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">parallel.parallelAxisDefault.nameTextStyle.color</h3><p>坐标轴名称的颜色，默认取 <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">parallel.parallelAxisDefault.nameLocation</h3><p>坐标轴名称显示位置。</p>
<p><strong>可选：</strong></p>
<ul>
<li><code>'start'</code></li>
<li><code>'middle'</code></li>
<li><code>'end'</code></li>
</ul>
<h3 class="opt">parallel.parallelAxisDefault.name</h3><p>坐标轴名称。</p>
<h3 class="opt">parallel.parallelAxisDefault.type</h3><p>坐标轴类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据，为该类型时必须通过 <a href="#parallelAxis.data">data</a> 设置类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
<li><p><code>'log'</code>
对数轴。适用于对数数据。</p>
</li>
</ul>
<h3 class="opt">parallel.axisExpandWidth</h3><p>在展开状态，轴的间距是多少，单位为像素。</p>
<p>参见 <a href="parallel.axisExpandable" target="_blank">parallel.axisExpandable</a></p>
<h3 class="opt">parallel.axisExpandCount</h3><p>初始时，有多少个轴会处于展开状态。建议根据你的维度个数而手动指定。</p>
<p>参见 <a href="parallel.axisExpandCenter" target="_blank">parallel.axisExpandCenter</a>
参见 <a href="parallel.axisExpandable" target="_blank">parallel.axisExpandable</a></p>
<h3 class="opt">parallel.axisExpandCenter</h3><p>初始时，以哪个轴为中心展开，这里给出轴的 index。没有默认值，需要手动指定。</p>
<p>参见 <a href="parallel.axisExpandable" target="_blank">parallel.axisExpandable</a></p>
<h3 class="opt">parallel.axisExpandable</h3><p>维度比较多时，比如有 50+ 的维度，那么就会有 50+ 个轴。那么可能会页面显示不下。</p>
<p>可以通过 <a href="#parallel.axisExpandable">parallel.axisExpandable</a> 来改善显示效果，如下例子：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=map-parallel-prices&amp;edit=1&amp;reset=1" width="600" height="460"></iframe>
<p>是否允许点击展开折叠 axis。</p>
<h3 class="opt">parallel.layout</h3><p>布局方式，可选值为：</p>
<ul>
<li><p><code>'horizontal'</code>：水平排布各个坐标轴。</p>
</li>
<li><p><code>'vertical'</code>：竖直排布各个坐标轴。</p>
</li>
</ul>
<h3 class="opt">parallel.height</h3><p>parallel 组件的高度。默认自适应。</p>
<h3 class="opt">parallel.width</h3><p>parallel 组件的宽度。默认自适应。</p>
<h3 class="opt">parallel.bottom</h3><p>parallel 组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<h3 class="opt">parallel.right</h3><p>parallel 组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<h3 class="opt">parallel.top</h3><p>parallel 组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">parallel.left</h3><p>parallel 组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">parallel.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">parallel.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">geo</h3><p>地理坐标系组件。</p>
<p>地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制<a href="#series-scatter">散点图</a>，<a href="#series-lines">线集</a>。</p>
<p><strong>在地理坐标系中使用散点图的示例:</strong></p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=scatter-map&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<p><code>3.1.10</code> 开始 geo 组件也支持鼠标事件。事件参数为</p>
<pre><code class="lang-js">{
componentType: 'geo',
// Geo 组件在 option 中的 index
geoIndex: number,
// 点击区域的名称，比如"上海"
name: string,
// 传入的点击区域的 region 对象，见 geo.regions
region: Object
}
</code></pre>
<h3 class="opt">geo.silent</h3><p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>
<h3 class="opt">geo.regions</h3><p>在地图中对特定的区域配置样式。</p>
<p>例如：</p>
<pre><code class="lang-js">regions: [{
name: '广东',
itemStyle: {
normal: {
color: 'red'
}
}
}]
</code></pre>
<h3 class="opt">geo.layoutSize</h3><p>地图的大小，见 <code>layoutCenter</code>。支持相对于屏幕宽高的百分比或者绝对的像素大小。</p>
<h3 class="opt">geo.layoutCenter</h3><p><code>layoutCenter</code> 和 <code>layoutSize</code> 提供了除了 <code>left/right/top/bottom/width/height</code> 之外的布局手段。</p>
<p>在使用 <code>left/right/top/bottom/width/height</code> 的时候，可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间，并且保证不超出盒形的范围。此时可以通过 <code>layoutCenter</code> 属性定义地图中心在屏幕中的位置，<code>layoutSize</code> 定义地图的大小。如下示例</p>
<pre><code class="lang-js">layoutCenter: ['30%', '30%'],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: 100
</code></pre>
<p>设置这两个值后 <code>left/right/top/bottom/width/height</code> 无效。</p>
<h3 class="opt">geo.bottom</h3><p>组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">geo.right</h3><p>组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">geo.top</h3><p>组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">geo.left</h3><p>组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">geo.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">geo.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">geo.itemStyle</h3><p>地图区域的多边形 图形样式，有 <code>normal</code> 和 <code>emphasis</code> 两个状态。<code>normal</code> 是图形在默认状态下的样式；<code>emphasis</code> 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。</p>
<h3 class="opt">geo.itemStyle.emphasis</h3><p>高亮状态下的多边形样式。</p>
<h3 class="opt">geo.itemStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">geo.itemStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">geo.itemStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">geo.itemStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">geo.itemStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">geo.itemStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">geo.itemStyle.emphasis.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">geo.itemStyle.emphasis.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">geo.itemStyle.emphasis.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">geo.itemStyle.normal</h3><p>普通状态下的多边形样式。</p>
<h3 class="opt">geo.itemStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">geo.itemStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">geo.itemStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">geo.itemStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">geo.itemStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">geo.itemStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">geo.itemStyle.normal.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">geo.itemStyle.normal.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">geo.itemStyle.normal.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">geo.label</h3><p>图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，<code>label</code>选项在 ECharts 2.x 中放置于<code>itemStyle.normal</code>下，在 ECharts 3 中为了让整个配置项结构更扁平合理，<code>label</code> 被拿出来跟 <code>itemStyle</code> 平级，并且跟 <code>itemStyle</code> 一样拥有 <code>normal</code>, <code>emphasis</code> 两个状态。</p>
<h3 class="opt">geo.label.emphasis</h3><h3 class="opt">geo.label.emphasis.textStyle</h3><p>高亮状态下的标签文本样式。</p>
<h3 class="opt">geo.label.emphasis.textStyle.fontSize</h3><p>文字的字体大小</p>
<h3 class="opt">geo.label.emphasis.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">geo.label.emphasis.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">geo.label.emphasis.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">geo.label.emphasis.textStyle.color</h3><p>文字的颜色。</p>
<h3 class="opt">geo.label.emphasis.show</h3><p>是否在高亮状态下显示标签。</p>
<h3 class="opt">geo.label.normal</h3><h3 class="opt">geo.label.normal.textStyle</h3><p>普通状态下的标签文本样式。</p>
<h3 class="opt">geo.label.normal.textStyle.fontSize</h3><p>文字的字体大小</p>
<h3 class="opt">geo.label.normal.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">geo.label.normal.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">geo.label.normal.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">geo.label.normal.textStyle.color</h3><p>文字的颜色。</p>
<h3 class="opt">geo.label.normal.show</h3><p>是否在普通状态下显示标签。</p>
<h3 class="opt">geo.selectedMode</h3><p>选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选<code>'single'</code>表示单选，或者<code>'multiple'</code>表示多选。</p>
<h3 class="opt">geo.nameMap</h3><p>自定义地区的名称映射，如：</p>
<pre><code class="lang-js">{
'China' : '中国'
}
</code></pre>
<h3 class="opt">geo.scaleLimit</h3><p>滚轮缩放的极限控制，通过<code>min</code>, <code>max</code>最小和最大的缩放值，默认的缩放为<code>1</code>。</p>
<h3 class="opt">geo.scaleLimit.max</h3><p>最大的缩放值</p>
<h3 class="opt">geo.scaleLimit.min</h3><p>最小的缩放值</p>
<h3 class="opt">geo.zoom</h3><p>当前视角的缩放比例。</p>
<h3 class="opt">geo.center</h3><p>当前视角的中心点，用经纬度表示</p>
<p>例如：</p>
<pre><code class="lang-js">center: [115.97, 29.71]
</code></pre>
<h3 class="opt">geo.roam</h3><p>是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 <code>'scale'</code> 或者 <code>'move'</code>。设置成 <code>true</code> 为都开启</p>
<h3 class="opt">geo.map</h3><p>地图类型。</p>
<p>ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在<a href="http://ecomfe.github.io/echarts-builder-web/map3.html" target="_blank">地图下载界面</a>下载到需要的地图文件引入并注册到 ECharts 中。</p>
<p>ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。</p>
<p>下面是两种类型的使用示例：</p>
<p><strong> JavaScript 引入示例 </strong></p>
<pre><code class="lang-html">&lt;script src="echarts.js"&gt;&lt;/script&gt;
&lt;script src="map/js/china.js"&gt;&lt;/script&gt;
&lt;script&gt;
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
&lt;/script&gt;
</code></pre>
<p><strong> JSON 引入示例 </strong></p>
<pre><code class="lang-js">$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
</code></pre>
<p>ECharts 使用 <a href="http://geojson.org/" target="_blank">geoJSON</a> 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 <a href="http://geojson.org/" target="_blank">geoJSON</a> 数据注册到 ECharts 中。参见示例 <a href="http://echarts.baidu.com/gallery/editor.html?c=map-usa" target="_blank">USA Population Estimates</a></p>
<h3 class="opt">geo.show</h3><p>是否显示地理坐标系组件。</p>
<h3 class="opt">brush</h3><p><code>brush</code> 是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。</p>
<p>示例如下：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" width="800" height="600"></iframe>
<p><br></p>
<hr>
<p><strong>刷子的类型和启动按钮</strong></p>
<p>目前 <code>brush</code> 组件支持的图表类型：<code>scatter</code>、<code>bar</code>、<code>candlestick</code>（<code>parallel</code> 本身自带刷选功能，但并非由 brush 组件来提供）。</p>
<p>点击 <code>toolbox</code> 中的按钮，能够进行『区域选择』、『清除选择』等操作。</p>
<p><br>
<code>横向刷子</code> 的示例如下（点击 <code>toolbox</code> 中的按钮启动刷选）：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=candlestick-brush&amp;edit=1&amp;reset=1" width="800" height="500"></iframe>
<p><br>
<code>bar</code> 图中的 <code>brush</code>（点击 <code>toolbox</code> 中的按钮启动刷选）：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=bar-brush&amp;edit=1&amp;reset=1" width="800" height="400"></iframe>
<p>启动 <code>brush</code> 的按钮既可以在 <code>toolbox</code> 中指定（参见 <a href="#toolbox.feature.brush.type">toolbox.feature.brush.type</a>），也可以在 <code>brush</code> 组件的配置中指定（参见 <a href="#brush.toolbox">brush.toolbox</a>）。</p>
<p>支持这几种选框：<code>矩形刷子</code>，<code>任意形状刷子</code>，<code>横向刷子</code>，<code>纵向刷子</code>。参见 <a href="#brush.toolbox">brush.toolbox</a>。</p>
<p>可以使用 <code>保持选择</code> 按钮，切换单选和多选模式。</p>
<ul>
<li>单选即同时只能存在一个选框，可单击空白区域消除选框。</li>
<li>多选即同时可存在多个选框，单击空白区域不能消除选框，需要点击『清除按钮』消除线框。</li>
</ul>
<p><br></p>
<hr>
<p><strong>刷选和坐标系的关系</strong></p>
<p>可以设置 <code>brush</code> 是『全局的』还是『属于坐标系的』。</p>
<p><strong>全局 brush</strong></p>
<p>在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』，就是『全局 brush』。</p>
<p><strong>坐标系 brush</strong></p>
<p>在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移（roam 和 dataZoom）而移动。</p>
<p>坐标系 brush 实际更为常用，尤其是在 geo 中。</p>
<p>通过指定 <a href="#brush.geoIndex">brush.geoIndex</a> 或 <a href="#brush.xAxisIndex">brush.xAxisIndex</a> 或 <a href="#brush.yAxisIndex">brush.yAxisIndex</a> 来规定可以在哪些坐标系中进行刷选。</p>
<p>这几个配置项的取值可以是：</p>
<ul>
<li><code>'all'</code>，表示所有</li>
<li><code>number</code>，如 <code>0</code>，表示这个 index 所对应的坐标系。</li>
<li><code>Array</code>，如 <code>[0, 4, 2]</code>，表示指定这些 index 所对应的坐标系。</li>
<li><code>'none'</code> 或 <code>null</code> 或 <code>undefined</code>，表示不指定。</li>
</ul>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选，也就是上面定义的 geo 组件中。
...
}
};
</code></pre>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0，属于 grid 1。
{gridIndex: 0, ...} // xAxis 1，属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0，属于 grid 1。
{gridIndex: 0, ...} // yAxis 1，属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
</code></pre>
<p><br></p>
<hr>
<p><strong> 使用 API 控制选框 </strong></p>
<p>可以通过调用 <code>dispatchAction</code> 来用程序主动渲染选框，例如：</p>
<pre><code class="lang-javascript">myChart.dispatchAction({
type: 'brush',
areas: [
{
geoIndex: 0,
// 指定选框的类型。
brushType: 'polygon',
// 指定选框的形状。
coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]
}
]
});
</code></pre>
<p>详情参见 <a href="api.html#action.brush" target="_blank">action.brush</a></p>
<p><br></p>
<hr>
<p><strong> brushLink </strong></p>
<p>不同系列间，选中的项可以联动。</p>
<p>参见如下效果（刷选一个 <code>scatter</code>，其他 <code>scatter</code> 以及 <code>parallel</code> 图都会有选中效果）：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=scatter-matrix&amp;edit=1&amp;reset=1" width="800" height="550"></iframe>
<p><code>brushLink</code> 配置项是一个数组，内容是 seriesIndex，指定了哪些 series 可以被联动。例如可以是：</p>
<ul>
<li><code>[3, 4, 5]</code> 表示 seriesIndex 为 <code>3</code>, <code>4</code>, <code>5</code> 的 series 可以被联动。</li>
<li><code>'all'</code> 表示所有 series 都进行 brushLink。</li>
<li><code>'none'</code> 或 <code>null</code> 或 <code>undefined</code> 表示不启用 brushLink 功能。</li>
</ul>
<p><strong>注意</strong></p>
<p>brushLink 是通过 dataIndex 进行映射，所以需要保证，<strong>联动的每个系列的 <code>data</code> 都是 <code>index</code> 对应的</strong>。*</p>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
brush: {
brushLink: [0, 1]
},
series: [
{
type: 'bar'
data: [232, 4434, 545, 654] // data 有四个项
},
{
type: 'parallel',
data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同样有四个项，两个系列的 data 是对应的。
}
]
};
</code></pre>
<p>参见 <a href="#brush.brushLink">brush.brushLink</a>。</p>
<p><br></p>
<hr>
<p><strong> throttle / debounce / 事件延迟 </strong></p>
<p>默认情况，刷选或者移动选区的时候，会不断得发 <code>brushSelected</code> 事件，从而告诉外界选中的内容。</p>
<p>但是频繁的事件可能导致性能问题，或者动画效果很差。所以 brush 组件提供了 <a href="#brush.throttleType">brush.throttleType</a>，<a href="#brush.throttleDelay">brush.throttleDelay</a> 来解决这个问题。</p>
<p>throttleType 取值可以是：</p>
<ul>
<li><code>'debounce'</code>：表示只有停止动作了（即一段时间没有操作了），才会触发事件。时间阈值由 <a href="#brush.throttleDelay">brush.throttleDelay</a> 指定。</li>
<li><code>'fixRate'</code>：表示按照一定的频率触发时间，时间间隔由 <a href="#brush.throttleDelay">brush.throttleDelay</a> 指定。</li>
</ul>
<p>例如这个 <a href="http://echarts.baidu.com/gallery/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" target="_blank">例子</a>，就是使用了 <code>debounce</code>的效果：只有用户停止动作了，柱状图才更新。不然的话，如果柱状图的频繁更新，那么动画效果很差。</p>
<p><br></p>
<hr>
<p><strong> 被选中项和未被选中项的视觉设置 </strong></p>
<p>参见 <a href="#brush.inBrush">brush.inBrush</a> 和 <a href="#brush.outOfBrush">brush.outOfBrush</a>。</p>
<p><br></p>
<hr>
<p>下面是详细配置。</p>
<h3 class="opt">brush.outOfBrush</h3><p>定义 <strong>在选中范围外</strong> 的视觉元素。</p>
<p>可选的视觉元素有：</p>
<ul>
<li><code>symbol</code>: 图元的图形类别。</li>
<li><code>symbolSize</code>: 图元的大小。</li>
<li><code>color</code>: 图元的颜色。</li>
<li><code>colorAlpha</code>: 图元的颜色的透明度。</li>
<li><code>opacity</code>: 图元以及其附属物（如文字标签）的透明度。</li>
<li><code>colorLightness</code>: 颜色的明暗度，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
<li><code>colorSaturation</code>: 颜色的饱和度，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
<li><code>colorHue</code>: 颜色的色调，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
</ul>
<p><strong>注意</strong>，如果 outOfBrush 没有指定，默认会设置 color: <code>'#ddd'</code>，如果你不想要这个color，比如可以
换成：</p>
<pre><code class="lang-javascript">brush: {
...,
outOfBrush: {
colorAlpha: 0.1
}
}
</code></pre>
<h3 class="opt">brush.inBrush</h3><p>定义 <strong>在选中范围中</strong> 的视觉元素。</p>
<p>可选的视觉元素有：</p>
<ul>
<li><code>symbol</code>: 图元的图形类别。</li>
<li><code>symbolSize</code>: 图元的大小。</li>
<li><code>color</code>: 图元的颜色。</li>
<li><code>colorAlpha</code>: 图元的颜色的透明度。</li>
<li><code>opacity</code>: 图元以及其附属物（如文字标签）的透明度。</li>
<li><code>colorLightness</code>: 颜色的明暗度，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
<li><code>colorSaturation</code>: 颜色的饱和度，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
<li><code>colorHue</code>: 颜色的色调，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
</ul>
<p>大多数情况下，inBrush 可以不指定，维持本来的视觉配置。</p>
<h3 class="opt">brush.removeOnClick</h3><p>在 <a href="#brush.brushMode">brush.brushMode</a> 为 <code>'single'</code> 的情况下，是否支持『单击清除所有选框』。</p>
<h3 class="opt">brush.throttleDelay</h3><p>默认为 <code>0</code> 表示不开启 throttle。</p>
<p>默认情况，刷选或者移动选区的时候，会不断得发 <code>brushSelected</code> 事件，从而告诉外界选中的内容。</p>
<p>但是频繁的事件可能导致性能问题，或者动画效果很差。所以 brush 组件提供了 <a href="#brush.throttleType">brush.throttleType</a>，<a href="#brush.throttleDelay">brush.throttleDelay</a> 来解决这个问题。</p>
<p>throttleType 取值可以是：</p>
<ul>
<li><code>'debounce'</code>：表示只有停止动作了（即一段时间没有操作了），才会触发事件。时间阈值由 <a href="#brush.throttleDelay">brush.throttleDelay</a> 指定。</li>
<li><code>'fixRate'</code>：表示按照一定的频率触发时间，时间间隔由 <a href="#brush.throttleDelay">brush.throttleDelay</a> 指定。</li>
</ul>
<p>例如这个 <a href="http://echarts.baidu.com/gallery/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" target="_blank">例子</a>，就是使用了 <code>debounce</code>的效果：只有用户停止动作了，柱状图才更新。不然的话，如果柱状图的频繁更新，那么动画效果很差。</p>
<h3 class="opt">brush.throttleType</h3><p>默认情况，刷选或者移动选区的时候，会不断得发 <code>brushSelected</code> 事件，从而告诉外界选中的内容。</p>
<p>但是频繁的事件可能导致性能问题，或者动画效果很差。所以 brush 组件提供了 <a href="#brush.throttleType">brush.throttleType</a>，<a href="#brush.throttleDelay">brush.throttleDelay</a> 来解决这个问题。</p>
<p>throttleType 取值可以是：</p>
<ul>
<li><code>'debounce'</code>：表示只有停止动作了（即一段时间没有操作了），才会触发事件。时间阈值由 <a href="#brush.throttleDelay">brush.throttleDelay</a> 指定。</li>
<li><code>'fixRate'</code>：表示按照一定的频率触发时间，时间间隔由 <a href="#brush.throttleDelay">brush.throttleDelay</a> 指定。</li>
</ul>
<p>例如这个 <a href="http://echarts.baidu.com/gallery/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" target="_blank">例子</a>，就是使用了 <code>debounce</code>的效果：只有用户停止动作了，柱状图才更新。不然的话，如果柱状图的频繁更新，那么动画效果很差。</p>
<h3 class="opt">brush.brushStyle</h3><p>选框的默认样式，值为：</p>
<pre><code class="lang-javascript">{
borderWidth: 1,
color: 'rgba(120,140,180,0.3)',
borderColor: 'rgba(120,140,180,0.8)',
width: null
},
</code></pre>
<h3 class="opt">brush.transformable</h3><p>已经选好的选框是否可以被调整形状或平移。</p>
<h3 class="opt">brush.brushMode</h3><p>默认的刷子的模式。可取值为：</p>
<ul>
<li><code>'single'</code>：单选。</li>
<li><code>'multiple'</code>：多选。</li>
</ul>
<h3 class="opt">brush.brushType</h3><p>默认的刷子类型。</p>
<ul>
<li><code>'rect'</code>：矩形选框。</li>
<li><code>'polygon'</code>：任意形状选框。</li>
<li><code>'lineX'</code>：横向选择。</li>
<li><code>'lineY'</code>：纵向选择。</li>
</ul>
<h3 class="opt">brush.yAxisIndex</h3><p>指定哪些 yAxisIndex 可以被刷选。</p>
<p>可以设置 <code>brush</code> 是『全局的』还是『属于坐标系的』。</p>
<p><strong>全局 brush</strong></p>
<p>在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』，就是『全局 brush』。</p>
<p><strong>坐标系 brush</strong></p>
<p>在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移（roam 和 dataZoom）而移动。</p>
<p>坐标系 brush 实际更为常用，尤其是在 geo 中。</p>
<p>通过指定 <a href="#brush.geoIndex">brush.geoIndex</a> 或 <a href="#brush.xAxisIndex">brush.xAxisIndex</a> 或 <a href="#brush.yAxisIndex">brush.yAxisIndex</a> 来规定可以在哪些坐标系中进行刷选。</p>
<p>这几个配置项的取值可以是：</p>
<ul>
<li><code>'all'</code>，表示所有</li>
<li><code>number</code>，如 <code>0</code>，表示这个 index 所对应的坐标系。</li>
<li><code>Array</code>，如 <code>[0, 4, 2]</code>，表示指定这些 index 所对应的坐标系。</li>
<li><code>'none'</code> 或 <code>null</code> 或 <code>undefined</code>，表示不指定。</li>
</ul>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选，也就是上面定义的 geo 组件中。
...
}
};
</code></pre>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0，属于 grid 1。
{gridIndex: 0, ...} // xAxis 1，属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0，属于 grid 1。
{gridIndex: 0, ...} // yAxis 1，属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
</code></pre>
<h3 class="opt">brush.xAxisIndex</h3><p>指定哪些 xAxisIndex 可以被刷选。</p>
<p>可以设置 <code>brush</code> 是『全局的』还是『属于坐标系的』。</p>
<p><strong>全局 brush</strong></p>
<p>在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』，就是『全局 brush』。</p>
<p><strong>坐标系 brush</strong></p>
<p>在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移（roam 和 dataZoom）而移动。</p>
<p>坐标系 brush 实际更为常用，尤其是在 geo 中。</p>
<p>通过指定 <a href="#brush.geoIndex">brush.geoIndex</a> 或 <a href="#brush.xAxisIndex">brush.xAxisIndex</a> 或 <a href="#brush.yAxisIndex">brush.yAxisIndex</a> 来规定可以在哪些坐标系中进行刷选。</p>
<p>这几个配置项的取值可以是：</p>
<ul>
<li><code>'all'</code>，表示所有</li>
<li><code>number</code>，如 <code>0</code>，表示这个 index 所对应的坐标系。</li>
<li><code>Array</code>，如 <code>[0, 4, 2]</code>，表示指定这些 index 所对应的坐标系。</li>
<li><code>'none'</code> 或 <code>null</code> 或 <code>undefined</code>，表示不指定。</li>
</ul>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选，也就是上面定义的 geo 组件中。
...
}
};
</code></pre>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0，属于 grid 1。
{gridIndex: 0, ...} // xAxis 1，属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0，属于 grid 1。
{gridIndex: 0, ...} // yAxis 1，属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
</code></pre>
<h3 class="opt">brush.geoIndex</h3><p>指定哪些 geo 可以被刷选。</p>
<p>可以设置 <code>brush</code> 是『全局的』还是『属于坐标系的』。</p>
<p><strong>全局 brush</strong></p>
<p>在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』，就是『全局 brush』。</p>
<p><strong>坐标系 brush</strong></p>
<p>在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移（roam 和 dataZoom）而移动。</p>
<p>坐标系 brush 实际更为常用，尤其是在 geo 中。</p>
<p>通过指定 <a href="#brush.geoIndex">brush.geoIndex</a> 或 <a href="#brush.xAxisIndex">brush.xAxisIndex</a> 或 <a href="#brush.yAxisIndex">brush.yAxisIndex</a> 来规定可以在哪些坐标系中进行刷选。</p>
<p>这几个配置项的取值可以是：</p>
<ul>
<li><code>'all'</code>，表示所有</li>
<li><code>number</code>，如 <code>0</code>，表示这个 index 所对应的坐标系。</li>
<li><code>Array</code>，如 <code>[0, 4, 2]</code>，表示指定这些 index 所对应的坐标系。</li>
<li><code>'none'</code> 或 <code>null</code> 或 <code>undefined</code>，表示不指定。</li>
</ul>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
geo: {
...
},
brush: {
geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选，也就是上面定义的 geo 组件中。
...
}
};
</code></pre>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
grid: [
{...}, // grid 0
{...} // grid 1
],
xAxis: [
{gridIndex: 1, ...}, // xAxis 0，属于 grid 1。
{gridIndex: 0, ...} // xAxis 1，属于 grid 0。
],
yAxis: [
{gridIndex: 1, ...}, // yAxis 0，属于 grid 1。
{gridIndex: 0, ...} // yAxis 1，属于 grid 0。
],
brush: {
xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
...
}
};
</code></pre>
<h3 class="opt">brush.seriesIndex</h3><p>指定哪些 series 可以被刷选，可取值为：</p>
<ul>
<li><code>'all'</code>: 所有 series</li>
<li><code>'Array'</code>: series index 列表</li>
<li><code>'number'</code>: 某个 series index</li>
</ul>
<h3 class="opt">brush.brushLink</h3><p>不同系列间，选中的项可以联动。</p>
<p>参见如下效果（刷选一个 <code>scatter</code>，其他 <code>scatter</code> 以及 <code>parallel</code> 图都会有选中效果）：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=scatter-matrix&amp;edit=1&amp;reset=1" width="800" height="550"></iframe>
<p><code>brushLink</code> 配置项是一个数组，内容是 seriesIndex，指定了哪些 series 可以被联动。例如可以是：</p>
<ul>
<li><code>[3, 4, 5]</code> 表示 seriesIndex 为 <code>3</code>, <code>4</code>, <code>5</code> 的 series 可以被联动。</li>
<li><code>'all'</code> 表示所有 series 都进行 brushLink。</li>
<li><code>'none'</code> 或 <code>null</code> 或 <code>undefined</code> 表示不启用 brushLink 功能。</li>
</ul>
<p><strong>注意</strong></p>
<p>brushLink 是通过 dataIndex 进行映射，所以需要保证，<strong>联动的每个系列的 <code>data</code> 都是 <code>index</code> 对应的</strong>。*</p>
<p>例如：</p>
<pre><code class="lang-javascript">option = {
brush: {
brushLink: [0, 1]
},
series: [
{
type: 'bar'
data: [232, 4434, 545, 654] // data 有四个项
},
{
type: 'parallel',
data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同样有四个项，两个系列的 data 是对应的。
}
]
};
</code></pre>
<h3 class="opt">brush.toolbox</h3><p>使用在 toolbox 中的按钮。</p>
<p>brush 相关的 toolbox 按钮有：</p>
<ul>
<li><code>'rect'</code>：开启矩形选框选择功能。</li>
<li><code>'polygon'</code>：开启任意形状选框选择功能。</li>
<li><code>'lineX'</code>：开启横向选择功能。</li>
<li><code>'lineY'</code>：开启纵向选择功能。</li>
<li><code>'keep'</code>：切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。</li>
<li><code>'clear'</code>：清空所有选框。</li>
</ul>
<h3 class="opt">toolbox</h3><p>工具栏。内置有<a href="#toolbox.feature.saveAsImage">导出图片</a>，<a href="#toolbox.feature.dataView">数据视图</a>，<a href="#toolbox.feature.magicType">动态类型切换</a>，<a href="#toolbox.feature.dataZoom">数据区域缩放</a>，<a href="#toolbox.feature.reset">重置</a>五个工具。</p>
<p><strong>如下示例：</strong></p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=line-marker&amp;reset=1&amp;edit=1" width="600" height="400"></iframe>
<h3 class="opt">toolbox.height</h3><p>工具栏组件的高度。默认自适应。</p>
<h3 class="opt">toolbox.width</h3><p>工具栏组件的宽度。默认自适应。</p>
<h3 class="opt">toolbox.bottom</h3><p>工具栏组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">toolbox.right</h3><p>工具栏组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">toolbox.top</h3><p>工具栏组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">toolbox.left</h3><p>工具栏组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">toolbox.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">toolbox.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">toolbox.iconStyle</h3><p>公用的 icon 样式设置。</p>
<h3 class="opt">toolbox.iconStyle.emphasis</h3><h3 class="opt">toolbox.iconStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.iconStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.iconStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.iconStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.iconStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.iconStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.iconStyle.emphasis.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.iconStyle.emphasis.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.iconStyle.emphasis.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.iconStyle.normal</h3><h3 class="opt">toolbox.iconStyle.normal.textAlign</h3><p>文本对齐方式，<code>'left'</code> / <code>'right'</code>。</p>
<h3 class="opt">toolbox.iconStyle.normal.textPosition</h3><p>文本位置，<code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>
<h3 class="opt">toolbox.iconStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.iconStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.iconStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.iconStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.iconStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.iconStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.iconStyle.normal.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.iconStyle.normal.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.iconStyle.normal.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature</h3><p>各工具配置项。</p>
<p>除了各个内置的工具按钮外，还可以自定义工具按钮。</p>
<p>注意，自定义的工具名字，只能以 <code>my</code> 开头，例如下例中的 <code>myTool1</code>，<code>myTool2</code>：</p>
<pre><code class="lang-javascript">{
toolbox: {
feature: {
myTool1: {
show: true,
title: '自定义扩展方法1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
alert('myToolHandler1')
}
},
myTool2: {
show: true,
title: '自定义扩展方法',
icon: 'image://http://echarts.baidu.com/images/favicon.png',
onclick: function (){
alert('myToolHandler2')
}
}
}
}
}
</code></pre>
<h3 class="opt">toolbox.feature.brush</h3><p>选框组件的控制按钮。</p>
<p>也可以不在这里指定，而是在 <a href="#brush.toolbox">brush.toolbox</a> 中指定。</p>
<h3 class="opt">toolbox.feature.brush.title</h3><p>标题文本。</p>
<h3 class="opt">toolbox.feature.brush.title.clear</h3><h3 class="opt">toolbox.feature.brush.title.keep</h3><h3 class="opt">toolbox.feature.brush.title.lineY</h3><h3 class="opt">toolbox.feature.brush.title.lineX</h3><h3 class="opt">toolbox.feature.brush.title.polygon</h3><h3 class="opt">toolbox.feature.brush.title.rect</h3><h3 class="opt">toolbox.feature.brush.icon</h3><p>每个按钮的 icon path。</p>
<h3 class="opt">toolbox.feature.brush.icon.clear</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.brush.icon.keep</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.brush.icon.lineY</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.brush.icon.lineX</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.brush.icon.polygon</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.brush.icon.rect</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.brush.type</h3><p>使用的按钮，取值：</p>
<ul>
<li><code>'rect'</code>：开启矩形选框选择功能。</li>
<li><code>'polygon'</code>：开启任意形状选框选择功能。</li>
<li><code>'lineX'</code>：开启横向选择功能。</li>
<li><code>'lineY'</code>：开启纵向选择功能。</li>
<li><code>'keep'</code>：切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。</li>
<li><code>'clear'</code>：清空所有选框。</li>
</ul>
<h3 class="opt">toolbox.feature.magicType</h3><p>动态类型切换
<strong>示例：</strong></p>
<pre><code class="lang-js">feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
}
}
</code></pre>
<h3 class="opt">toolbox.feature.magicType.seriesIndex</h3><p>各个类型对应的系列的列表。</p>
<h3 class="opt">toolbox.feature.magicType.seriesIndex.tiled</h3><h3 class="opt">toolbox.feature.magicType.seriesIndex.stack</h3><h3 class="opt">toolbox.feature.magicType.seriesIndex.bar</h3><h3 class="opt">toolbox.feature.magicType.seriesIndex.line</h3><h3 class="opt">toolbox.feature.magicType.option</h3><p>各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项。</p>
<h3 class="opt">toolbox.feature.magicType.option.tiled</h3><h3 class="opt">toolbox.feature.magicType.option.stack</h3><h3 class="opt">toolbox.feature.magicType.option.bar</h3><h3 class="opt">toolbox.feature.magicType.option.line</h3><h3 class="opt">toolbox.feature.magicType.iconStyle</h3><p>动态类型切换 icon 样式设置。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis</h3><h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.emphasis.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal</h3><h3 class="opt">toolbox.feature.magicType.iconStyle.normal.textAlign</h3><p>文本对齐方式，<code>'left'</code> / <code>'right'</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.textPosition</h3><p>文本位置，<code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.magicType.iconStyle.normal.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.magicType.icon</h3><p>各个类型的 icon path，可以分别配置。</p>
<h3 class="opt">toolbox.feature.magicType.icon.tiled</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.magicType.icon.stack</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.magicType.icon.bar</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.magicType.icon.line</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.magicType.title</h3><p>各个类型的标题文本，可以分别配置。</p>
<h3 class="opt">toolbox.feature.magicType.title.tiled</h3><h3 class="opt">toolbox.feature.magicType.title.stack</h3><h3 class="opt">toolbox.feature.magicType.title.bar</h3><h3 class="opt">toolbox.feature.magicType.title.line</h3><h3 class="opt">toolbox.feature.magicType.type</h3><p>启用的动态类型，包括<code>'line'</code>（切换为折线图）, <code>'bar'</code>（切换为柱状图）, <code>'stack'</code>（切换为堆叠模式）, <code>'tiled'</code>（切换为平铺模式）。</p>
<h3 class="opt">toolbox.feature.magicType.show</h3><p>是否显示该工具。</p>
<h3 class="opt">toolbox.feature.dataZoom</h3><p>数据区域缩放。目前只支持直角坐标系的缩放。</p>
<h3 class="opt">toolbox.feature.dataZoom.yAxisIndex</h3><p>指定哪些 <a href="#yAxis">yAxis</a> 被控制。如果缺省则控制所有的y轴。如果设置为 <code>false</code> 则不控制任何y轴。如果设置成 <code>3</code> 则控制 axisIndex 为 <code>3</code> 的y轴。如果设置为 <code>[0, 3]</code> 则控制 axisIndex 为 <code>0</code> 和 <code>3</code> 的y轴。</p>
<h3 class="opt">toolbox.feature.dataZoom.xAxisIndex</h3><p>指定哪些 <a href="#xAxis">xAxis</a> 被控制。如果缺省则控制所有的x轴。如果设置为 <code>false</code> 则不控制任何x轴。如果设置成 <code>3</code> 则控制 axisIndex 为 <code>3</code> 的x轴。如果设置为 <code>[0, 3]</code> 则控制 axisIndex 为 <code>0</code> 和 <code>3</code> 的x轴。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle</h3><p>数据区域缩放 icon 样式设置。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis</h3><h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.emphasis.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal</h3><h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.textAlign</h3><p>文本对齐方式，<code>'left'</code> / <code>'right'</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.textPosition</h3><p>文本位置，<code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataZoom.iconStyle.normal.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.dataZoom.icon</h3><p>缩放和还原的 icon path。</p>
<h3 class="opt">toolbox.feature.dataZoom.icon.back</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.dataZoom.icon.zoom</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.dataZoom.title</h3><p>缩放和还原的标题文本。</p>
<h3 class="opt">toolbox.feature.dataZoom.title.back</h3><h3 class="opt">toolbox.feature.dataZoom.title.zoom</h3><h3 class="opt">toolbox.feature.dataZoom.show</h3><p>是否显示该工具。</p>
<h3 class="opt">toolbox.feature.dataView</h3><p>数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。</p>
<h3 class="opt">toolbox.feature.dataView.buttonTextColor</h3><p>按钮文本颜色。</p>
<h3 class="opt">toolbox.feature.dataView.buttonColor</h3><p>按钮颜色。</p>
<h3 class="opt">toolbox.feature.dataView.textColor</h3><p>文本颜色。</p>
<h3 class="opt">toolbox.feature.dataView.textareaBorderColor</h3><p>数据视图浮层文本输入区边框颜色。</p>
<h3 class="opt">toolbox.feature.dataView.textareaColor</h3><p>数据视图浮层文本输入区背景色。</p>
<h3 class="opt">toolbox.feature.dataView.backgroundColor</h3><p>数据视图浮层背景色。</p>
<h3 class="opt">toolbox.feature.dataView.lang</h3><p>数据视图上有三个话术，默认是<code>['数据视图', '关闭', '刷新']</code>。</p>
<h3 class="opt">toolbox.feature.dataView.contentToOption</h3><pre><code class="lang-js">(container:HTMLDomElement, option:Object) =&gt; Object
</code></pre>
<p>在使用 optionToContent 的情况下，如果支持数据编辑后的刷新，需要自行通过该函数实现组装 option 的逻辑。</p>
<h3 class="opt">toolbox.feature.dataView.optionToContent</h3><pre><code class="lang-js">(option:Object) =&gt; HTMLDomElement|string
</code></pre>
<p>自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串。</p>
<p>如下示例使用表格展现数据值：</p>
<pre><code class="lang-js">optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '&lt;table style="width:100%;text-align:center"&gt;&lt;tbody&gt;&lt;tr&gt;'
+ '&lt;td&gt;时间&lt;/td&gt;'
+ '&lt;td&gt;' + series[0].name + '&lt;/td&gt;'
+ '&lt;td&gt;' + series[1].name + '&lt;/td&gt;'
+ '&lt;/tr&gt;';
for (var i = 0, l = axisData.length; i &lt; l; i++) {
table += '&lt;tr&gt;'
+ '&lt;td&gt;' + axisData[i] + '&lt;/td&gt;'
+ '&lt;td&gt;' + series[0].data[i] + '&lt;/td&gt;'
+ '&lt;td&gt;' + series[1].data[i] + '&lt;/td&gt;'
+ '&lt;/tr&gt;';
}
table += '&lt;/tbody&gt;&lt;/table&gt;';
return table;
}
</code></pre>
<h3 class="opt">toolbox.feature.dataView.readOnly</h3><p>是否不可编辑（只读）。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle</h3><p>数据视图 icon 样式设置。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis</h3><h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.emphasis.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal</h3><h3 class="opt">toolbox.feature.dataView.iconStyle.normal.textAlign</h3><p>文本对齐方式，<code>'left'</code> / <code>'right'</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.textPosition</h3><p>文本位置，<code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.dataView.iconStyle.normal.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.dataView.icon</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.dataView.title</h3><h3 class="opt">toolbox.feature.dataView.show</h3><p>是否显示该工具。</p>
<h3 class="opt">toolbox.feature.restore</h3><p>配置项还原。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle</h3><p>还原 icon 样式设置。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis</h3><h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.emphasis.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal</h3><h3 class="opt">toolbox.feature.restore.iconStyle.normal.textAlign</h3><p>文本对齐方式，<code>'left'</code> / <code>'right'</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.textPosition</h3><p>文本位置，<code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.restore.iconStyle.normal.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.restore.icon</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.restore.title</h3><h3 class="opt">toolbox.feature.restore.show</h3><p>是否显示该工具。</p>
<h3 class="opt">toolbox.feature.saveAsImage</h3><p>保存为图片。</p>
<h3 class="opt">toolbox.feature.saveAsImage.pixelRatio</h3><p>保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle</h3><p>保存为图片 icon 样式设置。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis</h3><h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.emphasis.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal</h3><h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.textAlign</h3><p>文本对齐方式，<code>'left'</code> / <code>'right'</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.textPosition</h3><p>文本位置，<code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.borderType</h3><p>柱条的描边类型，默认为实线，支持 <code>'solid'</code>, <code>'dashed'</code>, <code>'dotted'</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.borderWidth</h3><p>描边线宽。为 0 时无描边。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.borderColor</h3><p>图形的描边颜色。支持的格式同 <code>color</code>。</p>
<h3 class="opt">toolbox.feature.saveAsImage.iconStyle.normal.color</h3><p>图形的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">toolbox.feature.saveAsImage.icon</h3><p>Icon 的 path 字符串，ECharts 3 中支持使用自定义的 svg path 作为 icon，格式参见 <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>
<h3 class="opt">toolbox.feature.saveAsImage.title</h3><h3 class="opt">toolbox.feature.saveAsImage.show</h3><p>是否显示该工具。</p>
<h3 class="opt">toolbox.feature.saveAsImage.excludeComponents</h3><p>保存为图片时忽略的组件列表，默认忽略工具栏。</p>
<h3 class="opt">toolbox.feature.saveAsImage.backgroundColor</h3><p>保存的图片背景色，默认使用 <a href="#backgroundColor">backgroundColor</a>，如果<code>backgroundColor</code>不存在的话会取白色。</p>
<h3 class="opt">toolbox.feature.saveAsImage.name</h3><p>保存的文件名称，默认使用 <a href="#title.text">title.text</a> 作为名称。</p>
<h3 class="opt">toolbox.feature.saveAsImage.type</h3><p>保存的图片格式。支持 <code>'png'</code> 和 <code>'jpeg'</code>。</p>
<h3 class="opt">toolbox.showTitle</h3><p>是否在鼠标 hover 的时候显示每个工具 icon 的标题。</p>
<h3 class="opt">toolbox.itemGap</h3><p>工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。</p>
<h3 class="opt">toolbox.itemSize</h3><p>工具栏 icon 的大小。</p>
<h3 class="opt">toolbox.orient</h3><p>工具栏 icon 的布局朝向。</p>
<p>可选：</p>
<ul>
<li>'horizontal'</li>
<li>'vertical'</li>
</ul>
<h3 class="opt">toolbox.show</h3><p>是否显示工具栏组件。</p>
<h3 class="opt">tooltip</h3><p>提示框组件。</p>
<h3 class="opt">tooltip.axisPointer</h3><p>坐标轴指示器配置项，在 <a href="#tooltip.trigger">trigger</a> 为 <code>'axis'</code> 时有效。</p>
<h3 class="opt">tooltip.axisPointer.shadowStyle</h3><p><a href="#tooltip.axisPointer.type">axisPointer.type</a> 为 <code>'shadow'</code> 时有效。</p>
<h3 class="opt">tooltip.axisPointer.shadowStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">tooltip.axisPointer.shadowStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">tooltip.axisPointer.shadowStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">tooltip.axisPointer.shadowStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">tooltip.axisPointer.shadowStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">tooltip.axisPointer.shadowStyle.color</h3><p>填充的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">tooltip.axisPointer.crossStyle</h3><p><a href="#tooltip.axisPointer.type">axisPointer.type</a> 为 <code>'cross'</code> 时有效。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.textStyle</h3><p>十字准星准星上的文字样式。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.textStyle.fontSize</h3><p>文字的字体大小</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">tooltip.axisPointer.crossStyle.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">tooltip.axisPointer.crossStyle.textStyle.color</h3><p>文字的颜色。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">tooltip.axisPointer.crossStyle.type</h3><p>线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">tooltip.axisPointer.crossStyle.width</h3><p>线宽。</p>
<h3 class="opt">tooltip.axisPointer.crossStyle.color</h3><p>线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">tooltip.axisPointer.lineStyle</h3><p><a href="#tooltip.axisPointer.type">axisPointer.type</a> 为 <code>'line'</code> 时有效。</p>
<h3 class="opt">tooltip.axisPointer.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">tooltip.axisPointer.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">tooltip.axisPointer.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">tooltip.axisPointer.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">tooltip.axisPointer.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">tooltip.axisPointer.lineStyle.type</h3><p>线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">tooltip.axisPointer.lineStyle.width</h3><p>线宽。</p>
<h3 class="opt">tooltip.axisPointer.lineStyle.color</h3><p>线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">tooltip.axisPointer.animationDelayUpdate</h3><p>数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>
<p>如下示例：</p>
<pre><code class="lang-js">animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
</code></pre>
<p>也可以看<a href="bar-animation-delay" target="_blank">该示例</a></p>
<h3 class="opt">tooltip.axisPointer.animationEasingUpdate</h3><p>数据更新动画的缓动效果。</p>
<h3 class="opt">tooltip.axisPointer.animationDurationUpdate</h3><p>数据更新动画的时长。</p>
<h3 class="opt">tooltip.axisPointer.animationDelay</h3><p>初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>
<p>如下示例：</p>
<pre><code class="lang-js">animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
</code></pre>
<p>也可以看<a href="bar-animation-delay" target="_blank">该示例</a></p>
<h3 class="opt">tooltip.axisPointer.animationEasing</h3><p>初始动画的缓动效果。不同的缓动效果可以参考 <a href="line-easing" target="_blank">缓动示例</a>。</p>
<h3 class="opt">tooltip.axisPointer.animationDuration</h3><p>初始动画的时长。</p>
<h3 class="opt">tooltip.axisPointer.animationThreshold = 2000</h3><p>是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>
<h3 class="opt">tooltip.axisPointer.animation</h3><p>是否开启动画，默认开启。</p>
<h3 class="opt">tooltip.axisPointer.axis</h3><p>指示器的坐标轴。可以是 <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code>。默认取类目轴或者时间轴。</p>
<h3 class="opt">tooltip.axisPointer.type</h3><p>指示器类型。</p>
<p>可选</p>
<ul>
<li><p><code>'line'</code> 直线指示器</p>
</li>
<li><p><code>'cross'</code> 十字准星指示器</p>
</li>
<li><p><code>'shadow'</code> 阴影指示器</p>
</li>
</ul>
<h3 class="opt">tooltip.extraCssText</h3><p>额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：</p>
<pre><code class="lang-js">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
</code></pre>
<h3 class="opt">tooltip.textStyle</h3><p>提示框浮层的文本样式。</p>
<h3 class="opt">tooltip.textStyle.fontSize</h3><p>文字的字体大小</p>
<h3 class="opt">tooltip.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">tooltip.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">tooltip.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">tooltip.textStyle.color</h3><p>文字的颜色。</p>
<h3 class="opt">tooltip.padding</h3><p>提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>
<p>使用示例：</p>
<pre><code class="lang-js">// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
</code></pre>
<h3 class="opt">tooltip.borderWidth</h3><p>提示框浮层的边框宽。</p>
<h3 class="opt">tooltip.borderColor</h3><p>提示框浮层的边框颜色。</p>
<h3 class="opt">tooltip.backgroundColor</h3><p>提示框浮层的背景颜色。</p>
<h3 class="opt">tooltip.formatter</h3><p>提示框浮层内容格式器，支持字符串模板和回调函数两种形式。</p>
<ol>
<li><p>字符串模板。</p>
<p> 模板变量有 <code>{a}</code>, <code>{b}</code>，<code>{c}</code>，<code>{d}</code>，<code>{e}</code>，分别表示系列名，数据名，数据值等。
在 <a href="#tooltip.trigger">trigger</a> 为 <code>'axis'</code> 的时候，会有多个系列的数据，此时可以通过 <code>{a0}</code>, <code>{a1}</code>, <code>{a2}</code> 这种后面加索引的方式表示系列的索引。
不同图表类型下的 <code>{a}</code>，<code>{b}</code>，<code>{c}</code>，<code>{d}</code> 含义不一样。
其中变量<code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code>在不同图表类型下代表数据含义为：</p>
<ul>
<li><p>折线（区域）图、柱状（条形）图、K线图 : <code>{a}</code>（系列名称），<code>{b}</code>（类目值），<code>{c}</code>（数值）, <code>{d}</code>（无）</p>
</li>
<li><p>散点图（气泡）图 : <code>{a}</code>（系列名称），<code>{b}</code>（数据名称），<code>{c}</code>（数值数组）, <code>{d}</code>（无）</p>
</li>
<li><p>地图 : <code>{a}</code>（系列名称），<code>{b}</code>（区域名称），<code>{c}</code>（合并数值）, <code>{d}</code>（无）</p>
</li>
<li><p>饼图、仪表盘、漏斗图: <code>{a}</code>（系列名称），<code>{b}</code>（数据项名称），<code>{c}</code>（数值）, <code>{d}</code>（百分比）</p>
<p>更多其它图表模板变量的含义可以见相应的图表的 label.normal.formatter 配置项。</p>
<p><strong>示例：</strong></p>
<pre><code class="lang-js">formatter: '{b0}: {c0}&lt;br /&gt;{b1}: {c1}'
</code></pre>
</li>
</ul>
</li>
<li><p>回调函数。</p>
<p> 回调函数格式：</p>
<pre><code class="lang-js"> (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string
</code></pre>
<p> 第一个参数 <code>params</code> 是 formatter 需要的数据集。格式如下：</p>
<pre><code class="lang-js"> {
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
</code></pre>
<p> 在 <a href="#tooltip.trigger">trigger</a> 为 <code>'axis'</code> 的时候 <code>params</code> 是多个系列的数据数组。</p>
<p> <strong>注：</strong> ECharts 2.x 使用数组表示各参数的方式不再支持。</p>
<p> 第二个参数 <code>ticket</code> 是异步回调标识，配合第三个参数 <code>callback</code> 使用。
第三个参数 <code>callback</code> 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 <code>ticket</code> 和 <code>html</code> 更新提示框浮层内容。</p>
<p> 示例：</p>
<pre><code class="lang-js"> formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}
</code></pre>
</li>
</ol>
<h3 class="opt">tooltip.transitionDuration</h3><p>提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。</p>
<h3 class="opt">tooltip.position</h3><p>提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。</p>
<p>可选：</p>
<ul>
<li><p><code>Array</code></p>
<p> 通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置。</p>
<p> 示例:</p>
<pre><code class="lang-js"> // 绝对位置，相对于容器左侧 10px, 上侧 10 px
position: [10, 10]
// 相对位置，放置在容器正中间
position: ['50%', '50%']
</code></pre>
</li>
<li><p><code>Function</code></p>
<p> 回调函数，格式如下</p>
<pre><code class="lang-js"> (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object) =&gt; Array
</code></pre>
<p> 第一个参数是鼠标位置，第二个参数同 formatter 的参数相同，第三个参数是 tooltip 的 dom 对象， 第四个参数只有鼠标在图形上时有效，是一个用<code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> 四个属性表达的图形包围盒。返回值是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相对的百分比。</p>
<p> 如下示例：</p>
<pre><code class="lang-js"> position: function (point, params, dom) {
// 固定在顶部
return [point[0], '10%'];
}
</code></pre>
</li>
<li><p><code>'inside'</code></p>
<p> 鼠标所在图形的内部中心位置，只在 <a href="#tooltip.trigger">trigger</a> 为<code>'item'</code>的时候有效。</p>
</li>
<li><p><code>'top'</code></p>
<p> 鼠标所在图形上侧，只在 <a href="#tooltip.trigger">trigger</a> 为<code>'item'</code>的时候有效。</p>
</li>
<li><p><code>'left'</code></p>
<p> 鼠标所在图形左侧，只在 <a href="#tooltip.trigger">trigger</a> 为<code>'item'</code>的时候有效。</p>
</li>
<li><p><code>'right'</code></p>
<p> 鼠标所在图形右侧，只在 <a href="#tooltip.trigger">trigger</a> 为<code>'item'</code>的时候有效。</p>
</li>
<li><p><code>'bottom'</code></p>
<p> 鼠标所在图形底侧，只在 <a href="#tooltip.trigger">trigger</a> 为<code>'item'</code>的时候有效。</p>
</li>
</ul>
<h3 class="opt">tooltip.enterable</h3><p>鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 <code>true</code>。</p>
<h3 class="opt">tooltip.hideDelay</h3><p>浮层隐藏的延迟，单位为 ms，在 <a href="#tooltip.alwaysShowContent">alwaysShowContent</a> 为 <code>true</code> 的时候无效。</p>
<h3 class="opt">tooltip.showDelay</h3><p>浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 <a href="#tooltip.triggerOn">triggerOn</a> 为 <code>'mousemove'</code> 时有效。</p>
<h3 class="opt">tooltip.alwaysShowContent</h3><p>是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 <a href="#tooltip.hideDelay">一定时间</a> 后隐藏，设置为 <code>true</code> 可以保证一直显示提示框内容。</p>
<p>该属性为 ECharts 3.0 中新加。</p>
<h3 class="opt">tooltip.triggerOn</h3><p>提示框触发的条件，可选：</p>
<ul>
<li><p><code>'mousemove'</code></p>
<p> 鼠标移动时触发。</p>
</li>
<li><p><code>'click'</code></p>
<p> 鼠标点击时触发。</p>
</li>
<li><p><code>'none'</code></p>
<p> 不触发，用户可以通过 <a href="api.html#action.tooltip.showTip" target="_blank">action.tooltip.showTip</a> 和 <a href="api.html#action.tooltip.hideTip" target="_blank">action.tooltip.hideTip</a> 来手动触发和隐藏。</p>
</li>
</ul>
<p>该属性为 ECharts 3.0 中新加。</p>
<h3 class="opt">tooltip.trigger</h3><p>触发类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'item'</code></p>
<p> 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。</p>
</li>
<li><p><code>'axis'</code></p>
<p> 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。</p>
<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>
</li>
</ul>
<h3 class="opt">tooltip.showContent</h3><p>是否显示提示框浮层，默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为<code>false</code>。</p>
<h3 class="opt">tooltip.show</h3><p>是否显示提示框组件，包括提示框浮层和 <a href="#tooltip.axisPointer">axisPointer</a>。</p>
<h3 class="opt">visualMap</h3><p><code>visualMap</code> 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。</p>
<p>视觉元素可以是：<br></p>
<ul>
<li><code>symbol</code>: 图元的图形类别。</li>
<li><code>symbolSize</code>: 图元的大小。</li>
<li><code>color</code>: 图元的颜色。</li>
<li><code>colorAlpha</code>: 图元的颜色的透明度。</li>
<li><code>opacity</code>: 图元以及其附属物（如文字标签）的透明度。</li>
<li><code>colorLightness</code>: 颜色的明暗度，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
<li><code>colorSaturation</code>: 颜色的饱和度，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
<li><code>colorHue</code>: 颜色的色调，参见 <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>。</li>
</ul>
<p><code>visualMap</code> 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。</p>
<p><code>visualMap</code> 组件可以定义为 <a href="#visualMap-piecewise">分段型（visualMapPiecewise）</a> 或 <a href="#visualMap-continuous">连续型（visualMapContinuous）</a>，通过 <code>type</code> 来区分。例如：</p>
<pre><code class="lang-javascript">option = {
visualMap: [
{ // 第一个 visualMap 组件
type: 'continuous', // 定义为连续型 viusalMap
...
},
{ // 第二个 visualMap 组件
type: 'piecewise', // 定义为分段型 visualMap
...
}
],
...
};
</code></pre>
<p><br>
<strong>✦ 视觉映射方式的配置 ✦</strong></p>
<p>既然是『数据』到『视觉元素』的映射，<code>visualMap</code> 中可以指定数据的『哪个维度』（参见<a href="#visualMap.dimension">visualMap.dimension</a>）映射到哪些『视觉元素』（参见<a href="#visualMap.inRange">visualMap.inRange</a> 和 <a href="#visualMap.outOfRange">visualMap.outOfRange</a>）中。</p>
<p><br>
<strong>✦ 与 ECharts2 中 dataRange 的关系 ✦</strong></p>
<p><code>visualMap</code> 是由 ECharts2 中的 <code>dataRange</code> 组件改名以及扩展而来。ECharts3里 <code>option</code> 中的 <code>dataRange</code> 配置项仍然被兼容，会自动转换成 <code>visualMap</code> 配置项。在option中推荐写 <code>visualMap</code> 而非 <code>dataRange</code>。</p>
<p><br>
<strong>✦ 以下是visualMap各组件的详细介绍 ✦</strong></p>
<p><br>
<br></p>
<h3 class="opt">dataZoom</h3><p><code>dataZoom</code> 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。</p>
<p>现在支持这几种类型的 <code>dataZoom</code> 组件：</p>
<ul>
<li><p><a href="#dataZoom-inside">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。</p>
</li>
<li><p><a href="#dataZoom-slider">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条，用户在滑动条上进行缩放或漫游。</p>
</li>
<li><p><a href="#toolbox.feature.dataZoom">框选型数据区域缩放组件（dataZoomSelect）</a>：提供一个选框进行数据区域缩放。即 <a href="#toolbox.feature.dataZoom">toolbox.feature.dataZoom</a>，配置项在 <code>toolbox</code> 中。</p>
</li>
</ul>
<p>如下例子：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/scatter-dataZoom-all&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<p><br></p>
<hr>
<p><strong>✦ dataZoom 和 数轴的关系 ✦</strong></p>
<p><code>dataZoom</code> 主要是对 <code>数轴（axis）</code> 进行操作（控制数轴的显示范围，或称窗口（window））。</p>
<blockquote>
<p>可以通过 <a href="#dataZoom.xAxisIndex">dataZoom.xAxisIndex</a> 或 <a href="#dataZoom.yAxisIndex">dataZoom.yAxisIndex</a> 或 <a href="#dataZoom.radiusAxisIndex">dataZoom.radiusAxisIndex</a> 或 <a href="#dataZoom.angleAxisIndex">dataZoom.angleAxisIndex</a> 来指定 <code>dataZoom</code> 控制哪个或哪些数轴。</p>
</blockquote>
<p><code>dataZoom</code> 组件可 <strong>同时存在多个</strong>，起到共同控制的作用。如果多个 <code>dataZoom</code> 组件共同控制同一个数轴，他们会自动联动。</p>
<p><br></p>
<hr>
<p><strong>✦ dataZoom 组件如何影响轴和数据 ✦</strong></p>
<p><code>dataZoom</code> 的运行原理是通过 <code>数据过滤</code> 以及在内部设置轴的显示窗口来达到 <code>数据窗口缩放</code> 的效果。</p>
<p>数据过滤模式（<a href="#dataZoom.filterMode">dataZoom.filterMode</a>）的设置不同，效果也不同。</p>
<p>可选值为：</p>
<ul>
<li><p>'filter'：当前数据窗口外的数据，被 <strong>过滤掉</strong>。即<strong>会</strong>影响其他轴的数据范围。</p>
</li>
<li><p>'empty'：当前数据窗口外的数据，被 <strong>设置为空</strong>。即<strong>不会</strong>影响其他轴的数据范围。</p>
</li>
</ul>
<p>如何设置，由用户根据场景和需求自己决定。经验来说：</p>
<ul>
<li><p>当『只有 X 轴 或 只有 Y 轴受 <code>dataZoom</code> 组件控制』时，常使用 <code>filterMode: 'filter'</code>，这样能使另一个轴自适应过滤后的数值范围。</p>
</li>
<li><p>当『X 轴 Y 轴分别受 <code>dataZoom</code> 组件控制』时：</p>
<ul>
<li><p>如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中，那么两个轴可都设为 <code>fiterMode: 'empty'</code>。</p>
</li>
<li><p>如果 X 轴为主，Y 轴为辅，比如在『柱状图』中，需要『拖动 <code>dataZoomX</code> 改变 X 轴过滤柱子时，Y 轴的范围也自适应剩余柱子的高度』，『拖动 <code>dataZoomY</code> 改变 Y 轴过滤柱子时，X 轴范围不受影响』，那么就 X轴设为 <code>fiterMode: 'filter'</code>，Y 轴设为 <code>fiterMode: 'empty'</code>，即主轴 <code>'filter'</code>，辅轴 <code>'empty'</code>。</p>
</li>
</ul>
</li>
</ul>
<p>下面是个具体例子：</p>
<pre><code class="lang-javascript">option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series{
type: 'bar',
data: [
// 第一列对应 X 轴，第二列对应 Y 轴。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
</code></pre>
<p>上例中，<code>dataZoomX</code> 的 <code>filterMode</code> 设置为 <code>'filter'</code>。于是，假设当用户拖拽 <code>dataZoomX</code>（不去动 <code>dataZoomY</code>）导致其 valueWindow 变为 <code>[2, 50]</code> 时，<code>dataZoomX</code> 对 series.data 的第一列进行遍历，窗口外的整项去掉，最终得到的 series.data 为：</p>
<pre><code class="lang-javascript">[
// 第一列对应 X 轴，第二列对应 Y 轴。
[12, 24, 36],
// [90, 80, 70] 整项被过滤掉，因为 90 在 dataWindow 之外。
[3, 9, 27]
// [1, 11, 111] 整项被过滤掉，因为 1 在 dataWindow 之外。
]
</code></pre>
<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>
<p>所以，<code>filterMode: 'filter'</code> 的效果是：过滤数据后使另外的轴也能自动适应当前数据的范围。</p>
<p>再从头来，上例中 <code>dataZoomY</code> 的 <code>filterMode</code> 设置为 <code>'empty'</code>。于是，假设当用户拖拽 <code>dataZoomY</code>（不去动 <code>dataZoomX</code>）导致其 dataWindow 变为 <code>[10, 60]</code> 时，<code>dataZoomY</code> 对 series.data 的第二列进行遍历，窗口外的值被设置为 empty （即替换为 NaN，这样设置为空的项，其所对应柱形，在 X 轴还有占位，只是不显示出来）。最终得到的 series.data 为：</p>
<pre><code class="lang-javascript">[
// 第一列对应 X 轴，第二列对应 Y 轴。
[12, 24, 36],
[90, NaN, 70], // 设置为 empty (NaN)
[3, NaN, 27], // 设置为 empty (NaN)
[1, 11, 111]
]
</code></pre>
<p>这时，series.data 中对应于 X 轴的值仍然全部保留不受影响，为 <code>12</code>、<code>90</code>、<code>3</code>、<code>1</code>。那么用户对 <code>dataZoomY</code> 的拖拽操作不会影响到 X 轴的范围。这样的效果，对于离群点（outlier）过滤功能，比较清晰。</p>
<p>如下面的例子：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/bar-dataZoom-filterMode&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<p>另外，如果在任一个数轴上设置了 <code>min</code>、<code>max</code>（如设置 <code>yAxis: {min: 0, max: 400}</code>），那么这个数轴无论如何也不会被其他数轴的 dataZoom 行为影响了。</p>
<p><br></p>
<hr>
<p><strong>✦ 数据窗口的设置 ✦</strong></p>
<p><code>dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>
<ul>
<li><p>百分比形式：即设置 <a href="#dataZoom.start">dataZoom.start</a> 和 <a href="#dataZoom.end">dataZoom.end</a>。</p>
</li>
<li><p>绝对数值形式：即设置 <a href="#dataZoom.startValue">dataZoom.startValue</a> 和 <a href="#dataZoom.endValue">dataZoom.endValue</a>。</p>
</li>
</ul>
<p>注意：当使用百分比形式指定 <code>dataZoom</code> 范围时，且处于如下场景（或类似场景）中，<code>dataZoom</code> 的结果是和 <code>dataZoom</code> 组件的定义顺序相关的。</p>
<pre><code class="lang-javascript">option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
start: 30,
end: 70
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty',
start: 20,
end: 80
}
],
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
// yAxis 中并没有使用 min、max 来显示限定轴的显示范围。
},
series{
type: 'bar',
data: [
// 第一列对应 X 轴，第二列对应 Y 轴。
[12, 24, 36],
[90, 80, 70],
[3, 9, 27],
[1, 11, 111]
]
}
}
</code></pre>
<p>在上例中，<code>dataZoomY</code> 的 <code>start: 20, end: 80</code> 到底表示什么意思？</p>
<ul>
<li><p>如果 <code>yAxis.min</code>、<code>yAxis.max</code> 进行了直接设置：</p>
<p> 那么 <code>dataZoomY</code> 的 <code>start: 20, end: 80</code> 表示 <code>yAxis.min</code> ~ <code>yAxis.max</code> 的 <code>20%</code> 到 <code>80%</code>。</p>
</li>
<li><p>如果 <code>yAxis.min</code>、<code>yAxis.max</code> 没有设置：</p>
<ul>
<li><p>如果 <code>dataZoomX</code> 设置为 <code>filterMode: 'empty'</code>：</p>
<p> 那么 <code>dataZoomY</code> 的 <code>start: 20, end: 80</code> 表示 series.data 中 <code>dataMinY</code> ~ <code>dataMaxY</code>（即上例中的 <code>9</code> ~ <code>80</code>）的 <code>20%</code> 到 <code>80%</code>。</p>
</li>
<li><p>如果 <code>dataZoomX</code> 设置为 <code>filterMode: 'filter'</code>：</p>
<p> 那么，因为 <code>dataZoomX</code> 定义 <code>dataZoomY</code> 组件之前，所以 <code>dataZoomX</code> 的 <code>start: 30, end: 70</code> 表示全部数据的 <code>30%</code> 到 <code>70%</code>，而 <code>dataZoomY</code> 组件的 <code>start: 20, end: 80</code> 表示经过 <code>dataZoomX</code> 过滤处理后，所得数据集的 <code>20%</code> 到 <code>80%</code>。</p>
<p> 如果需要改变这种处理顺序，那么改变 <code>dataZoomX</code> 和 <code>dataZoomY</code> 在 option 中的出现顺序即可。</p>
</li>
</ul>
</li>
</ul>
<p><br>
<br></p>
<p>下面是详细介绍：</p>
<h3 class="opt">radar</h3><p>雷达图坐标系组件，只适用于<a href="#series-radar">雷达图</a>。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件，为避免混淆，雷达图使用 radar 组件作为其坐标系。</p>
<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>
<p>下面是一个 radar 组件的一个自定义例子。</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/radar&amp;edit=1&amp;reset=1" width="400" height="400"></iframe>
<h3 class="opt">radar.indicator</h3><p>雷达图的指示器，用来指定雷达图中的多个变量（维度），如下示例。</p>
<pre><code class="lang-js">indicator: [
{ name: '销售（sales）', max: 6500},
{ name: '管理（Administration）', max: 16000},
{ name: '信息技术（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研发（Development）', max: 52000},
{ name: '市场（Marketing）', max: 25000}
]
</code></pre>
<h3 class="opt">radar.splitArea</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔区域，默认不显示。</p>
<h3 class="opt">radar.splitArea.areaStyle</h3><p>分隔区域的样式设置。</p>
<h3 class="opt">radar.splitArea.areaStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">radar.splitArea.areaStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radar.splitArea.areaStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radar.splitArea.areaStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radar.splitArea.areaStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radar.splitArea.areaStyle.color</h3><p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>
<h3 class="opt">radar.splitArea.show</h3><p>是否显示分隔区域。</p>
<h3 class="opt">radar.splitLine</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔线。</p>
<h3 class="opt">radar.splitLine.lineStyle</h3><h3 class="opt">radar.splitLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- overwrite color --><h3 class="opt">radar.splitLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radar.splitLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radar.splitLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radar.splitLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radar.splitLine.lineStyle.type</h3><p>分隔线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">radar.splitLine.lineStyle.width</h3><p>分隔线线宽。</p>
<h3 class="opt">radar.splitLine.lineStyle.color</h3><p>分隔线颜色，可以设置成单个颜色。</p>
<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>
<p>示例</p>
<pre><code>splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
</code></pre><h3 class="opt">radar.splitLine.show</h3><p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>
<h3 class="opt">radar.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">radar.axisLabel.textStyle</h3><h3 class="opt">radar.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">radar.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">radar.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">radar.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">radar.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">radar.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">radar.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">radar.axisLabel.rotate</h3><p>刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>
<p>旋转的角度从 -90 度到 90 度。</p>
<h3 class="opt">radar.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">radar.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">radar.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">radar.axisTick.lineStyle</h3><h3 class="opt">radar.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">radar.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radar.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radar.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radar.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radar.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">radar.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">radar.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">radar.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">radar.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">radar.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">radar.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">radar.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">radar.axisLine.lineStyle</h3><h3 class="opt">radar.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">radar.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radar.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radar.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radar.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radar.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">radar.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">radar.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">radar.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">radar.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">radar.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">radar.scale</h3><p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<h3 class="opt">radar.shape</h3><p>雷达图绘制类型，支持 <code>'polygon'</code> 和 <code>'circle'</code>。</p>
<h3 class="opt">radar.splitNumber</h3><p>指示器轴的分割段数。</p>
<h3 class="opt">radar.nameGap</h3><p>指示器名称和指示器轴的距离。</p>
<h3 class="opt">radar.name</h3><p>雷达图每个指示器名称的配置项。</p>
<h3 class="opt">radar.name.textStyle</h3><h3 class="opt">radar.name.textStyle.fontSize</h3><p>文字的字体大小</p>
<h3 class="opt">radar.name.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">radar.name.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">radar.name.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">radar.name.textStyle.color</h3><p>文字的颜色。</p>
<h3 class="opt">radar.name.formatter</h3><p>指示器名称显示的格式器。支持字符串和回调函数，如下示例：</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为指示器名称 {value}
formatter: '【{value}】'
// 使用回调函数，第一个参数是指示器名称，第二个参数是指示器配置项
formatter: function (value, indicator) {
return '【' + value + '】';
}
</code></pre>
<h3 class="opt">radar.name.show</h3><p>是否显示指示器名称。</p>
<h3 class="opt">radar.startAngle</h3><p>坐标系起始角度，也就是第一个指示器轴的角度。</p>
<h3 class="opt">radar.radius</h3><p>的半径，数组的第一项是内半径，第二项是外半径。</p>
<p>支持设置成百分比，相对于容器高宽中较小的一项的一半。</p>
<h3 class="opt">radar.center</h3><p>的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。</p>
<p>支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。</p>
<p><strong>使用示例：</strong></p>
<pre><code>// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']
</code></pre><h3 class="opt">radar.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">radar.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">angleAxis</h3><p>极坐标系的角度轴。</p>
<h3 class="opt">angleAxis.z</h3><p>角度轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">angleAxis.zlevel</h3><p>角度轴所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">angleAxis.data</h3><p>类目数据，在类目轴（<a href="#angleAxis.type">type</a>: 'category'）中有效。</p>
<p>示例：</p>
<pre><code class="lang-js">// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
</code></pre>
<h3 class="opt">angleAxis.splitArea</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔区域，默认不显示。</p>
<h3 class="opt">angleAxis.splitArea.areaStyle</h3><p>分隔区域的样式设置。</p>
<h3 class="opt">angleAxis.splitArea.areaStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">angleAxis.splitArea.areaStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">angleAxis.splitArea.areaStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">angleAxis.splitArea.areaStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">angleAxis.splitArea.areaStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">angleAxis.splitArea.areaStyle.color</h3><p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>
<h3 class="opt">angleAxis.splitArea.show</h3><p>是否显示分隔区域。</p>
<h3 class="opt">angleAxis.splitArea.interval</h3><p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href="#angleAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">angleAxis.splitLine</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔线。</p>
<h3 class="opt">angleAxis.splitLine.lineStyle</h3><h3 class="opt">angleAxis.splitLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- overwrite color --><h3 class="opt">angleAxis.splitLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">angleAxis.splitLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">angleAxis.splitLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">angleAxis.splitLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">angleAxis.splitLine.lineStyle.type</h3><p>分隔线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">angleAxis.splitLine.lineStyle.width</h3><p>分隔线线宽。</p>
<h3 class="opt">angleAxis.splitLine.lineStyle.color</h3><p>分隔线颜色，可以设置成单个颜色。</p>
<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>
<p>示例</p>
<pre><code>splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
</code></pre><h3 class="opt">angleAxis.splitLine.interval</h3><p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href="#angleAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">angleAxis.splitLine.show</h3><p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>
<h3 class="opt">angleAxis.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">angleAxis.axisLabel.textStyle</h3><h3 class="opt">angleAxis.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">angleAxis.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">angleAxis.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">angleAxis.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">angleAxis.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#angleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">angleAxis.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">angleAxis.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">angleAxis.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">angleAxis.axisLabel.interval</h3><p>坐标轴刻度标签的显示间隔，在类目轴中有效。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">angleAxis.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">angleAxis.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">angleAxis.axisTick.lineStyle</h3><h3 class="opt">angleAxis.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">angleAxis.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">angleAxis.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">angleAxis.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">angleAxis.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">angleAxis.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">angleAxis.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">angleAxis.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#angleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">angleAxis.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">angleAxis.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">angleAxis.axisTick.interval</h3><p>坐标轴刻度的显示间隔，在类目轴中有效。默认同 <a href="#angleAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">angleAxis.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">angleAxis.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">angleAxis.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">angleAxis.axisLine.lineStyle</h3><h3 class="opt">angleAxis.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">angleAxis.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">angleAxis.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">angleAxis.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">angleAxis.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">angleAxis.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">angleAxis.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">angleAxis.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">angleAxis.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">angleAxis.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">angleAxis.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">angleAxis.logBase</h3><p>对数轴的底数，只在对数轴中（<a href="#angleAxis.type">type</a>: 'log'）有效。</p>
<h3 class="opt">angleAxis.interval</h3><p>强制设置坐标轴分割间隔。</p>
<p>因为 <a href="#angleAxis.splitNumber">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href="#angleAxis.min">min</a>、<a href="#angleAxis.max">max</a> 强制设定刻度划分，一般不建议使用。</p>
<p>无法在类目轴中使用。在时间轴（<a href="#angleAxis.type">type</a>: 'time'）中需要传时间戳，在对数轴（<a href="#angleAxis.type">type</a>: 'log'）中需要传指数值。</p>
<h3 class="opt">angleAxis.minInterval</h3><p>自动计算的坐标轴最小间隔大小。</p>
<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>
<pre><code class="lang-js">{
minInterval: 1
}
</code></pre>
<p>只在数值轴中（<a href="#angleAxis.type">type</a>: 'value'）有效。</p>
<h3 class="opt">angleAxis.splitNumber</h3><p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>
<p>在类目轴中无效。</p>
<h3 class="opt">angleAxis.scale</h3><p>只在数值轴中（<a href="#angleAxis.type">type</a>: 'value'）有效。</p>
<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<p>在设置 <a href="#angleAxis.min">min</a> 和 <a href="#angleAxis.max">max</a> 之后该配置项无效。</p>
<h3 class="opt">angleAxis.max</h3><p>坐标轴刻度最大值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>
<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">angleAxis.min</h3><p>坐标轴刻度最小值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>
<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">angleAxis.boundaryGap</h3><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。</p>
<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>
<p>非类目轴，包括时间，数值，对数轴，<code>boundaryGap</code>是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href="#angleAxis.min">min</a> 和 <a href="#angleAxis.max">max</a> 后无效。
<strong>示例：</strong></p>
<pre><code class="lang-js">boundaryGap: ['20%', '20%']
</code></pre>
<h3 class="opt">angleAxis.type</h3><p>坐标轴类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据，为该类型时必须通过 <a href="#angleAxis.data">data</a> 设置类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
<li><p><code>'log'</code>
对数轴。适用于对数数据。</p>
</li>
</ul>
<h3 class="opt">angleAxis.clockwise</h3><p>刻度增长是否按顺时针，默认顺时针。</p>
<p>如下示例是 clockwise 为 <code>false</code> （逆时针）的效果：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/polar-anticlockwise&amp;edit=1&amp;reset=1" width="400" height="400"></iframe>
<h3 class="opt">angleAxis.startAngle</h3><p>起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。</p>
<p>如下示例是 startAngle 为 45 的效果：</p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=doc-example/polar-start-angle&amp;edit=1&amp;reset=1" width="400" height="400"></iframe>
<h3 class="opt">angleAxis.polarIndex</h3><p>角度轴所在的极坐标系的索引，默认使用第一个极坐标系。</p>
<h3 class="opt">radiusAxis</h3><p>极坐标系的径向轴。</p>
<h3 class="opt">radiusAxis.z</h3><p>半径轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">radiusAxis.zlevel</h3><p>半径轴所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">radiusAxis.data</h3><p>类目数据，在类目轴（<a href="#radiusAxis.type">type</a>: 'category'）中有效。</p>
<p>示例：</p>
<pre><code class="lang-js">// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
</code></pre>
<h3 class="opt">radiusAxis.splitArea</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔区域，默认不显示。</p>
<h3 class="opt">radiusAxis.splitArea.areaStyle</h3><p>分隔区域的样式设置。</p>
<h3 class="opt">radiusAxis.splitArea.areaStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">radiusAxis.splitArea.areaStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.splitArea.areaStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.splitArea.areaStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radiusAxis.splitArea.areaStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radiusAxis.splitArea.areaStyle.color</h3><p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>
<h3 class="opt">radiusAxis.splitArea.show</h3><p>是否显示分隔区域。</p>
<h3 class="opt">radiusAxis.splitArea.interval</h3><p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href="#radiusAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">radiusAxis.splitLine</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔线。</p>
<h3 class="opt">radiusAxis.splitLine.lineStyle</h3><h3 class="opt">radiusAxis.splitLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- overwrite color --><h3 class="opt">radiusAxis.splitLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.splitLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.splitLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radiusAxis.splitLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radiusAxis.splitLine.lineStyle.type</h3><p>分隔线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">radiusAxis.splitLine.lineStyle.width</h3><p>分隔线线宽。</p>
<h3 class="opt">radiusAxis.splitLine.lineStyle.color</h3><p>分隔线颜色，可以设置成单个颜色。</p>
<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>
<p>示例</p>
<pre><code>splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
</code></pre><h3 class="opt">radiusAxis.splitLine.interval</h3><p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href="#radiusAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">radiusAxis.splitLine.show</h3><p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>
<h3 class="opt">radiusAxis.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">radiusAxis.axisLabel.textStyle</h3><h3 class="opt">radiusAxis.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">radiusAxis.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">radiusAxis.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">radiusAxis.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">radiusAxis.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#radiusAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">radiusAxis.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">radiusAxis.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">radiusAxis.axisLabel.rotate</h3><p>刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>
<p>旋转的角度从 -90 度到 90 度。</p>
<h3 class="opt">radiusAxis.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">radiusAxis.axisLabel.interval</h3><p>坐标轴刻度标签的显示间隔，在类目轴中有效。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">radiusAxis.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">radiusAxis.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">radiusAxis.axisTick.lineStyle</h3><h3 class="opt">radiusAxis.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">radiusAxis.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radiusAxis.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radiusAxis.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">radiusAxis.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">radiusAxis.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#radiusAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">radiusAxis.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">radiusAxis.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">radiusAxis.axisTick.interval</h3><p>坐标轴刻度的显示间隔，在类目轴中有效。默认同 <a href="#radiusAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">radiusAxis.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">radiusAxis.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">radiusAxis.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">radiusAxis.axisLine.lineStyle</h3><h3 class="opt">radiusAxis.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">radiusAxis.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">radiusAxis.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">radiusAxis.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">radiusAxis.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">radiusAxis.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">radiusAxis.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">radiusAxis.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">radiusAxis.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">radiusAxis.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">radiusAxis.logBase</h3><p>对数轴的底数，只在对数轴中（<a href="#radiusAxis.type">type</a>: 'log'）有效。</p>
<h3 class="opt">radiusAxis.interval</h3><p>强制设置坐标轴分割间隔。</p>
<p>因为 <a href="#radiusAxis.splitNumber">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href="#radiusAxis.min">min</a>、<a href="#radiusAxis.max">max</a> 强制设定刻度划分，一般不建议使用。</p>
<p>无法在类目轴中使用。在时间轴（<a href="#radiusAxis.type">type</a>: 'time'）中需要传时间戳，在对数轴（<a href="#radiusAxis.type">type</a>: 'log'）中需要传指数值。</p>
<h3 class="opt">radiusAxis.minInterval</h3><p>自动计算的坐标轴最小间隔大小。</p>
<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>
<pre><code class="lang-js">{
minInterval: 1
}
</code></pre>
<p>只在数值轴中（<a href="#radiusAxis.type">type</a>: 'value'）有效。</p>
<h3 class="opt">radiusAxis.splitNumber</h3><p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>
<p>在类目轴中无效。</p>
<h3 class="opt">radiusAxis.scale</h3><p>只在数值轴中（<a href="#radiusAxis.type">type</a>: 'value'）有效。</p>
<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<p>在设置 <a href="#radiusAxis.min">min</a> 和 <a href="#radiusAxis.max">max</a> 之后该配置项无效。</p>
<h3 class="opt">radiusAxis.max</h3><p>坐标轴刻度最大值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>
<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">radiusAxis.min</h3><p>坐标轴刻度最小值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>
<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">radiusAxis.boundaryGap</h3><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。</p>
<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>
<p>非类目轴，包括时间，数值，对数轴，<code>boundaryGap</code>是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href="#radiusAxis.min">min</a> 和 <a href="#radiusAxis.max">max</a> 后无效。
<strong>示例：</strong></p>
<pre><code class="lang-js">boundaryGap: ['20%', '20%']
</code></pre>
<h3 class="opt">radiusAxis.inverse</h3><p>是否是反向坐标轴。ECharts 3 中新加。</p>
<h3 class="opt">radiusAxis.nameRotate</h3><p>坐标轴名字旋转，角度值。</p>
<h3 class="opt">radiusAxis.nameGap</h3><p>坐标轴名称与轴线之间的距离。</p>
<h3 class="opt">radiusAxis.nameTextStyle</h3><p>坐标轴名称的文字样式。</p>
<h3 class="opt">radiusAxis.nameTextStyle.fontSize</h3><p>坐标轴名称文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">radiusAxis.nameTextStyle.fontFamily</h3><p>坐标轴名称文字的字体系列</p>
<h3 class="opt">radiusAxis.nameTextStyle.fontWeight</h3><p>坐标轴名称文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">radiusAxis.nameTextStyle.fontStyle</h3><p>坐标轴名称文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">radiusAxis.nameTextStyle.color</h3><p>坐标轴名称的颜色，默认取 <a href="#radiusAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">radiusAxis.nameLocation</h3><p>坐标轴名称显示位置。</p>
<p><strong>可选：</strong></p>
<ul>
<li><code>'start'</code></li>
<li><code>'middle'</code></li>
<li><code>'end'</code></li>
</ul>
<h3 class="opt">radiusAxis.name</h3><p>坐标轴名称。</p>
<h3 class="opt">radiusAxis.type</h3><p>坐标轴类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据，为该类型时必须通过 <a href="#radiusAxis.data">data</a> 设置类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
<li><p><code>'log'</code>
对数轴。适用于对数数据。</p>
</li>
</ul>
<h3 class="opt">radiusAxis.polarIndex</h3><p>径向轴所在的极坐标系的索引，默认使用第一个极坐标系。</p>
<h3 class="opt">polar</h3><p>极坐标系，可以用于散点图和折线图。每个极坐标系拥有一个<a href="#angleAxis">角度轴</a>和一个<a href="#radiusAxis">半径轴</a>。</p>
<p><strong>示例：</strong></p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=scatter-polar-punchCard&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<h3 class="opt">polar.radius</h3><p>极坐标系的半径，数组的第一项是内半径，第二项是外半径。</p>
<p>支持设置成百分比，相对于容器高宽中较小的一项的一半。</p>
<h3 class="opt">polar.center</h3><p>极坐标系的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。</p>
<p>支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。</p>
<p><strong>使用示例：</strong></p>
<pre><code>// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']
</code></pre><h3 class="opt">polar.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">polar.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">yAxis</h3><p>直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 <a href="#yAxis.offset">offset</a> 属性防止同个位置多个 Y 轴的重叠。</p>
<h3 class="opt">yAxis.z</h3><p>Y 轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">yAxis.zlevel</h3><p>Y 轴所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">yAxis.data</h3><p>类目数据，在类目轴（<a href="#yAxis.type">type</a>: 'category'）中有效。</p>
<p>示例：</p>
<pre><code class="lang-js">// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
</code></pre>
<h3 class="opt">yAxis.splitArea</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔区域，默认不显示。</p>
<h3 class="opt">yAxis.splitArea.areaStyle</h3><p>分隔区域的样式设置。</p>
<h3 class="opt">yAxis.splitArea.areaStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">yAxis.splitArea.areaStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">yAxis.splitArea.areaStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">yAxis.splitArea.areaStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">yAxis.splitArea.areaStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">yAxis.splitArea.areaStyle.color</h3><p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>
<h3 class="opt">yAxis.splitArea.show</h3><p>是否显示分隔区域。</p>
<h3 class="opt">yAxis.splitArea.interval</h3><p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href="#yAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">yAxis.splitLine</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔线。</p>
<h3 class="opt">yAxis.splitLine.lineStyle</h3><h3 class="opt">yAxis.splitLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- overwrite color --><h3 class="opt">yAxis.splitLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">yAxis.splitLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">yAxis.splitLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">yAxis.splitLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">yAxis.splitLine.lineStyle.type</h3><p>分隔线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">yAxis.splitLine.lineStyle.width</h3><p>分隔线线宽。</p>
<h3 class="opt">yAxis.splitLine.lineStyle.color</h3><p>分隔线颜色，可以设置成单个颜色。</p>
<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>
<p>示例</p>
<pre><code>splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
</code></pre><h3 class="opt">yAxis.splitLine.interval</h3><p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href="#yAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">yAxis.splitLine.show</h3><p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>
<h3 class="opt">yAxis.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">yAxis.axisLabel.textStyle</h3><h3 class="opt">yAxis.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">yAxis.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">yAxis.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">yAxis.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">yAxis.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#yAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">yAxis.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">yAxis.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">yAxis.axisLabel.rotate</h3><p>刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>
<p>旋转的角度从 -90 度到 90 度。</p>
<h3 class="opt">yAxis.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">yAxis.axisLabel.interval</h3><p>坐标轴刻度标签的显示间隔，在类目轴中有效。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">yAxis.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">yAxis.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">yAxis.axisTick.lineStyle</h3><h3 class="opt">yAxis.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">yAxis.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">yAxis.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">yAxis.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">yAxis.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">yAxis.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">yAxis.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">yAxis.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#yAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">yAxis.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">yAxis.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">yAxis.axisTick.interval</h3><p>坐标轴刻度的显示间隔，在类目轴中有效。默认同 <a href="#yAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">yAxis.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">yAxis.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">yAxis.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">yAxis.axisLine.lineStyle</h3><h3 class="opt">yAxis.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">yAxis.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">yAxis.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">yAxis.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">yAxis.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">yAxis.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">yAxis.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">yAxis.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">yAxis.axisLine.onZero</h3><p>X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。</p>
<h3 class="opt">yAxis.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">yAxis.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">yAxis.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">yAxis.logBase</h3><p>对数轴的底数，只在对数轴中（<a href="#yAxis.type">type</a>: 'log'）有效。</p>
<h3 class="opt">yAxis.interval</h3><p>强制设置坐标轴分割间隔。</p>
<p>因为 <a href="#yAxis.splitNumber">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href="#yAxis.min">min</a>、<a href="#yAxis.max">max</a> 强制设定刻度划分，一般不建议使用。</p>
<p>无法在类目轴中使用。在时间轴（<a href="#yAxis.type">type</a>: 'time'）中需要传时间戳，在对数轴（<a href="#yAxis.type">type</a>: 'log'）中需要传指数值。</p>
<h3 class="opt">yAxis.minInterval</h3><p>自动计算的坐标轴最小间隔大小。</p>
<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>
<pre><code class="lang-js">{
minInterval: 1
}
</code></pre>
<p>只在数值轴中（<a href="#yAxis.type">type</a>: 'value'）有效。</p>
<h3 class="opt">yAxis.splitNumber</h3><p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>
<p>在类目轴中无效。</p>
<h3 class="opt">yAxis.scale</h3><p>只在数值轴中（<a href="#yAxis.type">type</a>: 'value'）有效。</p>
<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<p>在设置 <a href="#yAxis.min">min</a> 和 <a href="#yAxis.max">max</a> 之后该配置项无效。</p>
<h3 class="opt">yAxis.max</h3><p>坐标轴刻度最大值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>
<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">yAxis.min</h3><p>坐标轴刻度最小值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>
<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">yAxis.boundaryGap</h3><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。</p>
<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>
<p>非类目轴，包括时间，数值，对数轴，<code>boundaryGap</code>是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href="#yAxis.min">min</a> 和 <a href="#yAxis.max">max</a> 后无效。
<strong>示例：</strong></p>
<pre><code class="lang-js">boundaryGap: ['20%', '20%']
</code></pre>
<h3 class="opt">yAxis.inverse</h3><p>是否是反向坐标轴。ECharts 3 中新加。</p>
<h3 class="opt">yAxis.nameRotate</h3><p>坐标轴名字旋转，角度值。</p>
<h3 class="opt">yAxis.nameGap</h3><p>坐标轴名称与轴线之间的距离。</p>
<h3 class="opt">yAxis.nameTextStyle</h3><p>坐标轴名称的文字样式。</p>
<h3 class="opt">yAxis.nameTextStyle.fontSize</h3><p>坐标轴名称文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">yAxis.nameTextStyle.fontFamily</h3><p>坐标轴名称文字的字体系列</p>
<h3 class="opt">yAxis.nameTextStyle.fontWeight</h3><p>坐标轴名称文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">yAxis.nameTextStyle.fontStyle</h3><p>坐标轴名称文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">yAxis.nameTextStyle.color</h3><p>坐标轴名称的颜色，默认取 <a href="#yAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">yAxis.nameLocation</h3><p>坐标轴名称显示位置。</p>
<p><strong>可选：</strong></p>
<ul>
<li><code>'start'</code></li>
<li><code>'middle'</code></li>
<li><code>'end'</code></li>
</ul>
<h3 class="opt">yAxis.name</h3><p>坐标轴名称。</p>
<h3 class="opt">yAxis.type</h3><p>坐标轴类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据，为该类型时必须通过 <a href="#yAxis.data">data</a> 设置类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
<li><p><code>'log'</code>
对数轴。适用于对数数据。</p>
</li>
</ul>
<h3 class="opt">yAxis.offset</h3><p>Y 轴相对于默认位置的偏移，在相同的 <code>position</code> 上有多个 Y 轴的时候有用。</p>
<h3 class="opt">yAxis.position</h3><p>y 轴的位置。</p>
<p>可选：</p>
<ul>
<li><code>'left'</code></li>
<li><code>'right'</code></li>
</ul>
<p>默认 grid 中的第一个 y 轴在 grid 的左侧（<code>'left'</code>），第二个 y 轴视第一个 y 轴的位置放在另一侧。</p>
<h3 class="opt">yAxis.gridIndex</h3><p>y 轴所在的 grid 的索引，默认位于第一个 grid。</p>
<h3 class="opt">xAxis</h3><p>直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放左右两个 x 轴，多于两个 x 轴需要通过配置 <a href="#xAxis.offset">offset</a> 属性防止同个位置多个 x 轴的重叠。</p>
<h3 class="opt">xAxis.z</h3><p>X 轴组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">xAxis.zlevel</h3><p>X 轴所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">xAxis.data</h3><p>类目数据，在类目轴（<a href="#xAxis.type">type</a>: 'category'）中有效。</p>
<p>示例：</p>
<pre><code class="lang-js">// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
</code></pre>
<h3 class="opt">xAxis.splitArea</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔区域，默认不显示。</p>
<h3 class="opt">xAxis.splitArea.areaStyle</h3><p>分隔区域的样式设置。</p>
<h3 class="opt">xAxis.splitArea.areaStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">xAxis.splitArea.areaStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">xAxis.splitArea.areaStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">xAxis.splitArea.areaStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">xAxis.splitArea.areaStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">xAxis.splitArea.areaStyle.color</h3><p>分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。</p>
<h3 class="opt">xAxis.splitArea.show</h3><p>是否显示分隔区域。</p>
<h3 class="opt">xAxis.splitArea.interval</h3><p>坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 <a href="#xAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">xAxis.splitLine</h3><p>坐标轴在 <a href="#grid">grid</a> 区域中的分隔线。</p>
<h3 class="opt">xAxis.splitLine.lineStyle</h3><h3 class="opt">xAxis.splitLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- overwrite color --><h3 class="opt">xAxis.splitLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">xAxis.splitLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">xAxis.splitLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">xAxis.splitLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">xAxis.splitLine.lineStyle.type</h3><p>分隔线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">xAxis.splitLine.lineStyle.width</h3><p>分隔线线宽。</p>
<h3 class="opt">xAxis.splitLine.lineStyle.color</h3><p>分隔线颜色，可以设置成单个颜色。</p>
<p>也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。</p>
<p>示例</p>
<pre><code>splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#aaa', '#ddd']
}
}
</code></pre><h3 class="opt">xAxis.splitLine.interval</h3><p>坐标轴分隔线的显示间隔，在类目轴中有效。默认同 <a href="#xAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">xAxis.splitLine.show</h3><p>是否显示分隔线。默认数值轴显示，类目轴不显示。</p>
<h3 class="opt">xAxis.axisLabel</h3><p>坐标轴刻度标签的相关设置。</p>
<h3 class="opt">xAxis.axisLabel.textStyle</h3><h3 class="opt">xAxis.axisLabel.textStyle.fontSize</h3><p>文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">xAxis.axisLabel.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">xAxis.axisLabel.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">xAxis.axisLabel.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">xAxis.axisLabel.textStyle.color</h3><p>刻度标签文字的颜色，默认取 <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。支持回调函数，格式如下</p>
<pre><code class="lang-js">(val: string) =&gt; Color
</code></pre>
<p>参数是标签的文本，返回颜色值，如下示例：</p>
<pre><code class="lang-js">textStyle: {
color: function (val) {
return val &gt;= 0 ? 'green' : 'red';
}
}
</code></pre>
<h3 class="opt">xAxis.axisLabel.formatter</h3><p>刻度标签的内容格式器，支持字符串模板和回调函数两种形式。</p>
<p>示例:</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
</code></pre>
<h3 class="opt">xAxis.axisLabel.margin</h3><p>刻度标签与轴线之间的距离。</p>
<h3 class="opt">xAxis.axisLabel.rotate</h3><p>刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。</p>
<p>旋转的角度从 -90 度到 90 度。</p>
<h3 class="opt">xAxis.axisLabel.inside</h3><p>刻度标签是否朝内，默认朝外。</p>
<h3 class="opt">xAxis.axisLabel.interval</h3><p>坐标轴刻度标签的显示间隔，在类目轴中有效。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">xAxis.axisLabel.show</h3><p>是否显示刻度标签。</p>
<h3 class="opt">xAxis.axisTick</h3><p>坐标轴刻度相关设置。</p>
<h3 class="opt">xAxis.axisTick.lineStyle</h3><h3 class="opt">xAxis.axisTick.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<!-- Overwrite color --><h3 class="opt">xAxis.axisTick.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">xAxis.axisTick.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">xAxis.axisTick.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">xAxis.axisTick.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">xAxis.axisTick.lineStyle.type</h3><p>坐标轴刻度线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">xAxis.axisTick.lineStyle.width</h3><p>坐标轴刻度线宽。</p>
<h3 class="opt">xAxis.axisTick.lineStyle.color</h3><p>刻度线的颜色，默认取 <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">xAxis.axisTick.length</h3><p>坐标轴刻度的长度。</p>
<h3 class="opt">xAxis.axisTick.inside</h3><p>坐标轴刻度是否朝内，默认朝外。</p>
<h3 class="opt">xAxis.axisTick.interval</h3><p>坐标轴刻度的显示间隔，在类目轴中有效。默认同 <a href="#xAxis.axisLabel.interval">axisLabel.interval</a> 一样。</p>
<p>默认会采用标签不重叠的策略间隔显示标签。</p>
<p>可以设置成 0 强制显示所有标签。</p>
<p>如果设置为 <code>1</code>，表示『隔一个标签显示一个标签』，如果值为 <code>2</code>，表示隔两个标签显示一个标签，以此类推。</p>
<p>可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：</p>
<pre><code class="lang-js">(index:number, value: string) =&gt; boolean
</code></pre>
<p>第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 <code>false</code>。</p>
<h3 class="opt">xAxis.axisTick.alignWithLabel</h3><p>类目轴中在 <code>boundaryGap</code> 为 <code>true</code> 的时候有效，可以保证刻度线和标签对齐。如下图：</p>
<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>
<h3 class="opt">xAxis.axisTick.show</h3><p>是否显示坐标轴刻度。</p>
<h3 class="opt">xAxis.axisLine</h3><p>坐标轴轴线相关设置。</p>
<h3 class="opt">xAxis.axisLine.lineStyle</h3><h3 class="opt">xAxis.axisLine.lineStyle.opacity</h3><p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>
<h3 class="opt">xAxis.axisLine.lineStyle.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<h3 class="opt">xAxis.axisLine.lineStyle.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<h3 class="opt">xAxis.axisLine.lineStyle.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<h3 class="opt">xAxis.axisLine.lineStyle.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<h3 class="opt">xAxis.axisLine.lineStyle.type</h3><p>坐标轴线线的类型。</p>
<p>可选：</p>
<ul>
<li><code>'solid'</code></li>
<li><code>'dashed'</code></li>
<li><code>'dotted'</code></li>
</ul>
<h3 class="opt">xAxis.axisLine.lineStyle.width</h3><p>坐标轴线线宽。</p>
<h3 class="opt">xAxis.axisLine.lineStyle.color</h3><p>坐标轴线线的颜色。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>
<pre><code class="lang-js">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false)
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
color: new echarts.graphic.Pattern(
imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
)
</code></pre>
</blockquote>
<h3 class="opt">xAxis.axisLine.onZero</h3><p>X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。</p>
<h3 class="opt">xAxis.axisLine.show</h3><p>是否显示坐标轴轴线。</p>
<h3 class="opt">xAxis.triggerEvent</h3><p>坐标轴的标签是否响应和触发鼠标事件，默认不响应。</p>
<p>事件参数如下：</p>
<pre><code class="lang-js">{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
</code></pre>
<h3 class="opt">xAxis.silent</h3><p>坐标轴是否是静态无法交互。</p>
<h3 class="opt">xAxis.logBase</h3><p>对数轴的底数，只在对数轴中（<a href="#xAxis.type">type</a>: 'log'）有效。</p>
<h3 class="opt">xAxis.interval</h3><p>强制设置坐标轴分割间隔。</p>
<p>因为 <a href="#xAxis.splitNumber">splitNumber</a> 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 <a href="#xAxis.min">min</a>、<a href="#xAxis.max">max</a> 强制设定刻度划分，一般不建议使用。</p>
<p>无法在类目轴中使用。在时间轴（<a href="#xAxis.type">type</a>: 'time'）中需要传时间戳，在对数轴（<a href="#xAxis.type">type</a>: 'log'）中需要传指数值。</p>
<h3 class="opt">xAxis.minInterval</h3><p>自动计算的坐标轴最小间隔大小。</p>
<p>例如可以设置成<code>1</code>保证坐标轴分割刻度显示成整数。</p>
<pre><code class="lang-js">{
minInterval: 1
}
</code></pre>
<p>只在数值轴中（<a href="#xAxis.type">type</a>: 'value'）有效。</p>
<h3 class="opt">xAxis.splitNumber</h3><p>坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。</p>
<p>在类目轴中无效。</p>
<h3 class="opt">xAxis.scale</h3><p>只在数值轴中（<a href="#xAxis.type">type</a>: 'value'）有效。</p>
<p>是否是脱离 0 值比例。设置成 <code>true</code> 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。</p>
<p>在设置 <a href="#xAxis.min">min</a> 和 <a href="#xAxis.max">max</a> 之后该配置项无效。</p>
<h3 class="opt">xAxis.max</h3><p>坐标轴刻度最大值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMax'</code>，此时取数据在该轴上的最大值作为最大刻度。</p>
<p>不设置时会自动计算最大值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">xAxis.min</h3><p>坐标轴刻度最小值，在类目轴中无效。</p>
<p>可以设置成特殊值 <code>'dataMin'</code>，此时取数据在该轴上的最小值作为最小刻度。</p>
<p>不设置时会自动计算最小值保证坐标轴刻度的均匀分布。</p>
<h3 class="opt">xAxis.boundaryGap</h3><p>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。</p>
<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>
<p>非类目轴，包括时间，数值，对数轴，<code>boundaryGap</code>是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href="#xAxis.min">min</a> 和 <a href="#xAxis.max">max</a> 后无效。
<strong>示例：</strong></p>
<pre><code class="lang-js">boundaryGap: ['20%', '20%']
</code></pre>
<h3 class="opt">xAxis.inverse</h3><p>是否是反向坐标轴。ECharts 3 中新加。</p>
<h3 class="opt">xAxis.nameRotate</h3><p>坐标轴名字旋转，角度值。</p>
<h3 class="opt">xAxis.nameGap</h3><p>坐标轴名称与轴线之间的距离。</p>
<h3 class="opt">xAxis.nameTextStyle</h3><p>坐标轴名称的文字样式。</p>
<h3 class="opt">xAxis.nameTextStyle.fontSize</h3><p>坐标轴名称文字的字体大小</p>
<!-- Overwrite color --><h3 class="opt">xAxis.nameTextStyle.fontFamily</h3><p>坐标轴名称文字的字体系列</p>
<h3 class="opt">xAxis.nameTextStyle.fontWeight</h3><p>坐标轴名称文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">xAxis.nameTextStyle.fontStyle</h3><p>坐标轴名称文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">xAxis.nameTextStyle.color</h3><p>坐标轴名称的颜色，默认取 <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>
<h3 class="opt">xAxis.nameLocation</h3><p>坐标轴名称显示位置。</p>
<p><strong>可选：</strong></p>
<ul>
<li><code>'start'</code></li>
<li><code>'middle'</code></li>
<li><code>'end'</code></li>
</ul>
<h3 class="opt">xAxis.name</h3><p>坐标轴名称。</p>
<h3 class="opt">xAxis.type</h3><p>坐标轴类型。</p>
<p>可选：</p>
<ul>
<li><p><code>'value'</code>
数值轴，适用于连续数据。</p>
</li>
<li><p><code>'category'</code>
类目轴，适用于离散的类目数据，为该类型时必须通过 <a href="#xAxis.data">data</a> 设置类目数据。</p>
</li>
<li><p><code>'time'</code>
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。</p>
</li>
<li><p><code>'log'</code>
对数轴。适用于对数数据。</p>
</li>
</ul>
<h3 class="opt">xAxis.offset</h3><p>X 轴相对于默认位置的偏移，在相同的 <code>position</code> 上有多个 X 轴的时候有用。</p>
<h3 class="opt">xAxis.position</h3><p>x 轴的位置。</p>
<p>可选：</p>
<ul>
<li><code>'top'</code></li>
<li><code>'bottom'</code></li>
</ul>
<p>默认 grid 中的第一个 x 轴在 grid 的下方（<code>'bottom'</code>），第二个 x 轴视第一个 x 轴的位置放在另一侧。</p>
<h3 class="opt">xAxis.gridIndex</h3><p>x 轴所在的 grid 的索引，默认位于第一个 grid。</p>
<h3 class="opt">grid</h3><p>直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制<a href="#series-line">折线图</a>，<a href="#series-bar">柱状图</a>，<a href="#series-scatter">散点图（气泡图）</a>。</p>
<p>在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。</p>
<p><strong>例如下面这个 Anscombe Quartet 的示例：</strong></p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=scatter-anscombe-quartet&amp;edit=1&amp;reset=1" width="600" height="400"></iframe>
<h3 class="opt">grid.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">grid.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">grid.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">grid.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code> 以及值不为 <code>tranparent</code> 的背景色 <code>backgroundColor</code>。</p>
<h3 class="opt">grid.borderWidth</h3><p>网格的边框线宽。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">grid.borderColor</h3><p>网格的边框颜色。支持的颜色格式同 backgroundColor。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">grid.backgroundColor</h3><p>网格背景色，默认透明。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code> ，如果想要加上 alpha 通道，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code></p>
</blockquote>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">grid.containLabel</h3><p>grid 区域是否包含坐标轴的<a href="#yAxis.axisLabel">刻度标签</a>，在无法确定坐标轴标签的宽度，容器又比较小无法预留较多空间的时候，可以设为 <code>true</code> 防止标签溢出容器。</p>
<h3 class="opt">grid.height</h3><p>grid 组件的高度。默认自适应。</p>
<h3 class="opt">grid.width</h3><p>grid 组件的宽度。默认自适应。</p>
<h3 class="opt">grid.bottom</h3><p>grid 组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<h3 class="opt">grid.right</h3><p>grid 组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<h3 class="opt">grid.top</h3><p>grid 组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">grid.left</h3><p>grid 组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">grid.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">grid.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">grid.show</h3><p>是否显示直角坐标系网格。</p>
<h3 class="opt">legend</h3><p>图例组件。</p>
<p>图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。</p>
<p>ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。</p>
<h3 class="opt">legend.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">legend.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">legend.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">legend.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code> 以及值不为 <code>tranparent</code> 的背景色 <code>backgroundColor</code>。</p>
<h3 class="opt">legend.borderWidth</h3><p>图例的边框线宽。</p>
<h3 class="opt">legend.borderColor</h3><p>图例的边框颜色。支持的颜色格式同 backgroundColor。</p>
<h3 class="opt">legend.backgroundColor</h3><p>图例背景色，默认透明。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code> ，如果想要加上 alpha 通道，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code></p>
</blockquote>
<h3 class="opt">legend.data</h3><p>图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 <code>name</code>（如果是<a href="#series-pie">饼图</a>，也可以是饼图单个数据的 <code>name</code>）。图例组件会自动获取对应系列的颜色，图形标记（symbol）作为自己绘制的颜色和标记，特殊字符串 <code>''</code>（空字符串）或者 <code>'\n'</code>（换行字符串）用于图例的换行。</p>
<p>如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 <code>name</code> 属性对应表示系列的 <code>name</code>。</p>
<p>示例</p>
<pre><code>data: [{
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}]
</code></pre><h3 class="opt">legend.tooltip</h3><p>图例的 tooltip 配置，配置项同 <a href="#tooltip">tooltip</a>。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：</p>
<pre><code class="lang-js">legend: {
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
}
</code></pre>
<h3 class="opt">legend.textStyle</h3><p>图例的公用文本样式。</p>
<h3 class="opt">legend.textStyle.fontSize</h3><p>文字的字体大小</p>
<h3 class="opt">legend.textStyle.fontFamily</h3><p>文字的字体系列</p>
<h3 class="opt">legend.textStyle.fontWeight</h3><p>文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">legend.textStyle.fontStyle</h3><p>文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">legend.textStyle.color</h3><p>文字的颜色。</p>
<h3 class="opt">legend.selected</h3><p>图例选中状态表。</p>
<p>示例：</p>
<pre><code>selected: {
// 选中'系列1'
'系列1': true,
// 不选中'系列2'
'系列2': false
}
</code></pre><h3 class="opt">legend.inactiveColor</h3><p>图例关闭时的颜色。</p>
<h3 class="opt">legend.selectedMode</h3><p>图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 <code>false</code> 关闭。</p>
<p>除此之外也可以设成 <code>'single'</code> 或者 <code>'multiple'</code> 使用单选或者多选模式。</p>
<h3 class="opt">legend.formatter</h3><p>用来格式化图例文本，支持字符串模板和回调函数两种形式。</p>
<p>示例：</p>
<pre><code class="lang-js">// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
return 'Legend ' + name;
}
</code></pre>
<h3 class="opt">legend.itemHeight</h3><p>图例标记的图形高度。</p>
<h3 class="opt">legend.itemWidth</h3><p>图例标记的图形宽度。</p>
<h3 class="opt">legend.itemGap</h3><p>图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。</p>
<h3 class="opt">legend.padding</h3><p>图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>
<p>使用示例：</p>
<pre><code class="lang-js">// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
</code></pre>
<h3 class="opt">legend.align</h3><p>图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 <a href="#legend.left">left</a> 值为 'right' 以及纵向布局（<a href="#legend.orient">orient</a> 为 'vertical'）的时候为右对齐，及为 'right'。</p>
<p>可选：</p>
<ul>
<li>'auto'</li>
<li>'left'</li>
<li>'right'</li>
</ul>
<h3 class="opt">legend.orient</h3><p>图例列表的布局朝向。</p>
<p>可选：</p>
<ul>
<li>'horizontal'</li>
<li>'vertical'</li>
</ul>
<h3 class="opt">legend.height</h3><p>图例组件的高度。默认自适应。</p>
<h3 class="opt">legend.width</h3><p>图例组件的宽度。默认自适应。</p>
<h3 class="opt">legend.bottom</h3><p>图例组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">legend.right</h3><p>图例组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">legend.top</h3><p>图例组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">legend.left</h3><p>图例组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">legend.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">legend.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">legend.show</h3><h3 class="opt">title</h3><p>标题组件，包含主标题和副标题。</p>
<p>在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。</p>
<p><strong>例如下面不同缓动函数效果的示例，每一个缓动效果图都带有一个标题组件：</strong></p>
<iframe data-src="http://echarts.baidu.com/gallery/view.html?c=line-easing&amp;edit=1&amp;reset=1" width="700" height="400"></iframe>
<h3 class="opt">title.shadowOffsetY</h3><p>阴影垂直方向上的偏移距离。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">title.shadowOffsetX</h3><p>阴影水平方向上的偏移距离。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">title.shadowColor</h3><p>阴影颜色。支持的格式同<code>color</code>。</p>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code>。</p>
<h3 class="opt">title.shadowBlur</h3><p>图形阴影的模糊大小。该属性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起设置图形的阴影效果。</p>
<p>示例：</p>
<pre><code class="lang-js">{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
</code></pre>
<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code>show: true</code> 以及值不为 <code>tranparent</code> 的背景色 <code>backgroundColor</code>。</p>
<h3 class="opt">title.borderWidth</h3><p>标题的边框线宽。</p>
<h3 class="opt">title.borderColor</h3><p>标题的边框颜色。支持的颜色格式同 backgroundColor。</p>
<h3 class="opt">title.backgroundColor</h3><p>标题背景色，默认透明。</p>
<blockquote>
<p>颜色可以使用 RGB 表示，比如 <code>'rgb(128, 128, 128)'</code> ，如果想要加上 alpha 通道，可以使用 RGBA，比如 <code>'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code>'#ccc'</code></p>
</blockquote>
<h3 class="opt">title.bottom</h3><p>grid 组件离容器下侧的距离。</p>
<p>bottom 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">title.right</h3><p>grid 组件离容器右侧的距离。</p>
<p><code>right</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比。</p>
<p>默认自适应。</p>
<h3 class="opt">title.top</h3><p>grid 组件离容器上侧的距离。</p>
<p><code>top</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。</p>
<p>如果 <code>top</code> 的值为<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">title.left</h3><p>grid 组件离容器左侧的距离。</p>
<p><code>left</code> 的值可以是像 <code>20</code> 这样的具体像素值，可以是像 <code>'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code>'left'</code>, <code>'center'</code>, <code>'right'</code>。</p>
<p>如果 <code>left</code> 的值为<code>'left'</code>, <code>'center'</code>, <code>'right'</code>，组件会根据相应的位置自动对齐。</p>
<h3 class="opt">title.z</h3><p>组件的所有图形的<code>z</code>值。控制图形的前后顺序。<code>z</code>值小的图形会被<code>z</code>值大的图形覆盖。</p>
<p><code>z</code>相比<code>zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>
<h3 class="opt">title.zlevel</h3><p>所有图形的 zlevel 值。</p>
<p><code>zlevel</code>用于 Canvas 分层，不同<code>zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code>zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>
<p><code>zlevel</code> 大的 Canvas 会放在 <code>zlevel</code> 小的 Canvas 的上面。</p>
<h3 class="opt">title.itemGap</h3><p>主副标题之间的间距。</p>
<h3 class="opt">title.padding</h3><p>标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>
<p>使用示例：</p>
<pre><code class="lang-js">// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
</code></pre>
<h3 class="opt">title.subtextStyle</h3><h3 class="opt">title.subtextStyle.fontSize</h3><p>副标题文字的字体大小</p>
<h3 class="opt">title.subtextStyle.fontFamily</h3><p>副标题文字的字体系列</p>
<h3 class="opt">title.subtextStyle.fontWeight</h3><p>副标题文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">title.subtextStyle.fontStyle</h3><p>副标题文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">title.subtextStyle.color</h3><p>副标题文字的颜色。</p>
<h3 class="opt">title.subtarget</h3><p>指定窗口打开副标题超链接，可选：</p>
<ul>
<li><p><code>'self'</code> 当前窗口打开</p>
</li>
<li><p><code>'blank'</code> 新窗口打开</p>
</li>
</ul>
<h3 class="opt">title.sublink</h3><p>副标题文本超链接。</p>
<h3 class="opt">title.subtext</h3><p>副标题文本，支持使用 <code>\n</code> 换行。</p>
<h3 class="opt">title.textBaseline</h3><p>标题文本垂直对齐，支持 'top', 'middle', 'bottom'，默认根据标题位置决定。</p>
<h3 class="opt">title.textAlign</h3><p>标题文本水平对齐，支持 'left', 'center', 'right'，默认根据标题位置决定。</p>
<h3 class="opt">title.textStyle</h3><h3 class="opt">title.textStyle.fontSize</h3><p>主标题文字的字体大小</p>
<h3 class="opt">title.textStyle.fontFamily</h3><p>主标题文字的字体系列</p>
<h3 class="opt">title.textStyle.fontWeight</h3><p>主标题文字字体的粗细</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'bold'</code></li>
<li><code>'bolder'</code></li>
<li><code>'lighter'</code></li>
<li>100 | 200 | 300 | 400...</li>
</ul>
<h3 class="opt">title.textStyle.fontStyle</h3><p>主标题文字字体的风格</p>
<p>可选：</p>
<ul>
<li><code>'normal'</code></li>
<li><code>'italic'</code></li>
<li><code>'oblique'</code></li>
</ul>
<h3 class="opt">title.textStyle.color</h3><p>主标题文字的颜色。</p>
<h3 class="opt">title.target</h3><p>指定窗口打开主标题超链接。</p>
<p><strong>可选：</strong></p>
<ul>
<li><p><code>'self'</code> 当前窗口打开</p>
</li>
<li><p><code>'blank'</code> 新窗口打开</p>
</li>
</ul>
<h3 class="opt">title.link</h3><p>主标题文本超链接。</p>
<h3 class="opt">title.text</h3><p>主标题文本，支持使用 <code>\n</code> 换行。</p>
<h3 class="opt">title.show</h3><p>是否显示标题组件。</p>
</div></body></html>