| <!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></title> |
| <meta name="description" content=""> |
| |
| |
| |
| |
| <!-- Open Graph --> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:type" content="article"> |
| <meta property="og:title" content=""> |
| <meta property="og:description" content=""> |
| <meta property="og:url" content="http://echarts.baidu.com/blog/en/"> |
| <meta property="og:site_name" content=""> |
| |
| |
| |
| |
| |
| <link rel="canonical" href="http://echarts.baidu.com/blog/en/"> |
| <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-index" 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="page-info"> |
| <h1>博客</h1> |
| <p>这是ECharts持续发布文章及活动信息的平台，包含ECharts新版本介绍、教程、活动介绍等文章</p> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <article class="hentry"> |
| <header> |
| |
| <div class="entry-image-index"> |
| <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"><img src="http://echarts.baidu.com/blog/images/post/2017-01-13-new-release-theme-river.png" alt="ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released"></a> |
| </div><!-- /.entry-image --> |
| |
| <div class="entry-meta"> |
| <span class="entry-date date published updated"><time datetime="2017-03-23T00:00:00+08:00"><a href="http://echarts.baidu.com/blog/2017/03/23/new-release-en.html">2017-03-23</a></time></span><span class="author vcard"><span class="fn"><a href="http://echarts.baidu.com/blog/about/" title="About ECharts">ECharts</a></span></span> |
| |
| </div><!-- /.entry-meta --> |
| |
| <h1 class="entry-title"><a href="http://echarts.baidu.com/blog/2017/03/23/new-release-en.html" rel="bookmark" title="ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released" itemprop="url">ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released</a></h1> |
| |
| </header> |
| <div class="entry-content"> |
| <p>We are releasing <a href="https://github.com/ecomfe/echarts/releases/tag/3.5.0">ECharts v3.5</a>, where calendar coodinate system is supported and axis pointer is enhanced. Meanwhile <a href="https://github.com/ecomfe/echarts-stat">ECharts statistic extension</a> v1.0 is published.</p> |
| |
| <p>Calendar coordiante system is a new type of echarts coordiante system, which can used to locate different charts (For example, scatter, heatmap, graph, pie, or even other coordinate systems like cartesian).</p> |
| |
| <p>The original axis pointer is enhance significantly, which currently supports text label, a new interaction approach for touch device, and other detailed configurations. Besides, that synchronization between axis pointers of different coordinate systems is supported.</p> |
| |
| <p>Statistic extension is a JavaScript liberary for statistics and data mining, including two-dimensional regression, multi-dimensional clustering and some commonly used statistical functions in v1.0.</p> |
| |
| <h2 id="statistical-extension">Statistical Extension</h2> |
| |
| <p>Statistical extension is a statistical and data mining tool for <a href="https://github.com/ecomfe/echarts">echarts</a>. At present, it mainly includes two-dimensional regression, multi-dimensional clustering and some commonly used statistical functions.</p> |
| |
| <p>The regression algorithm in the extension not only contains the commonly used linear regression, but also contains exponential regression, logarithmic regression, and polynomial regression.</p> |
| |
| <p>An example of linear regression:</p> |
| <div class="ec-lazy" data-thumb="http://echarts.baidu.com/blog/images/post/2017-03-23/xS1bQ2AMKe.png" data-src="http://gallery.echartsjs.com/view.html?cid=xS1bQ2AMKe" style="width: 100%; height: 400px"></div> |
| |
| <p>An example of logarithmic regression:</p> |
| <div class="ec-lazy" data-thumb="http://echarts.baidu.com/blog/images/post/2017-03-23/xry3aWkmYe.png" data-src="http://gallery.echartsjs.com/view.html?cid=xry3aWkmYe" style="width: 100%; height: 400px"></div> |
| |
| <p>Adhering to the purpose of visual analysis, our multi-dimensional clustering analysis, can not only statically produce the results of clustering of dataset, but also dynamically view the entire clustering analysis process.</p> |
| |
| <p>An example of the result of dataset clustering:</p> |
| <div class="ec-lazy" data-thumb="http://echarts.baidu.com/blog/images/post/2017-03-23/xSkBOEaGtx.png" data-src="http://gallery.echartsjs.com/view.html?cid=xSkBOEaGtx" style="width: 100%; height: 400px"></div> |
| |
| <p>An example demonstrating the entire process of clustering:</p> |
| <div class="ec-lazy" data-thumb="http://echarts.baidu.com/blog/images/post/2017-03-23/xHyr-esMtg.png" data-src="http://gallery.echartsjs.com/view.html?cid=xHyr-esMtg" style="width: 100%; height: 400px"></div> |
| |
| <p>Unlike built-in charts in echarts, Statistical Extension is a extension of echarts, which is not intergrated by echarts by default, and you need to inclued <code class="highlighter-rouge">ecStat.js</code> after <code class="highlighter-rouge">echarts.js</code>. You can find the file <code class="highlighter-rouge">dist/ecStat.js</code> in the latest released version at <a href="https://github.com/ecomfe/echarts-stat/releases/latest">here (GitHub)</a>.</p> |
| |
| <p>If you would like to know more, please visit the <a href="https://github.com/ecomfe/echarts-stat">Statistical Extension GitHub Home</a></p> |
| |
| <h2 id="calendar-coordinate-system">Calendar Coordinate System</h2> |
| |
| <p>Calendar coordiante system is a new type of echarts coordiante system, which can used to locate different charts (For example, scatter, heatmap, graph, pie, or even other coordinate systems like cartesian).</p> |
| |
| <p>Using heatmap in calendar:</p> |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-heatmap&edit=1&reset=1" style="width: 100%; height: 300px"></div> |
| |
| <p>Using scatter in calendar:</p> |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-effectscatter&edit=1&reset=1" style="width: 100%; height: 600px"></div> |
| |
| <p>Different types of chart can be place on calendar coordinate system together.</p> |
| |
| <p>Both place heatmap and graph chart in calendar:</p> |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-graph&edit=1&reset=1" style="width: 100%; height: 600px"></div> |
| |
| <p><strong>Calendar layout:</strong></p> |
| |
| <p>Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.orient">calendar.orient</a> can help in this case.</p> |
| |
| <p><strong>Adapt to container size:</strong></p> |
| |
| <p>Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.left">left</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.right">right</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.top">top</a>, <a href="bottom">bottom</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.width">width</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.height">height</a>, which make calendar possible to modify its size according to container size. Besides, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.cellSize">cellSize</a> can be specified to fix the size of each cell of calendar.</p> |
| |
| <p><strong>More effects:</strong></p> |
| |
| <p>Feel free to combination charts and calendar coordinate systems. You may achieve awesome effects.</p> |
| |
| <p>For example, using API <code class="highlighter-rouge">chart.convertToPixel</code> to locate pie charts on calendar.</p> |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-pie&edit=1&reset=1" style="width: 100%; height: 640px"></div> |
| |
| <h2 id="axis-pointer">Axis Pointer</h2> |
| |
| <p>The term “Axis Pointer” refers the appearing line, shadow block and text label when mouse hovering or clicking on a coordinate system, which helps users to have insight into the data.</p> |
| |
| <p>The original axis pointer is enhance significantly, which currently supports text label, a new approach of interaction on touch device, and other detailed configurations. Besides, that synchronization between axis pointers of different coordinate systems is supported.</p> |
| |
| <p>An example, where axis pointers can be displayed in candlestick.</p> |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" style="width: 100%; height: 450px"></div> |
| |
| <p>In the example above, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer.link">axisPointer.link</a> is used to synchronize axes from the two different cartesian coordiante system.</p> |
| |
| <p>Besides, a approach of interaction on touch devices is supported, where axis pointer is alwayed displayed, and a handle button can be dragged to move the axis pointer, which makes the finger not block the view to charts any more.</p> |
| |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=line-tooltip-touch&edit=1&reset=1" style="width: 100%; height: 400px"></div> |
| |
| <p>This is another example:</p> |
| <div class="ec-lazy" data-thumb="http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png" data-src="http://echarts.baidu.com/gallery/view.html?c=candlestick-touch&edit=1&reset=1" style="width: 100%; height: 400px"></div> |
| |
| <p>These examples demonstrating the effect of mutiple axes with axis pointers:</p> |
| |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=multiple-y-axis&edit=1&reset=1" style="width: 100%; height: 300px"></div> |
| |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=multiple-x-axis&edit=1&reset=1" style="width: 100%; height: 300px"></div> |
| |
| <p>At last, let’s see a more complicated example, where <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer.link">axisPointer.link</a> is also be used to synchronize axis pointers of different axes.</p> |
| |
| <div class="ec-lazy" data-thumb="https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png" data-src="https://ecomfe.github.io/echarts-examples/public/view.html?c=scatter-nutrients-matrix&edit=1&reset=1" style="width: 100%; height: 640px"></div> |
| |
| |
| </div><!-- /.entry-content --> |
| </article><!-- /.hentry --> |
| |
| |
| |
| |
| |
| |
| |
| <article class="hentry"> |
| <header> |
| |
| <div class="entry-image-index"> |
| <a href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html" title="ECharts Liquid-fill Chart Tutorial"><img src="http://echarts.baidu.com/blog/images/post/2017-02-21-echarts-liquidfill-chart-tutorial.gif" alt="ECharts Liquid-fill Chart Tutorial"></a> |
| </div><!-- /.entry-image --> |
| |
| <div class="entry-meta"> |
| <span class="entry-date date published updated"><time datetime="2017-02-21T00:00:00+08:00"><a href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html">2017-02-21</a></time></span><span class="author vcard"><span class="fn"><a href="http://echarts.baidu.com/blog/about/" title="About ECharts">ECharts</a></span></span> |
| |
| </div><!-- /.entry-meta --> |
| |
| <h1 class="entry-title"><a href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html" rel="bookmark" title="ECharts Liquid-fill Chart Tutorial" itemprop="url">ECharts Liquid-fill Chart Tutorial</a></h1> |
| |
| </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><!-- /.entry-content --> |
| </article><!-- /.hentry --> |
| |
| |
| |
| |
| |
| <article class="hentry"> |
| <header> |
| |
| <div class="entry-image-index"> |
| <a href="http://echarts.baidu.com/blog/2017/01/13/new-release-en.html" title="ECharts Released v3.4, supporting three new chart types"><img src="http://echarts.baidu.com/blog/images/post/2017-01-13-new-release-theme-river.png" alt="ECharts Released v3.4, supporting three new chart types"></a> |
| </div><!-- /.entry-image --> |
| |
| <div class="entry-meta"> |
| <span class="entry-date date published updated"><time datetime="2017-01-13T00:00:00+08:00"><a href="http://echarts.baidu.com/blog/2017/01/13/new-release-en.html">2017-01-13</a></time></span><span class="author vcard"><span class="fn"><a href="http://echarts.baidu.com/blog/about/" title="About ECharts">ECharts</a></span></span> |
| |
| </div><!-- /.entry-meta --> |
| |
| <h1 class="entry-title"><a href="http://echarts.baidu.com/blog/2017/01/13/new-release-en.html" rel="bookmark" title="ECharts Released v3.4, supporting three new chart types" itemprop="url">ECharts Released v3.4, supporting three new chart types</a></h1> |
| |
| </header> |
| <div class="entry-content"> |
| <p>We are releasing ECharts v3.4, supporting three new types of charts, namely, pictorial-bar charts, theme-river charts, and liquid-fill charts. Pictorial-bar charts use images and shapes to represent data; theme-river charts are used to show the evolution of events or themes during a period; and liquid-fill charts are usually used to represent data in percentage.</p> |
| |
| <h2 id="pictorial-bar-charts">Pictorial-bar Charts</h2> |
| |
| <p>Pictorial-bar chart is a type of bar chart that customized glyph (like images, <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG PathData</a>) can be used instead of rectangular bar. This kind of chart is usually used in infographic.</p> |
| |
| <p>Pictorial bar chart can only be used in <a href="~grid">rectangular coordinate</a> with at least 1 category axis.</p> |
| |
| <p>It can use the width or height of the graphic elements, or its number, color, opacity, and <em>etc.</em> to represent data.</p> |
| |
| <p>In the example below, the mountains at the right side are two images, while the pile of paper are composed with multiple images. Pictorial bar chart will compute their height with their values, and make a nice visual effect with animation like this example do.</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=pictorialBar-hill"></iframe> |
| |
| <p>In <a href="http://jing.baidu.com/h5/echarts-christmas-2016.html">ECharts Christmas Event Pages</a>, we used pictorial-bar chart to make a chart comparing the speed of Santa’s reindeer and other transportation methods. The following chart contains two series, the first of which contains vector images of transportation methods, and the other the mountains below. Pictorial-bar charts compute the position of each graphic element based on its <code class="highlighter-rouge">value</code> and put it below that position. <code class="highlighter-rouge">symbolSize</code> can be used to specify image size, and will automatically fill the <em>bar</em> when it is not given.</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=pictorialBar-velocity"></iframe> |
| |
| <p>Besides, pictorial-bar charts can use the amount of the same graph element to represent data. The spirits chart of ECharts Christmas Event Pages is made with this type of pictorial-bar chart. In this way, pictorial-bar chart can be largely used in infographic.</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=pictorialBar-spirit"></iframe> |
| |
| <p>From ECharts v3.4, pictorial-bar chart is included in <em>full version</em> in <a href="http://echarts.baidu.com/download.html">ECharts download page</a>, so that you can use it by assigning series name to be <code class="highlighter-rouge">pictorialBar</code> without using an extra file.</p> |
| |
| <p>You may refer to <a href="http://echarts.baidu.com/examples.html#chart-type-pictorialBar">official examples</a> for more information.</p> |
| |
| <h2 id="theme-river-charts">Theme-river Charts</h2> |
| |
| <p>Theme-river chart is a special flow graph which is mainly used to present the changes of an event or theme during a period.</p> |
| |
| <p>The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.</p> |
| |
| <p>What’s more, the time attribute of the orinigal dataset would map to a single time axis.</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=themeRiver-basic"></iframe> |
| |
| <p>Each series can be changing of market share of a product overtime, or the changing of population of a country, and <em>etc</em>.</p> |
| |
| <p>You may refer to <a href="http://echarts.baidu.com/examples.html#chart-type-themeRiver">official examples</a> for more information.</p> |
| |
| <h2 id="liquid-fill-charts">Liquid-fill Charts</h2> |
| |
| <p>Liquid-fill charts are very easy to use. To make the following chart, you only need to set series type to be <code class="highlighter-rouge">liquidFill</code> and assign values.</p> |
| |
| <iframe style="width: 100%; height: 300px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-basic"></iframe> |
| |
| <p>Corresponding code is:</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><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> |
| </code></pre> |
| </div> |
| |
| <p>Liquid-fill charts have a great ability to be customized. You can assign each wave’s attributes like wave length, period, phase, color, shadow, opacity, and <em>etc</em>. The shape of the <em>ball</em> can be circle, rectangular, triangle, or even a random shape with <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG PathData</a>, giving it a great ability to make amazing charts.</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=liquidfill-echarts"></iframe> |
| |
| <p>The snowing chart in ECharts Christmas Event Pages is made with liquid-fill chart.</p> |
| |
| <iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=christmas-gift-show"></iframe> |
| |
| <p>Unlike pictorial-bar chart or theme-river chart, liquid-fill chart is released as an ECharts plugin. This means, it is not included in the full version in ECharts download page, and you need to include <code class="highlighter-rouge">echarts-liquidfill.js</code> after <code class="highlighter-rouge">echarts.js</code>. You may find the latest liquid-fill chart at <a href="https://github.com/ecomfe/echarts-liquidfill/tree/gh-pages/dist">GitHub</a>.</p> |
| |
| <p>You may find more information at <a href="https://github.com/ecomfe/echarts-liquidfill">Liquid-fill GitHub repo</a>, or visit <a href="http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidfill~author=all">Gallery</a> for more application.</p> |
| |
| <h2 id="other-updates">Other Updates</h2> |
| |
| <ul> |
| <li> |
| <p>[+] A specified <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#geo">geo coordinate system</a> has been able to be used in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map series</a>. (In the past map series could only creat an inner exclusive geo coodinate system). Thus, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map series</a> can be used to control color of a geo component. Moreover, a geo coordinate system can be shared among <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map">map series</a> and other series, like <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-scatter">scatter series</a>. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-map.geoIndex">series-map.geoIndex</a>.</p> |
| </li> |
| <li> |
| <p>[+] Added <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.graph.focusNodeAdjacency">focusNodeAdjacency action</a>, which enables trigger adjacent highlight of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-geo">graph</a> through API.</p> |
| </li> |
| <li> |
| <p>[+] Added <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie.animationType">series-pie.animationType</a>, which enables more animation effects.</p> |
| </li> |
| <li> |
| <p>[+] Callback function have been supported in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#animationDuration">animationDuration</a>, which enables different animation duration of data items.</p> |
| </li> |
| <li> |
| <p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.min">min</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.max">max</a> have been supported in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type">category axis</a>.</p> |
| </li> |
| <li> |
| <p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#xAxis.type">category axis</a> has been changed to show all categories by default, in spite of whether there is data in categories. In the past, categories in the end that has no data will not be displayed.</p> |
| </li> |
| <li> |
| <p>[+] When using <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#singleAxis">singleAxis</a>, <code class="highlighter-rouge">series.data</code> has supported one-dimension array, like <code class="highlighter-rouge">[11, 23, 44]</code>.</p> |
| </li> |
| <li> |
| <p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom">dataZoom</a> has supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#singleAxis">singleAxis</a>.</p> |
| </li> |
| <li> |
| <p>[+] Exposed throttle util method: <code class="highlighter-rouge">chart.util.throttle</code>.</p> |
| </li> |
| <li> |
| <p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick">candlestick</a> has supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick.barWidth">barWidth</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick.barMinWidth">barMinWidth</a> and <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-candlestick.barMaxWidth">barMaxWidth</a>. See <a href="https://github.com/ecomfe/echarts/issues/4783">#4783</a>.</p> |
| </li> |
| <li> |
| <p>[+] <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-lines">lines chart</a> has supported <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-lines.symbol">symbol</a>, <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-lines.symbolSize">symbolSize</a>.</p> |
| </li> |
| <li> |
| <p>[+] Added support for show end text and data label at the same time in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap-piecewise">visualMap-piecewise</a>. See <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap-piecewise.showLabel">visualMap-piecewise.showLabel</a>, and See <a href="https://github.com/ecomfe/echarts/issues/4845">#4845</a>.</p> |
| </li> |
| <li> |
| <p>[+] When using <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a> to control a series, it has supported that some data items escape from the control by visualMap, but use its series visual settings (color, symbol, …). See the paragraph of <code class="highlighter-rouge">Configure mapping</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap">visualMap</a>.</p> |
| </li> |
| <li> |
| <p>[^] Enhanced the effect of <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#grid">grid (cartesian)</a> when on data displayed.</p> |
| </li> |
| <li> |
| <p>[^] Added parameter <code class="highlighter-rouge">dataIndex</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#action.tooltip.showTip">showTip event</a>.</p> |
| </li> |
| <li> |
| <p>[^] Fixed vulnerability about XSS in tooltip. See <a href="https://github.com/ecomfe/echarts/issues/4769">#4769</a>.</p> |
| </li> |
| <li> |
| <p>[^] Fixed that some attributes did not work in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.edgeLabel">series-graph.edgeLabel</a>. See <a href="https://github.com/ecomfe/echarts/issues/4555">#4555</a>.</p> |
| </li> |
| <li> |
| <p>[^] Fixed tick render problem when <code class="highlighter-rouge">min</code> <code class="highlighter-rouge">max</code> is <code class="highlighter-rouge">stirng</code> in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-gauge">series-gauge</a>. See <a href="https://github.com/ecomfe/echarts/issues/4617">#4617</a>.</p> |
| </li> |
| <li> |
| <p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-gauge.pointer.show">series-gauge.pointer.show</a> problem. See <a href="https://github.com/ecomfe/echarts/issues/4618">#4618</a>.</p> |
| </li> |
| <li> |
| <p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-radar">series-radar</a> render error in a case that no data exists.</p> |
| </li> |
| <li> |
| <p>[^] Fixed <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markArea.label.normal.show">markArea.label.normal.show</a> problem. See <a href="https://github.com/ecomfe/echarts/issues/4723">#4723</a>.</p> |
| </li> |
| <li> |
| <p>[^] Enhanced the process when data is equals or less then zero in <a href="https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis.type">log axis</a>. See <a href="https://github.com/ecomfe/echarts/issues/4743">#4743</a> and <a href="https://github.com/ecomfe/echarts/issues/3161">#3161</a>.</p> |
| </li> |
| </ul> |
| |
| <p><strong>Please visit <a href="http://gallery.echartsjs.com/explore.html">ECharts Gallery</a> to create charts with ECharts, for sharing when asking others for help, or make your own portfolio. Let’s make better visualization products in 2017!</strong></p> |
| |
| </div><!-- /.entry-content --> |
| </article><!-- /.hentry --> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <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> |
