| <!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 Liquid-fill Chart Tutorial </title> |
| <meta name="description" content="Liquid-fill is a type of charts that are suitable for displaying single percentage data. ECharts liquid-fill Chart provides fancy presentation of percentage data through single but power configurations. This post introduces how to use it."> |
| <meta name="keywords" content="extension, tutorial"> |
| |
| |
| |
| <!-- Open Graph --> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:type" content="article"> |
| <meta property="og:title" content="ECharts Liquid-fill Chart Tutorial"> |
| <meta property="og:description" content="Liquid-fill is a type of charts that are suitable for displaying single percentage data. ECharts liquid-fill Chart provides fancy presentation of percentage data through single but power configurations. This post introduces how to use it."> |
| <meta property="og:url" content="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html"> |
| <meta property="og:site_name" content=""> |
| |
| |
| |
| |
| |
| <link rel="canonical" href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.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 Liquid-fill Chart Tutorial"> |
| </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 Liquid-fill Chart Tutorial</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>Liquid-fill is a type of charts that are suitable for displaying single percentage data. <a href="https://github.com/ecomfe/echarts-liquidfill">ECharts liquid-fill Chart</a> provides fancy presentation of percentage data through single but power configurations.</p> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe> |
| |
| <p>Now, let’s learn how to use it.</p> |
| |
| <h2 id="step-1-including-javascript-files">Step 1: Including JavaScript Files</h2> |
| |
| <p>ECharts liquid-fill chart is a <em>plugin</em> for ECharts, which means it is not included in the full version downloaded from official site. This ensures those who don’t need liquid-fill charts can have a smaller package size. When use it, you need to include <code class="highlighter-rouge">echarts-liquidfill.js</code> after <code class="highlighter-rouge">echarts.js</code>, the former of which can be downloaded at <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">// your code here</span> |
| <span class="nt"></script></span> |
| </code></pre> |
| </div> |
| |
| <h2 id="step-2-assign-dom-element-as-chart-container">Step 2: Assign DOM Element As Chart Container</h2> |
| |
| <p>We need to assign a DOM element with width and height as chart container, just as we do with other chart types when using ECharts.</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>Use the DOM element to init chart.</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="step-3-configure-the-chart">Step 3: Configure The Chart</h2> |
| |
| <p>We set the chart series <code class="highlighter-rouge">type</code> to be <code class="highlighter-rouge">'liquidFill'</code> to use it.</p> |
| |
| <p>A simple configuration item may be:</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>Thus, we can get the liquid-fill chart at the beginning of this post.</p> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe> |
| |
| <blockquote> |
| <p>If the chart doesn’t display as expected, you may check the following things:</p> |
| |
| <ul> |
| <li>Whether JS files are loaded correctly;</li> |
| <li>Whether <code class="highlighter-rouge">echarts</code> variable exists;</li> |
| <li>Whether there are error messages in Console;</li> |
| <li>Whether the DOM element has width and height when init.</li> |
| </ul> |
| </blockquote> |
| |
| <p>As you can see, we only assigned series type to be <code class="highlighter-rouge">'liquidFill'</code>, and set the data to be <code class="highlighter-rouge">[0.6, 0.5, 0.4, 0.3]</code>, which generate the four waves in the chart. Other parameters are all by default.</p> |
| |
| <p>Even without much configuration, you may get an elegant liquid-fill chart with default parameters. And if you have specific demands, you may easily acheive them with our configuration. Here is how to customerize it.</p> |
| |
| <h2 id="step-4-customerize-the-chart">Step 4: Customerize The Chart</h2> |
| |
| <p>ECharts liquid-fill chart supports highly customizable configuration, including color, radius, amplitude, wave length, phase, period, wave direction, shape, wave animation and so on. Full configuration please refer to <a href="https://github.com/ecomfe/echarts-liquidfill#api">API</a>. Here, we are going to introduces some important parameters.</p> |
| |
| <h3 id="shape-and-animation">Shape And Animation</h3> |
| |
| <iframe style="width: 100%; height: 600px" src="http://gallery.echartsjs.com/view.html?cid=xry0tUfcBe"></iframe> |
| |
| <p>Besides the default <code class="highlighter-rouge">'circle'</code> shape, it also supports symbols like <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>, and <code class="highlighter-rouge">'arrow'</code>. Even more, you can set it to be an <a href="http://gallery.echartsjs.com/editor.html?c=liquidfill-echarts">SVG path</a> to get some fancy effect.</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-echarts"></iframe> |
| |
| <p>By setting <code class="highlighter-rouge">direction</code> to be <code class="highlighter-rouge">'left'</code> or <code class="highlighter-rouge">'right'</code>, we may assign the moving direction of the wave. Or, we can set it to be <code class="highlighter-rouge">'none'</code> for still.</p> |
| |
| <p>Full configuration of the above is:</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">// disable moving</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="configuration-for-a-single-wave">Configuration For A Single Wave</h3> |
| |
| <p>Besides the configuration of the waves as introduced above, each single wave can have configuration to be overwritten.</p> |
| |
| <iframe style="width: 100%; height: 350px" src="http://gallery.echartsjs.com/view.html?cid=xry6CHNCVl"></iframe> |
| |
| <p>In this example, we set the second wave to be red, and changed its moving direction.</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>You may notice that an item of the previous <code class="highlighter-rouge">data</code> is a number, but for those to be configured, they are an object containing <code class="highlighter-rouge">value</code>.</p> |
| |
| <h2 id="label">Label</h2> |
| |
| <p>Label of liquid-fill charts have a nice effect that the text colors before wave and background are different. <code class="highlighter-rouge">insideColor</code> can be used to set the text color before wave, and <code class="highlighter-rouge">color</code> can be used to set the color before background.</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>Label displays percentage data by default. If you want to set it otherwise, you may use <code class="highlighter-rouge">formatter</code> to do this. This is similar to other formatter of ECharts.</p> |
| |
| <p><code class="highlighter-rouge">formatter</code> can be a string, in which <code class="highlighter-rouge">'{a}'</code>, <code class="highlighter-rouge">'{b}'</code>, <code class="highlighter-rouge">'{c}'</code> will be replaced to be series name, data name, and data value.</p> |
| |
| <p>For example:</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>Besides, <code class="highlighter-rouge">formatter</code> can also be a function. The following code provides the same effect as before.</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="conclusion">Conclusion</h2> |
| |
| <p>In this post, we introduced how to use ECharts liquid-fill charts. Hopefully, you can be inspired by it and create more interesting works.</p> |
| |
| <p>Full document please refer to <a href="https://github.com/ecomfe/echarts-liquidfill">GitHub</a>. And you may go to <a href="http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidFill~author=all">ECharts Gallery</a> to view more liquid-fill charts.</p> |
| |
| |
| <div class="entry-meta"> |
| <span class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#extension" title="Pages tagged extension" class="tag">--> |
| <span class="term">extension</span> |
| <!--</a>--> |
| |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#tutorial" title="Pages tagged tutorial" class="tag">--> |
| <span class="term">tutorial</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/03/23/new-release-en.html" title="ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released">ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released</a></h4> |
| <p>We are releasing ECharts v3.5, where calendar coodinate system is supported and axis pointer is enhanced. Meanwhile ECharts statistic extension v1.0 is published.</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#extension" title="Pages tagged extension" class="tag">--> |
| <span class="term">extension</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#tutorial" title="Pages tagged tutorial" class="tag">--> |
| <span class="term">tutorial</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> |
