| <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&edit=1&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&edit=1&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) => 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) => 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) => Color |
| </code></pre> |
| <p>参数是标签的文本,返回颜色值,如下示例:</p> |
| <pre><code class="lang-js">textStyle: { |
| color: function (val) { |
| return val >= 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) => 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) => 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&edit=1&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&edit=1&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) => Color |
| </code></pre> |
| <p>参数是标签的文本,返回颜色值,如下示例:</p> |
| <pre><code class="lang-js">textStyle: { |
| color: function (val) { |
| return val >= 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) => 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) => 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&edit=1&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&edit=1&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&edit=1&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) => Color |
| </code></pre> |
| <p>参数是标签的文本,返回颜色值,如下示例:</p> |
| <pre><code class="lang-js">textStyle: { |
| color: function (val) { |
| return val >= 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) => 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) => 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&edit=1&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&edit=1&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"><script src="echarts.js"></script> |
| <script src="map/js/china.js"></script> |
| <script> |
| var chart = echarts.init(document.getElementById('main')); |
| chart.setOption({ |
| series: [{ |
| type: 'map', |
| map: 'china' |
| }] |
| }); |
| </script> |
| </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&edit=1&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&edit=1&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&edit=1&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&edit=1&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&edit=1&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&edit=1&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&edit=1&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&edit=1&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&reset=1&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,
|