| <!doctype html> |
| <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]--> |
| <!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]--> |
| <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]--> |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]--> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts 水球图教程 </title> |
| <meta name="description" content="水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的水球图插件使你能够通过非常简单的配置，实现酷炫的数据展示效果。本文将会介绍，如何使用 ECharts 水球图。"> |
| <meta name="keywords" content="扩展, 教程"> |
| |
| |
| |
| <!-- Open Graph --> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:type" content="article"> |
| <meta property="og:title" content="ECharts 水球图教程"> |
| <meta property="og:description" content="水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的水球图插件使你能够通过非常简单的配置，实现酷炫的数据展示效果。本文将会介绍，如何使用 ECharts 水球图。"> |
| <meta property="og:url" content="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial.html"> |
| <meta property="og:site_name" content=""> |
| |
| |
| |
| |
| |
| <link rel="canonical" href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial.html"> |
| <link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed"> |
| |
| <!-- http://t.co/dKP3o1e --> |
| <meta name="HandheldFriendly" content="True"> |
| <meta name="MobileOptimized" content="320"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <!-- For all browsers --> |
| <link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css"> |
| |
| <meta http-equiv="cleartype" content="on"> |
| |
| <!-- Load Modernizr --> |
| <script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script> |
| |
| <!-- Icons --> |
| <!-- 16x16 --> |
| <link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico"> |
| <!-- 32x32 --> |
| <link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png"> |
| <!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices --> |
| <link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png"> |
| <!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini --> |
| <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png"> |
| <!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch --> |
| <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png"> |
| <!-- 144x144 (precomposed) for iPad 3rd and 4th generation --> |
| <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png"> |
| |
| </head> |
| |
| <body id="post" class="feature"> |
| |
| <!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]--> |
| <nav class="navbar navbar-default navbar-fixed-top"> |
| <div class="container-fluid"> |
| <div class="navbar-header"> |
| <button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a href="http://echarts.baidu.com/index.html" class="navbar-brand"> |
| <img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo"> |
| </a> |
| </div> |
| <div id="navbar-collapse" class="collapse navbar-collapse"> |
| <ul class="nav navbar-nav navbar-left"> |
| <li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li> |
| <li id="nav-doc" class="dropdown"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/feature.html">特性</a></li> |
| <li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li> |
| <li><a href="http://echarts.baidu.com/api.html">API</a></li> |
| <li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li> |
| <li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li> |
| <li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li> |
| </ul> |
| </li> |
| <li id="nav-download" class="dropdown"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/download.html">下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li> |
| </ul> |
| </li> |
| <li id="nav-examples"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li> |
| <li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li> |
| </ul> |
| </li> |
| <li id="nav-community" class="active"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://gallery.echartsjs.com">GALLERY</a></li> |
| <li><a href="http://echarts.baidu.com/blog">博客</a></li> |
| </ul> |
| </li> |
| <li id="nav-tool"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li> |
| <li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li> |
| <li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li> |
| </ul> |
| </li> |
| <li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li> |
| </ul> |
| <ul class="nav navbar-nav navbar-right"> |
| <li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li> |
| <li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li> |
| <li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
| |
| |
| |
| <div class="entry-header"> |
| |
| <div class="entry-image"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-02-21-echarts-liquidfill-chart-tutorial.gif" alt="ECharts 水球图教程"> |
| </div><!-- /.entry-image --> |
| </div><!-- /.entry-header --> |
| |
| |
| <div id="post-main" role="main"> |
| <article class="hentry"> |
| <header class="header-title"> |
| <div class="header-title-wrap"> |
| <h1 class="entry-title">ECharts 水球图教程</h1> |
| <h2><span class="entry-date date published"><time datetime="2017-02-21T00:00:00+08:00">2017-02-21</time></span></h2> |
| |
| </div><!-- /.header-title-wrap --> |
| </header> |
| <div class="entry-content"> |
| <p>水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的<a href="https://github.com/ecomfe/echarts-liquidfill">水球图插件</a>使你能够通过非常简单的配置，实现酷炫的数据展示效果。</p> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe> |
| |
| <p>那么，今天我们就一起来学习一下，如何使用 ECharts 水球图。</p> |
| |
| <h2 id="第一步引入-javascript-文件">第一步：引入 JavaScript 文件</h2> |
| |
| <p>ECharts 的水球图是一个<em>插件</em>类型的图表。这意味着，在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时，需要在引入 <code class="highlighter-rouge">echarts.js</code> 之后，另外引入水球图对应的 <code class="highlighter-rouge">echarts-liquidfill.js</code>，可以在 <a href="https://github.com/ecomfe/echarts-liquidfill/tree/gh-pages/dist">GitHub</a> 找到最新版本。</p> |
| |
| <div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><script </span><span class="na">src=</span><span class="s">"echarts.js"</span><span class="nt">></script></span> |
| <span class="nt"><script </span><span class="na">src=</span><span class="s">"echarts-liquidfill.js"</span><span class="nt">></script></span> |
| |
| <span class="nt"><script></span> |
| <span class="c1">// 使用水球图的代码</span> |
| <span class="nt"></script></span> |
| </code></pre> |
| </div> |
| |
| <h2 id="第二步指定-dom-元素作为图表容器">第二步：指定 DOM 元素作为图表容器</h2> |
| |
| <p>和创建 ECharts 的其他图表一样，我们需要指定 DOM 中的一个有高度和宽度的元素作为图表的容器——也就是图表将会绘制的位置。</p> |
| |
| <div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">id=</span><span class="s">"liquidfill-chart"</span> <span class="na">style=</span><span class="s">"width=100%; height = 400px"</span><span class="nt">></div></span> |
| </code></pre> |
| </div> |
| |
| <p>传入该 DOM 元素，使用 ECharts 初始化图表：</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">chart</span> <span class="o">=</span> <span class="nx">echarts</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'liquidfill-chart'</span><span class="p">));</span> |
| </code></pre> |
| </div> |
| |
| <h2 id="第三步设置水球图参数">第三步：设置水球图参数</h2> |
| |
| <p>和其他 ECharts 图表一样，水球图提供将系列的 <code class="highlighter-rouge">type</code> 指定为 <code class="highlighter-rouge">'liquidFill'</code>（注意大小写）来表明这是一个水球图类型。</p> |
| |
| <p>一个简单的配置项可以是：</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">series</span><span class="p">:</span> <span class="p">[{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">]</span> |
| <span class="p">}]</span> |
| <span class="p">};</span> |
| <span class="nx">chart</span><span class="p">.</span><span class="nx">setOption</span><span class="p">(</span><span class="nx">option</span><span class="p">);</span> |
| </code></pre> |
| </div> |
| |
| <p>这样，就能得到文章开头的水球图效果了：</p> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe> |
| |
| <blockquote> |
| <p>如果发现图表没有正确显示，你可以检查以下几种可能：</p> |
| |
| <ul> |
| <li>JS 文件是否正确加载；</li> |
| <li><code class="highlighter-rouge">echarts</code> 变量是否存在；</li> |
| <li>控制台是否报错（如果报错显示 <code class="highlighter-rouge">liquidFill</code> 系列不存在，则很可能 <code class="highlighter-rouge">echarts-liquidfill.js</code> 没有正确加载）；</li> |
| <li>DOM 元素在 <code class="highlighter-rouge">echarts.init</code> 的时候是否有高度和宽度。</li> |
| </ul> |
| </blockquote> |
| |
| <p>可以发现，在上面的代码中，我们只指定了图表类型为 <code class="highlighter-rouge">'liquidFill'</code>，以及把数据设置为 <code class="highlighter-rouge">[0.6, 0.5, 0.4, 0.3]</code>（对应生成的四个波浪），而其他的参数都是预设的。</p> |
| |
| <p>即使不配置很多参数，预设的参数也可以使你获得一个优雅的水球图效果。而如果有特定的需求，ECharts 水球图又支持非常高度定制的效果。下面我们具体说明如何定制化你的水球图。</p> |
| |
| <h2 id="第四步定制化水球图">第四步：定制化水球图</h2> |
| |
| <p>水球图支持非常高度定制化的需求，包括颜色（<code class="highlighter-rouge">color</code>）、大小（<code class="highlighter-rouge">radius</code>）、波的振幅（<code class="highlighter-rouge">amplitude</code>）、波长（<code class="highlighter-rouge">waveLength</code>）、相位（<code class="highlighter-rouge">phase</code>）、周期（<code class="highlighter-rouge">period</code>）、移动方向（<code class="highlighter-rouge">direction</code>）、形状（<code class="highlighter-rouge">shape</code>）、动画（<code class="highlighter-rouge">waveAnimation</code>）等等，完整的配置项参数参见<a href="https://github.com/ecomfe/echarts-liquidfill#api">水球图 API</a>。文档有针对每个配置项的详细说明，这里我们来介绍一些重要的参数。</p> |
| |
| <h3 id="形状与动画">形状与动画</h3> |
| |
| <iframe style="width: 100%; height: 600px" src="http://gallery.echartsjs.com/view.html?cid=xry0tUfcBe"></iframe> |
| |
| <p>除了默认的圆形（<code class="highlighter-rouge">'circle'</code>）水球图，还可以将 <code class="highlighter-rouge">shape</code> 设置为 ECharts <em>Symbol</em> 的其他类型：<code class="highlighter-rouge">'rect'</code>、<code class="highlighter-rouge">'roundRect'</code>、<code class="highlighter-rouge">'triangle'</code>、<code class="highlighter-rouge">'diamond'</code>、<code class="highlighter-rouge">'pin'</code>、<code class="highlighter-rouge">'arrow'</code>。甚至，使用 <code class="highlighter-rouge">'path://...'</code> 的形式，为其<a href="http://gallery.echartsjs.com/editor.html?c=liquidfill-echarts">指定一个 SVG 路径</a>，得到非常酷炫的效果：</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-echarts"></iframe> |
| |
| <p>通过将 <code class="highlighter-rouge">direction</code> 设为 <code class="highlighter-rouge">'left'</code> 或 <code class="highlighter-rouge">'right'</code>，指定波浪的移动方向，或者设为 <code class="highlighter-rouge">'none'</code> 表示静止。</p> |
| |
| <p>上面的例子完整的配置项代码为：</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="c1">// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe</span> |
| <span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">series</span><span class="p">:</span> <span class="p">[{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span> |
| <span class="na">radius</span><span class="p">:</span> <span class="s1">'40%'</span><span class="p">,</span> |
| <span class="na">shape</span><span class="p">:</span> <span class="s1">'diamond'</span><span class="p">,</span> |
| <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'25%'</span><span class="p">,</span> <span class="s1">'25%'</span><span class="p">]</span> |
| <span class="p">},</span> <span class="p">{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span> |
| <span class="na">direction</span><span class="p">:</span> <span class="s1">'left'</span><span class="p">,</span> |
| <span class="na">radius</span><span class="p">:</span> <span class="s1">'40%'</span><span class="p">,</span> |
| <span class="na">shape</span><span class="p">:</span> <span class="s1">'rect'</span><span class="p">,</span> |
| <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'75%'</span><span class="p">,</span> <span class="s1">'25%'</span><span class="p">]</span> |
| <span class="p">},</span> <span class="p">{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span> |
| <span class="na">radius</span><span class="p">:</span> <span class="s1">'40%'</span><span class="p">,</span> |
| <span class="na">shape</span><span class="p">:</span> <span class="s1">'roundRect'</span><span class="p">,</span> |
| <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'25%'</span><span class="p">,</span> <span class="s1">'75%'</span><span class="p">],</span> |
| <span class="na">backgroundStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">borderColor</span><span class="p">:</span> <span class="s1">'#156ACF'</span><span class="p">,</span> |
| <span class="na">borderWidth</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> |
| <span class="na">shadowColor</span><span class="p">:</span> <span class="s1">'rgba(0, 0, 0, 0.4)'</span><span class="p">,</span> |
| <span class="na">shadowBlur</span><span class="p">:</span> <span class="mi">20</span> |
| <span class="p">},</span> |
| <span class="na">outline</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">show</span><span class="p">:</span> <span class="kc">false</span> |
| <span class="p">},</span> |
| <span class="na">waveAnimation</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 禁止左右波动</span> |
| <span class="p">},</span> <span class="p">{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span> |
| <span class="na">radius</span><span class="p">:</span> <span class="s1">'50%'</span><span class="p">,</span> |
| <span class="na">shape</span><span class="p">:</span> <span class="s1">'pin'</span><span class="p">,</span> |
| <span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="s1">'75%'</span><span class="p">,</span> <span class="s1">'75%'</span><span class="p">],</span> |
| <span class="na">amplitude</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> |
| <span class="na">waveAnimation</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> |
| <span class="na">outline</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">show</span><span class="p">:</span> <span class="kc">false</span> |
| <span class="p">},</span> |
| <span class="na">backgroundStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">shadowColor</span><span class="p">:</span> <span class="s1">'rgba(0, 0, 0, 0.4)'</span><span class="p">,</span> |
| <span class="na">shadowBlur</span><span class="p">:</span> <span class="mi">20</span> |
| <span class="p">}</span> |
| <span class="p">}]</span> |
| <span class="p">};</span> |
| </code></pre> |
| </div> |
| |
| <h3 id="单个波的配置">单个波的配置</h3> |
| |
| <p>除了对所有水波做的设置之外，每个水波可以进行单独的配置。和 ECharts 的其他配置项一样，对单个数据的配置项将覆盖整个系列的配置项。</p> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=xry6CHNCVl"></iframe> |
| |
| <p>在这个例子中，我们将第二条水波设为红色，并且改变其移动方向。</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">series</span><span class="p">:</span> <span class="p">[{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.6</span><span class="p">,</span> <span class="p">{</span> |
| <span class="na">value</span><span class="p">:</span> <span class="mf">0.5</span><span class="p">,</span> |
| <span class="na">direction</span><span class="p">:</span> <span class="s1">'left'</span><span class="p">,</span> |
| <span class="na">itemStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">normal</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">color</span><span class="p">:</span> <span class="s1">'red'</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">},</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">]</span> |
| <span class="p">}]</span> |
| <span class="p">};</span> |
| </code></pre> |
| </div> |
| |
| <p>可以发现，原先 <code class="highlighter-rouge">data</code> 中的一项是一个数字，而在需要做特殊定制的数据中，我们将其设置为一个对象，<code class="highlighter-rouge">value</code> 值是原先的数字，其他配置项将覆盖系列配置项的值。</p> |
| |
| <h3 id="文字显示">文字显示</h3> |
| |
| <p>水球图中间的文字有个酷炫的效果，在水波和背景前的文字颜色是不同的，可以通过 <code class="highlighter-rouge">insideColor</code> 设置水波处的文字颜色，<code class="highlighter-rouge">color</code> 设置背景处的文字颜色。</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">series</span><span class="p">:</span> <span class="p">[{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">radius</span><span class="p">:</span> <span class="s1">'80%'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.45</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span> |
| <span class="na">label</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">normal</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">textStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">color</span><span class="p">:</span> <span class="s1">'red'</span><span class="p">,</span> |
| <span class="na">insideColor</span><span class="p">:</span> <span class="s1">'yellow'</span><span class="p">,</span> |
| <span class="na">fontSize</span><span class="p">:</span> <span class="mi">50</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">}]</span> |
| <span class="p">};</span> |
| </code></pre> |
| </div> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=xHyUvV_tFe"></iframe> |
| |
| <p>图表中间默认显示百分比数据，如果你需要将其设置为其他文字内容，可以通过 <code class="highlighter-rouge">formatter</code> 指定，这与 ECharts 的其他格式化函数也是相同的。</p> |
| |
| <p><code class="highlighter-rouge">formatter</code> 可以是一个字符串，其中 <code class="highlighter-rouge">'{a}'</code>、<code class="highlighter-rouge">'{b}'</code>、<code class="highlighter-rouge">'{c}'</code> 会被分别替换成系列名称、数据名称、数据值。</p> |
| |
| <p>如：</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">series</span><span class="p">:</span> <span class="p">[{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'liquidFill'</span><span class="p">,</span> |
| <span class="na">name</span><span class="p">:</span> <span class="s1">'Liquid Fill'</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[{</span> |
| <span class="na">name</span><span class="p">:</span> <span class="s1">'First Data'</span><span class="p">,</span> |
| <span class="na">value</span><span class="p">:</span> <span class="mf">0.6</span> |
| <span class="p">},</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.3</span><span class="p">],</span> |
| <span class="na">label</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">normal</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">formatter</span><span class="p">:</span> <span class="s1">'{a}\n{b}\nValue: {c}'</span><span class="p">,</span> |
| <span class="na">textStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">fontSize</span><span class="p">:</span> <span class="mi">28</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">}]</span> |
| <span class="p">};</span> |
| </code></pre> |
| </div> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=xHk5831cHg"></iframe> |
| |
| <p>此外，<code class="highlighter-rouge">formatter</code> 也可以是一个函数，以下代码能得到和上面字符串形式同样的效果。</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">formatter</span><span class="err">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">param</span><span class="p">)</span> <span class="p">{</span> |
| <span class="k">return</span> <span class="nx">param</span><span class="p">.</span><span class="nx">seriesName</span> <span class="o">+</span> <span class="s1">'\n'</span> |
| <span class="o">+</span> <span class="nx">param</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'\n'</span> |
| <span class="o">+</span> <span class="s1">'Value:'</span> <span class="o">+</span> <span class="nx">param</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> |
| <span class="p">}</span> |
| </code></pre> |
| </div> |
| |
| <h2 id="小结">小结</h2> |
| |
| <p>以上，我们介绍了 ECharts 水球图的一些基本用法，希望能够给大家启发，创作出更多波涛汹涌的作品。</p> |
| |
| <p>更完整的配置项请参考 GitHub 上<a href="https://github.com/ecomfe/echarts-liquidfill">详细的文档</a>，或者到 ECharts Gallery 上查看其它<a href="http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidFill~author=all">水球图作品</a>。</p> |
| |
| |
| <div class="entry-meta"> |
| <span class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| |
| </span> |
| </div> |
| |
| |
| </div><!-- /.entry-content --> |
| |
| <div class="container"> |
| <div class="read-more"> |
| <h3>更多相关信息</h3> |
| <div class="row"> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" title="在 ECharts GL 中绘制三维地图">在 ECharts GL 中绘制三维地图</a></h4> |
| <p>ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL 更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢？答案是肯定的，用户除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" title="ECharts v3.6 发布：自定义系列、极坐标柱状图">ECharts v3.6 发布：自定义系列、极坐标柱状图</a></h4> |
| <p>在 ECharts 新发布的 3.6 版本中，新增了自定义系列，能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html" title="ECharts 统计扩展教程">ECharts 统计扩展教程</a></h4> |
| <p>你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？——什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器——ECharts 统计扩展，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">--> |
| <span class="term">教程</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| </div> |
| </div> |
| </div> |
| |
| </article> |
| </div><!-- /#main --> |
| |
| <footer> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div> |
| <div id="efe-product" class="col-md-2 col-sm-4 pc"> |
| <h3>百度EFE更多产品</h3> |
| <ul id="efe-product"> |
| <li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li> |
| <li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li> |
| <li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li> |
| <li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li> |
| <li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li> |
| <li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3 col-md-offset-1 col-sm-4 pc"> |
| <h3>友情链接</h3> |
| <ul> |
| <li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li> |
| <li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li> |
| <li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3" id="footer-icon-panel"> |
| <div class="icon-panel"> |
| <a href="mailto:echarts@baidu.com" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-email.png"/> |
| </a> |
| <a href="https://twitter.com/EChartsJs" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-twitter.png"/> |
| </a> |
| <a href="http://weibo.com/u/5160877841" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-weibo.png"/> |
| </a> |
| <a href="https://github.com/ecomfe/echarts" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-github.png"/> |
| </a> |
| </div> |
| <div id="echarts-copyright">Ⓒ 2017 百度ECharts团队出品</div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script> |
| <script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script> |
| <script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script> |
| |
| |
| |
| |
| <script> |
| var _hmt = _hmt || []; |
| (function() { |
| var hm = document.createElement("script"); |
| hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f"; |
| var s = document.getElementsByTagName("script")[0]; |
| s.parentNode.insertBefore(hm, s); |
| })(); |
| </script> |
| |
| |
| |
| </body> |
| </html> |
