<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><generator uri="http://jekyllrb.com" version="3.4.0">Jekyll</generator><link href="http://echarts.baidu.com/blog/feed.xml" rel="self" type="application/atom+xml" /><link href="http://echarts.baidu.com/blog/" rel="alternate" type="text/html" /><updated>2017-06-14T15:17:26+08:00</updated><id>http://echarts.baidu.com/blog/</id><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><entry><title>在 ECharts GL 中绘制三维地图</title><link href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" rel="alternate" type="text/html" title="在 ECharts GL 中绘制三维地图" /><published>2017-06-14T00:00:00+08:00</published><updated>2017-06-14T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html">&lt;p&gt;ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是对于小编这样的设计师来说是不是更易上手呢？答案是肯定的，我们除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。&lt;/p&gt;

&lt;p&gt;这篇教程就希望通过在 Gallery 里绘制一个有丰富的光效、阴影的写实风格的三维地图的例子，简单介绍一些ECharts GL与画质相关的配置项，最终效果见 &lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xBkY4tpszb&quot;&gt;http://gallery.echartsjs.com/editor.html?c=xBkY4tpszb&lt;/a&gt;（下图为最后的效果）。涉及到太高深专业的算法、代码、什么什么的小设计师我实在是不会，所以这个仅仅能当 GL 入门级教程使用哦～&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/banner.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;绘制一个基础的三维地图&quot;&gt;绘制一个基础的三维地图&lt;/h2&gt;

&lt;p&gt;首先我们在 Gallery 中用 ECharts GL 画一个基础的三维地图。注意因为 GL 是 ECharts 的一个扩展，所以我们需要在 Gallery 中额外引入 GL 的脚本文件。
「引入文件」只需要在 Gallery中新建作品，然后在「脚本」的配置中加入这行地址就行了。&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js&quot;&gt;http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;如果要绘制世界地图的话还需要引入上面「常用脚本」的世界地图文件。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/scripts.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;做好准备工作后我们就可以开始画一个三维的世界地图了，GL 中画三维地图的配置项跟画普通的二维地图一样，只是系列名称从原来的&lt;code class=&quot;highlighter-rouge&quot;&gt;map&lt;/code&gt;改成&lt;code class=&quot;highlighter-rouge&quot;&gt;map3D&lt;/code&gt;。&lt;/p&gt;

&lt;p&gt;我们先用下面的最基础配置项，基于引入的脚本，生成一个最基础的三维地图系列。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'map3D'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'world'&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;是不是很简单，当然画出来的效果也是非常基础和简陋的。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-basic.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;接下来就我们需要做的就是一步一步的添加光照、阴影、后期的配置项把这个三维地图画得更漂亮。&lt;/p&gt;

&lt;h2 id=&quot;添加更丰富的灯光&quot;&gt;添加更丰富的灯光&lt;/h2&gt;

&lt;p&gt;GL 中大部分组件都支持灯光的配置，这些灯光会影响到组件中的所有图形，灯光的配置项需要统一在组件&lt;code class=&quot;highlighter-rouge&quot;&gt;light&lt;/code&gt;属性下设置。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;light&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nl&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;intensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;ambient&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;intensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;通常情况下组件中默认会有一个主光源&lt;code class=&quot;highlighter-rouge&quot;&gt;main&lt;/code&gt;和一个全局的环境光&lt;code class=&quot;highlighter-rouge&quot;&gt;ambient&lt;/code&gt;。主光源起到了主要的照明作用，可以让我们刚才画出来的三维地图产生基础的明暗对比，从而使图形产生真实的立体感。全局的环境光可以为整个场景提供全局照亮和统一材质的效果。（添加光照效果如下图）&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-light.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;我们可以通过&lt;code class=&quot;highlighter-rouge&quot;&gt;intensity&lt;/code&gt;属性设置不同光源的强度。例如在上面的代码中我们将主光源的强度设成&lt;code class=&quot;highlighter-rouge&quot;&gt;2&lt;/code&gt;，环境光源的强度设成&lt;code class=&quot;highlighter-rouge&quot;&gt;0&lt;/code&gt;后可以得到更加强烈的明暗对比。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-light-high-contrast.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;默认的环境光只是单纯的对所有图形都加上一个固定的亮度，所以会显得很平淡，如果把主光源去掉（&lt;code class=&quot;highlighter-rouge&quot;&gt;intensity&lt;/code&gt;设为&lt;code class=&quot;highlighter-rouge&quot;&gt;0&lt;/code&gt;）的话，整个地图场景会变成灰色。所以为了更丰富的光照效果，我们可以使用 GL 提供的更为强大的&lt;code class=&quot;highlighter-rouge&quot;&gt;ambientCubemap&lt;/code&gt;作为环境光源。&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;ambientCubemap&lt;/code&gt;是指使用一张全景贴图作为环境光源。一般全景的环境光贴图大概是下面这样。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/hdr.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;大家使用手机的全景模式中就可以拍出类似的全景照片。不过小编建议去寻找专业的 &lt;a href=&quot;https://zh.wikipedia.org/zh-hans/%E9%AB%98%E5%8A%A8%E6%80%81%E8%8C%83%E5%9B%B4%E6%88%90%E5%83%8F&quot;&gt;HDR&lt;/a&gt; 格式的全景图资源。这里推荐一个有不少免费的HDR全景图资源的网站 &lt;a href=&quot;http://www.hdrlabs.com/sibl/archive.html&quot;&gt;http://www.hdrlabs.com/sibl/archive.html&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;找到合适的全景图片后，我们可以在 Gallery 的&lt;code class=&quot;highlighter-rouge&quot;&gt;导入数据&lt;/code&gt;中上传该图片。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/asset-hdr.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;得到在 Gallery 上该图片地址链接后插入到&lt;code class=&quot;highlighter-rouge&quot;&gt;ambientCubemap&lt;/code&gt;的&lt;code class=&quot;highlighter-rouge&quot;&gt;texture&lt;/code&gt;属性中。&lt;/p&gt;
&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;light&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nl&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;intensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;ambient&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;intensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;ambientCubemap&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;diffuseIntensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;texture&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'/asset/get/s/data-1497251035660-HkVJTnsMW.hdr'&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;设置了&lt;code class=&quot;highlighter-rouge&quot;&gt;texture&lt;/code&gt;属性后 GL 就会自动启用环境光贴图作为环境光源。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-ambientcubemap.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;因为全景贴图的每个像素都会被计算到光照里，所以相比普通的环境光，使用环境光贴图会让整个光照会显得更真实和丰富。&lt;/p&gt;

&lt;p&gt;为了得到更真实的环境光效果，注意此处建议使用&lt;code class=&quot;highlighter-rouge&quot;&gt;.hdr&lt;/code&gt;格式的图片，因为 &lt;a href=&quot;https://zh.wikipedia.org/zh-hans/%E9%AB%98%E5%8A%A8%E6%80%81%E8%8C%83%E5%9B%B4%E6%88%90%E5%83%8F&quot;&gt;HDR&lt;/a&gt; 也就是高动态范围图像，它比其他格式的图像有更大亮度的数据存储。对比一下同一张图片&lt;code class=&quot;highlighter-rouge&quot;&gt;HDR&lt;/code&gt;和&lt;code class=&quot;highlighter-rouge&quot;&gt;PNG&lt;/code&gt;格式照亮的不同效果。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-hdr-compare.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;添加阴影&quot;&gt;添加阴影&lt;/h2&gt;

&lt;p&gt;有光的地方就会有阴影，阴影给了光照更多的层次，失去了阴影的光照是没有灵魂的，是平淡乏味的。&lt;/p&gt;

&lt;p&gt;在 GL 中可以简单的加上&lt;code class=&quot;highlighter-rouge&quot;&gt;shadow: true&lt;/code&gt;为主光源添加阴影。同时为了让三维地图有一种放在地面上的立体模型的感觉，我们再显示一个地面&lt;code class=&quot;highlighter-rouge&quot;&gt;groundPlane&lt;/code&gt;。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;light&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nl&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;intensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;shadow&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;ambient&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;intensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;ambientCubemap&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;diffuseIntensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;texture&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'/asset/get/s/data-1491896094618-H1DmP-5px.hdr'&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;groundPlane&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nl&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-shadow.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;通过阴影还可以更容易得感受到光照的方向，我们可以通过设置主光源&lt;code class=&quot;highlighter-rouge&quot;&gt;alpha&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;beta&lt;/code&gt;两个属性设置不同的光照角度，来查看阴影的变化。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;main&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nl&quot;&gt;intensity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;shadow&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;alpha&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;150&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;beta&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;70&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-shadow-long.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;这样就可以实现之前设计圈非常流行的一种长阴影的风格。&lt;/p&gt;

&lt;h2 id=&quot;更丰富的颜色&quot;&gt;更丰富的颜色&lt;/h2&gt;

&lt;p&gt;到这里我们得到的效果跟最初那个简陋的画面已经是天壤之别了，小编作为一个设计师是很钟情于白模的效果的，但是如果你手里有一份数据的话更是锦上添花。
数据的上传和转换可以通过echarts提供的表格数据转换工具实现，
&lt;a href=&quot;http://echarts.baidu.com/spreadsheet.html&quot;&gt;http://echarts.baidu.com/spreadsheet.html&lt;/a&gt;，数据部分内容不在此多述。如果暂时没有现成数据，可以直接先复制教程实例中的数据，见左侧代码区域&lt;code class=&quot;highlighter-rouge&quot;&gt;var regionData = [{……}];&lt;/code&gt;内的全部内容，直接复制粘贴即可进行之后操作。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/data.png&quot; width=&quot;500px&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;将这份数据导入并写入配置项里，&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/data-assign.png&quot; width=&quot;430px&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;接下来，我们可以使用 ECharts 中视觉映射「visualMap」组件将地图中的每块区域赋予不同的颜色。&lt;/p&gt;

&lt;p&gt;在 ECharts GL 中使用 visualMap 和在ECharts中并没有任何的不同：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;visualMap&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nl&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;min&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;15&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;inRange&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;nl&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'#313695'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#4575b4'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#74add1'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#abd9e9'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#e0f3f8'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#ffffbf'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#fee090'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#fdae61'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#f46d43'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#d73027'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#a50026'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;就是这样子每个国家根据不同数据就呈现出不同的颜色啦。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/map3D-data.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;后期处理&quot;&gt;后期处理&lt;/h2&gt;

&lt;p&gt;看到后期可能大家第一个想到的就是使用 PS 调色，小编这次主要用到的确实是调色。但其实GL 中除了调色之外，还有例如景深 、描边等诸多的后期效果能让整个画面呈现出你需要的效果，大家之后可以大胆的尝试。&lt;/p&gt;

&lt;p&gt;不知道大家是否能感受到其实此时得到的图片整体明度偏暗，色相偏蓝。就如我们在拍完照片后发现色调和曝光不理想需要再次调整图片一样，我们也需要对这张的画面进行后期处理和调色。&lt;/p&gt;

&lt;p&gt;后期处理的配置项都是在组件的&lt;code class=&quot;highlighter-rouge&quot;&gt;postEffect&lt;/code&gt;下。首先可以通过 enable 属性开启。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;postEffect&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nl&quot;&gt;enable&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;开启后 GL 会自动对整个画面调整曝光到合适的颜色。&lt;/p&gt;

&lt;p&gt;当然如果这个画面并不能让我们满意的话，我们还可以通过&lt;code class=&quot;highlighter-rouge&quot;&gt;postEffect&lt;/code&gt;下的&lt;code class=&quot;highlighter-rouge&quot;&gt;colorCorrection&lt;/code&gt;配置项去手动的调整颜色。&lt;code class=&quot;highlighter-rouge&quot;&gt;colorCorrection&lt;/code&gt;下有常见的曝光&lt;code class=&quot;highlighter-rouge&quot;&gt;exposure&lt;/code&gt;、亮度&lt;code class=&quot;highlighter-rouge&quot;&gt;brightness&lt;/code&gt;、对比度&lt;code class=&quot;highlighter-rouge&quot;&gt;contrast&lt;/code&gt;和饱和度&lt;code class=&quot;highlighter-rouge&quot;&gt;saturation&lt;/code&gt;选项。&lt;/p&gt;

&lt;p&gt;但是这次小编要教大家使用这里面更强大的颜色查找表功能&lt;code class=&quot;highlighter-rouge&quot;&gt;lookupTexture&lt;/code&gt;。这个功能可以让我们在 PS 等自己用着顺手的图像处理软件里处理好图片之后再到 GL 里复现我们在 PS 里调整的颜色曲线。&lt;/p&gt;

&lt;p&gt;小编给大家提供了一张初始的颜色查找表，大家把下面这张查找表的图片下载下来后和你的作品截图一起放入 Photoshop 中（可以把作品截图拖入查找表图层的上方，注意需要保持查找表大小不变，作品截图是为了让我们直观的预览调整的效果，调到满意之后，删除作品图层，只保存查找表，之后在GL中载入查找表，查找表的颜色映射会直接在GL中复现）。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/lookup.png&quot; width=&quot;300px&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/ps.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;点击左下角&lt;code class=&quot;highlighter-rouge&quot;&gt;创建新的填充或调整工具&lt;/code&gt;来选择自己需要调整的配置项，此时两个图层是可以同时调整的，这里可以自由调整各项参数来实现自己想要的效果。我在此使用的是&lt;code class=&quot;highlighter-rouge&quot;&gt;颜色查找&lt;/code&gt;下自带的&lt;code class=&quot;highlighter-rouge&quot;&gt;Candlelight.cube&lt;/code&gt;将图片调整成了一种蜡烛光照的复古风格，又调整了亮度和对比度使其更清晰。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/ps-adjusted.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/ps-adjusted2.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;调整完成之后，隐藏作品截图的图层，只需保存颜色查找表（如下图）&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/lookup-adjusted.png&quot; width=&quot;300px&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/asset-lookup.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;将该图在 Gallery 内上传数据，得到在 Gallery 上该图片地址链接后插入到&lt;code class=&quot;highlighter-rouge&quot;&gt;colorCorrection&lt;/code&gt;的 &lt;code class=&quot;highlighter-rouge&quot;&gt;lookupTexture&lt;/code&gt;中即可。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/code-lookup.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;到此，在 ECharts GL 中配置一个三维地图的步骤就完成啦，还想解锁更多 GL 技能的话， 可以直接去 ECharts 官网查看 GL 超多酷炫的实例，或者去查看GL的配置项手册 &lt;a href=&quot;http://echarts.baidu.com/option-gl.html&quot;&gt;http://echarts.baidu.com/option-gl.html&lt;/a&gt; 尽情的尝试吧～&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-06-14/banner.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;总结&quot;&gt;总结&lt;/h2&gt;

&lt;p&gt;本文我们介绍了如何在 ECharts GL 中配置出一张好看的写实风格三维地图。小编要偷偷地告诉你，用 ECharts GL 生成的效果图你还可以直接用来做图片素材哦，如果你还在为 PPT 或者自己的设计作品找不到合适的配图素材发愁的话，快来试试直接在 Gallery 里用 ECharts GL 直接生成一张吧。&lt;/p&gt;</content><author><name>dingding</name></author><category term="GL" /><category term="教程" /><summary>ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是对于小编这样的设计师来说是不是更易上手呢？答案是肯定的，我们除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-06-14/banner.png&quot;}" /></entry><entry><title>ECharts v3.6 发布：自定义系列、极坐标柱状图</title><link href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" rel="alternate" type="text/html" title="ECharts v3.6 发布：自定义系列、极坐标柱状图" /><published>2017-05-25T00:00:00+08:00</published><updated>2017-05-25T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/05/25/new-release</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/05/25/new-release.html">&lt;p&gt;在 ECharts 新发布的 &lt;a href=&quot;https://github.com/ecomfe/echarts/releases/tag/3.6.0&quot;&gt;3.6 版本&lt;/a&gt;中，新增了 &lt;a href=&quot;http://echarts.baidu.com/option.html#series-custom&quot;&gt;自定义系列（custom series）&lt;/a&gt;，能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。&lt;/p&gt;

&lt;h2 id=&quot;自定义系列&quot;&gt;自定义系列&lt;/h2&gt;

&lt;p&gt;图表的类型多种多样，有些大众有些小众，echarts 难于内置得支持所有类型的图表。所以推出了 &lt;a href=&quot;http://echarts.baidu.com/option.html#series-custom&quot;&gt;自定义系列（custom series）&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。同时，echarts 会统一管理图形的创建删除、动画、与其他组件（如 &lt;a href=&quot;http://echarts.baidu.com/option.html#dataZoom&quot;&gt;dataZoom&lt;/a&gt;、&lt;a href=&quot;http://echarts.baidu.com/option.html#visualMap&quot;&gt;visualMap&lt;/a&gt;）的联动，使用户不必纠结这些细节。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;例如，下面的例子使用 custom series 扩展出了 x-range 图：&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/custom-profile.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=custom-profile&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;p&gt;可以注意到，里面须用户自定义的渲染逻辑，在 &lt;code class=&quot;highlighter-rouge&quot;&gt;renderItem&lt;/code&gt; 这个函数中，并不十分复杂。但是得到的功能是比较完备的。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;...,&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'custom'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;renderItem&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;categoryIndex&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
            &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;start&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;coord&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;categoryIndex&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]);&lt;/span&gt;
            &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;end&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;coord&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;categoryIndex&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]);&lt;/span&gt;
            &lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;height&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;size&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;])[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

            &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'rect'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;echarts&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;graphic&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;clipRectByRect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;start&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;start&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;height&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;end&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;start&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;height&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;coordSys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;coordSys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;coordSys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;coordSys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;height&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}),&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;api&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;下面的两个例子使用 custom series 扩展出了 error-chart 图：&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/custom-error-bar.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=custom-error-bar&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/custom-error-scatter.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=custom-error-scatter&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;下面是其他一些例子：&lt;/strong&gt;&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/custom-bar-trend.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=custom-bar-trend&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/custom-profit.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=custom-profit&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/custom-hexbin.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=custom-hexbin&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt;

&lt;h2 id=&quot;极坐标柱状图&quot;&gt;极坐标柱状图&lt;/h2&gt;

&lt;p&gt;极坐标中的柱状图，可以按径向排布或者切向排布。&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bar-polar-stack.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=bar-polar-stack&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bar-polar-stack-radial.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=bar-polar-stack-radial&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;p&gt;使用时，只需要将系列的 &lt;code class=&quot;highlighter-rouge&quot;&gt;coordinateSystem&lt;/code&gt; 设置为 &lt;code class=&quot;highlighter-rouge&quot;&gt;'polar'&lt;/code&gt;，将原先笛卡尔坐标系中使用的 &lt;code class=&quot;highlighter-rouge&quot;&gt;xAxis&lt;/code&gt; 和 &lt;code class=&quot;highlighter-rouge&quot;&gt;yAxis&lt;/code&gt; 替换成 &lt;code class=&quot;highlighter-rouge&quot;&gt;radiusAxis&lt;/code&gt; 和 &lt;code class=&quot;highlighter-rouge&quot;&gt;angleAxis&lt;/code&gt;，就能使用极坐标系的柱状图了。&lt;/p&gt;

&lt;h2 id=&quot;其他&quot;&gt;其他&lt;/h2&gt;

&lt;p&gt;此外，&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;支持了&lt;a href=&quot;http://echarts.baidu.com/option.html#series-scatter.encode&quot;&gt;encode&lt;/a&gt; 设定，可以指定 &lt;a href=&quot;http://echarts.baidu.com/option.html#series-scatter.data&quot;&gt;data&lt;/a&gt; 中哪些维度映射到坐标系中哪个轴，或者哪些维度在 &lt;a href=&quot;http://echarts.baidu.com/option.html#tooltip&quot;&gt;tooltip&lt;/a&gt; 以及 &lt;a href=&quot;http://echarts.baidu.com/option.html#series-scatter.label&quot;&gt;label&lt;/a&gt; 中显示。&lt;/li&gt;
  &lt;li&gt;支持了 &lt;a href=&quot;http://echarts.baidu.com/option.html#series-scatter.dimensions&quot;&gt;dimensions&lt;/a&gt; 设定，能指定 &lt;a href=&quot;http://echarts.baidu.com/option.html#series-scatter.data&quot;&gt;data&lt;/a&gt; 中每个维度的名称和类型。名称可以显示在默认 &lt;a href=&quot;http://echarts.baidu.com/option.html#tooltip&quot;&gt;tooltip&lt;/a&gt; 中。&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;dataZoom&lt;/code&gt; 组件进行了增强。比如，支持了『按住 &lt;code class=&quot;highlighter-rouge&quot;&gt;'ctrl'&lt;/code&gt;/&lt;code class=&quot;highlighter-rouge&quot;&gt;'alt'&lt;/code&gt;/&lt;code class=&quot;highlighter-rouge&quot;&gt;'shift'&lt;/code&gt; 和滚轮时才能出发缩放平移』功能，避免和页面的滚动冲突（参见 &lt;a href=&quot;http://echarts.baidu.com/option.html#dataZoom-inside.moveOnMouseMove&quot;&gt;moveOnMouseMove&lt;/a&gt; 和 &lt;a href=&quot;http://echarts.baidu.com/option.html#dataZoom-inside.zoomOnMouseWheel&quot;&gt;zoomOnMouseWheel&lt;/a&gt;。另外支持了 &lt;a href=&quot;http://echarts.baidu.com/option.html#dataZoom.minSpan&quot;&gt;minSpan&lt;/a&gt; 和 &lt;a href=&quot;http://echarts.baidu.com/option.html#dataZoom.maxSpan&quot;&gt;maxSpan&lt;/a&gt; 等细节配置。&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;更多的升级信息，参见 &lt;a href=&quot;http://echarts.baidu.com/changelog.html&quot;&gt;changelog&lt;/a&gt;。&lt;/p&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="新版本" /><category term="扩展" /><category term="教程" /><summary>在 ECharts 新发布的 3.6 版本中，新增了 自定义系列（custom series），能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-05-25-banner.png&quot;}" /></entry><entry><title>ECharts 统计扩展教程</title><link href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html" rel="alternate" type="text/html" title="ECharts 统计扩展教程" /><published>2017-05-09T00:00:00+08:00</published><updated>2017-05-09T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html">&lt;h1 id=&quot;echarts-统计扩展教程&quot;&gt;ECharts 统计扩展教程&lt;/h1&gt;

&lt;p&gt;你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？—— 什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器 —— &lt;a href=&quot;https://github.com/ecomfe/echarts-stat/&quot;&gt;ECharts 统计扩展&lt;/a&gt;，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 &lt;a href=&quot;http://echarts.baidu.com/&quot;&gt;ECharts&lt;/a&gt; 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。下面我们就一起来学习一下这些功能。&lt;/p&gt;

&lt;h2 id=&quot;首先引入-javascript-文件&quot;&gt;首先引入 JavaScript 文件&lt;/h2&gt;

&lt;p&gt;如果大家不仅要对数据进行分析，还要将分析的结果呈现出来，那就需要在下载引入扩展文件的同时，下载引入 ECharts 文件。如下：&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;echarts.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;ecStat.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;//具体可视分析的代码&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;除此之外，还需要指定一个具有高度和宽度的 DOM 元素，作为图表的容器，用来放置将被绘制的图表。如：&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;main&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;style=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;width=100%; height=100%&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;然后传入该 DOM 元素，初始化 ECharts 图表：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;chart&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;echarts&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;init&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'main'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;完成了上面的准备工作，下面将一一介绍统计扩展的功能。&lt;/p&gt;

&lt;h2 id=&quot;直方图&quot;&gt;直方图&lt;/h2&gt;

&lt;p&gt;直方图主要用来反映一组样本数据的分布情况，可以近似估计一个数值类变量的概率分布。直方图是一种特殊的柱状图，它的任意两个 bar 之间不允许有间隙，这是因为整个数轴范围被分割成了一个个连续的、相互邻接的小区间。这个分割过程就是由统计扩展做的，用户只需要传入一维的数据，如下：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;girth&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;8.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;8.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;8.8&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;10.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;10.7&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;10.8&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;11.7&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;12.0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;12.9&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;12.9&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;13.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;13.7&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;13.8&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;14.0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;14.2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;14.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;16.0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;16.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;17.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;17.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;17.9&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;18.0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;18.0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;20.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;bins&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ecStat&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;histogram&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;girth&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'scott'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;这里的第二个参数 &lt;code class=&quot;highlighter-rouge&quot;&gt;'scott'&lt;/code&gt; 是用来指定切割 bin 的方法，有四个选项，分别是 &lt;code class=&quot;highlighter-rouge&quot;&gt;'squareRoot'&lt;/code&gt; 、 &lt;code class=&quot;highlighter-rouge&quot;&gt;'scott'&lt;/code&gt; 、 &lt;code class=&quot;highlighter-rouge&quot;&gt;'freedmanDiaconis'&lt;/code&gt; 、 &lt;code class=&quot;highlighter-rouge&quot;&gt;'sturges'&lt;/code&gt; ，其中 &lt;code class=&quot;highlighter-rouge&quot;&gt;'squareRoot'&lt;/code&gt; 是默认的计算方法，也是Excel中直方图使用的计算 bin 的方法
，有关这四种计算方法的详细介绍，请参见 &lt;a href=&quot;https://en.wikipedia.org/wiki/Histogram#Mathematical_definition&quot;&gt;wikipedia&lt;/a&gt;。使用处理后的 &lt;code class=&quot;highlighter-rouge&quot;&gt;bins.data&lt;/code&gt; 配置 ECharts 柱状图中的 &lt;code class=&quot;highlighter-rouge&quot;&gt;option.data&lt;/code&gt; 就可以得到如下的直方图。由于篇幅的问题，这里就不再赘述具体的 &lt;code class=&quot;highlighter-rouge&quot;&gt;option&lt;/code&gt; 配置，感兴趣的读者可以点击下方的 &lt;code class=&quot;highlighter-rouge&quot;&gt;代码&lt;/code&gt; 按钮，进入 ECharts Gallery 中查看。&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xBk5VZddJW&amp;amp;v=4&quot;&gt;&lt;/iframe&gt;

&lt;h2 id=&quot;聚类分析&quot;&gt;聚类分析&lt;/h2&gt;

&lt;p&gt;聚类分析用于将原数据集聚合成多个特性不同的数据簇，每个数据簇内的数据对象具有某些相似的特征。通过 ECharts 不仅可以可视化聚类的结果，还可以可视化聚类的过程。具体的使用方式如下：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;result&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ecStat&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;clustering&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;hierarchicalKMeans&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;clusterNumber&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;其中 &lt;code class=&quot;highlighter-rouge&quot;&gt;data&lt;/code&gt; 是用户传入的二维数值数组， &lt;code class=&quot;highlighter-rouge&quot;&gt;clusterNumber&lt;/code&gt; 是由用户设定的数据簇的个数，最后一个 &lt;code class=&quot;highlighter-rouge&quot;&gt;boolean&lt;/code&gt; 类型的变量是用来指定，静态地可视化聚类的结果，还是动态地可视化聚类的过程。若值为 &lt;code class=&quot;highlighter-rouge&quot;&gt;false&lt;/code&gt; 则为前者，反之，则为后者。&lt;/p&gt;

&lt;p&gt;静态可视化聚类的结果：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xSkBOEaGtx&amp;amp;v=10&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;动态可视化聚类的过程：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xHyr-esMtg&amp;amp;v=4&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;同样，感兴趣的读者可以点击上方实例的 &lt;code class=&quot;highlighter-rouge&quot;&gt;代码&lt;/code&gt; 按钮，进入 ECharts Gallery 中查看具体的代码，以及 &lt;code class=&quot;highlighter-rouge&quot;&gt;option&lt;/code&gt; 的配置。&lt;/p&gt;

&lt;h2 id=&quot;回归分析&quot;&gt;回归分析&lt;/h2&gt;

&lt;p&gt;回归分析就是根据数据集中自变量和因变量的值，拟合出一条曲线，反映它们的变化趋势。在统计扩展中我们实现了四种回归算法，分别是线性回归、指数回归、对数回归、以及多项式回归。使用方式如下：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;myRegression&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ecStat&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;regression&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;regressionType&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;order&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;其中，&lt;code class=&quot;highlighter-rouge&quot;&gt;regressionType&lt;/code&gt; 指的是回归类型，有四种取值，分别是 &lt;code class=&quot;highlighter-rouge&quot;&gt;'linear'&lt;/code&gt; 、&lt;code class=&quot;highlighter-rouge&quot;&gt;'exponential'&lt;/code&gt; 、&lt;code class=&quot;highlighter-rouge&quot;&gt;'logarithmic'&lt;/code&gt; 、&lt;code class=&quot;highlighter-rouge&quot;&gt;'polynomial'&lt;/code&gt; 。&lt;code class=&quot;highlighter-rouge&quot;&gt;data&lt;/code&gt; 是用户传入的二维数值数组，分别是自变量和因变量的样本值。最后一个参数 &lt;code class=&quot;highlighter-rouge&quot;&gt;order&lt;/code&gt; 用于多项式回归，用来指定多项式的阶数。&lt;/p&gt;

&lt;p&gt;线性回归：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xS1bQ2AMKe&amp;amp;v=6&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;指数回归：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xHyaNv0fFe&amp;amp;v=5&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;对数回归：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xry3aWkmYe&amp;amp;v=4&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;多项式回归：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xB16yW0MFl&amp;amp;v=3&quot;&gt;&lt;/iframe&gt;

&lt;h2 id=&quot;常用汇总统计&quot;&gt;常用汇总统计&lt;/h2&gt;

&lt;p&gt;除了上面提到的数据分析方法之外，统计扩展还包括了常用的汇总统计，如分位数、样本方差、标准差、中位数、平均数、求和、最大值、最小值等。具体的用法，这里就不在展开了，详情请参见 GitHub 上的&lt;a href=&quot;https://github.com/ecomfe/echarts-stat#statistics&quot;&gt;详细文档&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;最后的最后，提醒大家一句，在参照完 &lt;code class=&quot;highlighter-rouge&quot;&gt;Gallery&lt;/code&gt; 上 &lt;code class=&quot;highlighter-rouge&quot;&gt;option&lt;/code&gt; 的设置之后，一定要记得 &lt;code class=&quot;highlighter-rouge&quot;&gt;setOption&lt;/code&gt; ，如下：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;chart&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setOption&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="统计" /><category term="扩展" /><category term="教程" /><summary>ECharts 统计扩展教程</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-05-09-echarts-statistical-logarithmic-regression.png&quot;}" /></entry><entry><title>那些年我们一起学过的直方图</title><link href="http://echarts.baidu.com/blog/2017/05/08/echarts-histogram-tutorial.html" rel="alternate" type="text/html" title="那些年我们一起学过的直方图" /><published>2017-05-08T00:00:00+08:00</published><updated>2017-05-08T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/05/08/echarts-histogram-tutorial</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/05/08/echarts-histogram-tutorial.html">&lt;p&gt;某天下午小编正在安安静静地撸代码，突然听说在我们的 &lt;a href=&quot;http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all&quot;&gt;gallery&lt;/a&gt; 上，有用户提出，&lt;a href=&quot;http://echarts.baidu.com/index.html&quot;&gt;ECharts&lt;/a&gt; 不支持直方图，什么？这怎么能忍？于是小编将珍藏已久的机械键盘拿出来，摆好姿势，通宵达旦地为用户大大们加好了直方图，并于上周四悄悄上线了，对，我们就是这么低调。然而，很多大大们表示，直方图还是柱状图？傻傻分不清。小编深感这年头光有图怕是不行了，必须得有个教程，要做到图文并茂。下面小编就从直方图是什么，为什么要用直方图，以及如何使用 &lt;a href=&quot;http://echarts.baidu.com/index.html&quot;&gt;ECharts&lt;/a&gt; 制作直方图三个方面，为各位大大们上点干货。&lt;/p&gt;

&lt;h2 id=&quot;直方图是什么&quot;&gt;直方图是什么&lt;/h2&gt;

&lt;p&gt;直方图主要用来反映一组样本数据的分布情况。从图的形式来看，它属于柱状图的一种，但它和柱状图相比还是有很多不同之处的。首先，直方图的任意两个 bar 之间不允许有间隙，这是因为原始样本值被分割成一系列连续的、相互邻接的小区间，每一个小区间都是左闭右开的，除了最后一个，如&lt;code class=&quot;highlighter-rouge&quot;&gt;[x0, x1), [x1,x2), [x2,x3]&lt;/code&gt;，在直方图中小区间又被称为“bin”。其中bin的高度是由落入该区间中样本值的个数决定的；其次，在 ECharts 中绘制双数值轴（这里的双数值轴指的是 x 轴和 y 轴都是数值类型的）柱状图，用户需要传入二维的数组，如&lt;code class=&quot;highlighter-rouge&quot;&gt;array1 = [[1, 2], [3, 4]]&lt;/code&gt;，而绘制直方图，用户只需要传入一维的数组，如&lt;code class=&quot;highlighter-rouge&quot;&gt;array2 = [1, 2, 3, 4]&lt;/code&gt;，然后由&lt;a href=&quot;https://github.com/ecomfe/echarts-stat&quot;&gt;ECharts 统计扩展&lt;/a&gt;将一维的样本值分割成一个个具体的bin，并计算输出每一个bin的绘制信息，然后选用 ECharts 柱状图绘制具体的直方图。&lt;/p&gt;

&lt;h2 id=&quot;为什么要用直方图&quot;&gt;为什么要用直方图&lt;/h2&gt;

&lt;p&gt;前面已经提到了，直方图主要用来反映样本数据的分布，如下图，这是使用著名的&lt;a href=&quot;https://en.wikipedia.org/wiki/Iris_flower_data_set&quot;&gt;虹膜花数据集&lt;/a&gt;中的花瓣长度这一维度所作的直方图。从图中可以直观地看出该维度样本数据不符合正态分布，有多个峰值，具有明显的差异。这说明不同种类虹膜花的花瓣长度，受多个因素的影响，同时也表明在进一步的数据分析中，所有基于正态分布假设的分析，都不适合该维度数据。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-05-08-echarts-histogram-petal-length-iris.png&quot; alt=&quot;petal-width&quot; /&gt;&lt;/p&gt;

&lt;p&gt;除此之外，直方图还可以用来进行数据审查。所谓的数据审查，是指在数据预处理之前，通过直方图直观地审视样本数据中的每个维度，检查是否有异常值的同时，了解值的分布。如图，这是记录 31 颗黑樱桃树周长的样本数据，从图中可以明显地看出有三个异常值，因为树的周长肯定大于 0 ，不会出现小于 0 的负数，而&lt;code class=&quot;highlighter-rouge&quot;&gt;[-5, 0)&lt;/code&gt;这个区间内有三个样本值，这就需要通过数据清洗将异常值过滤掉。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-05-08-echarts-histogram-girth-of-tree.png&quot; alt=&quot;girth-tree&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;如何使用-echarts制作直方图&quot;&gt;如何使用 &lt;a href=&quot;http://echarts.baidu.com/index.html&quot;&gt;ECharts&lt;/a&gt;制作直方图&lt;/h2&gt;

&lt;p&gt;ECharts 是一个强大的可视化图表库，并不是一个统计分析的工具，所以我们将处理原始数据并分割成一个个具体的bin这一部分放在了 ECharts 的&lt;a href=&quot;https://github.com/ecomfe/echarts-stat&quot;&gt;统计扩展&lt;/a&gt;中实现。这就需要我们在引入 &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts.js&lt;/code&gt; 的同时，引入统计扩展对应的 &lt;code class=&quot;highlighter-rouge&quot;&gt;ecStat.js&lt;/code&gt;，如：&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;echarts.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;ecStat.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;script&amp;gt;&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;height&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;70&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;65&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;63&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;72&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;81&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;83&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;66&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;75&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;80&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;75&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;79&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;76&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;76&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;69&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;75&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;74&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;85&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;86&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;71&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;64&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;78&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;80&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;74&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;72&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;77&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;81&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;82&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;80&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;80&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;80&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;87&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;bins&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ecStat&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;histogram&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;然后使用统计扩展处理过后的数据，配置 ECharts 柱状图中的 option，如：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'rgb(25, 183, 207)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;grid&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'3%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;right&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'3%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;bottom&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'3%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;containLabel&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;xAxis&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'value'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;//这个一定要设，不然barWidth和bins对应不上&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;scale&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}],&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;yAxis&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'value'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}],&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'bar'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;barWidth&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'99.3%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;normal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'insideTop'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;formatter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;bins&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;这样就得到了如下的直方图：&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-05-08-echarts-histogram-height-of-tree.png&quot; alt=&quot;height-tree&quot; /&gt;&lt;/p&gt;

&lt;p&gt;这里不得不说的是，由于历史遗留的问题，ECharts 中的柱状图并不能完美地支持直方图的绘制，所以不得不使用一些小的 trick，如设置 &lt;code class=&quot;highlighter-rouge&quot;&gt;xAxis&lt;/code&gt; 的 &lt;code class=&quot;highlighter-rouge&quot;&gt;scale&lt;/code&gt; 为 &lt;code class=&quot;highlighter-rouge&quot;&gt;true&lt;/code&gt;，调整 &lt;code class=&quot;highlighter-rouge&quot;&gt;barWidth&lt;/code&gt; 的值等。不过，大家不用担心，作为一个良心以及正义感爆棚的团队，我们即将发布一款新的自定义图表类型。经小编亲测，该图表类型可以画出狂拽酷炫屌炸天的直方图，敬请期待哦。&lt;/p&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="直方图" /><category term="教程" /><category term="扩展" /><summary>某天下午小编正在安安静静地撸代码，突然听说在我们的 gallery 上，有用户提出，ECharts 不支持直方图，什么？这怎么能忍？于是小编将珍藏已久的机械键盘拿出来，摆好姿势，通宵达旦地为用户大大们加好了直方图，并于上周四悄悄上线了，对，我们就是这么低调。然而，很多大大们表示，直方图还是柱状图？傻傻分不清。小编深感这年头光有图怕是不行了，必须得有个教程，要做到图文并茂。下面小编就从直方图是什么，为什么要用直方图，以及如何使用 ECharts 制作直方图三个方面，为各位大大们上点干货。</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-05-08-echarts-histogram-height-of-tree.png&quot;}" /></entry><entry><title>ECharts GL 1.0 alpha 发布</title><link href="http://echarts.baidu.com/blog/2017/04/12/echarts-gl-alpha.html" rel="alternate" type="text/html" title="ECharts GL 1.0 alpha 发布" /><published>2017-04-12T00:00:00+08:00</published><updated>2017-04-12T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/04/12/echarts-gl-alpha</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/04/12/echarts-gl-alpha.html">&lt;p&gt;距离 ECharts-X 最近一个版本已经过去了两年多时间，期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本，是不是不再维护了等等，对于这些问题我们只能回答我们还没准备好。尽管这两年时间 ECharts X 没什么动静，但是其它的工作，像 ECharts 3 的架构大改动和后续版本的迭代升级，以及其它 WebGL 产品的开发，都是对新版本架构和技术上的积累。现在我们终于可以说我们准备得差不多了，ECharts-X 的下一代，ECharts-GL 发布 1.0 alpha。&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://github.com/ecomfe/echarts-gl&quot;&gt;ECharts GL&lt;/a&gt; 是 ECharts 的 WebGL 扩展，其中提供了三维散点图，飞线图，柱状图，曲面图，地球等多种三维可视化方式。并且增加 &lt;code class=&quot;highlighter-rouge&quot;&gt;scatterGL&lt;/code&gt;，&lt;code class=&quot;highlighter-rouge&quot;&gt;graphGL&lt;/code&gt; 系列类型用于二维的散点图，关系图的加速绘制和布局。&lt;/p&gt;

&lt;p&gt;先来一张 Gallery 上 &lt;a href=&quot;https://github.com/ecomfe/echarts-gl&quot;&gt;ECharts GL&lt;/a&gt; 的示例图片集。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/demos.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;下面会一一介绍 ECharts GL 的特性，如果你已经等不及想尝鲜了，可以直接在 Gallery 上查看编辑 ECharts GL 的示例。&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/explore.html#tags=echarts-gl&quot;&gt;GL 的 Gallery 示例&lt;/a&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html&quot;&gt;GL 的配置项手册&lt;/a&gt;&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;一更便捷的安装和引入&quot;&gt;一、更便捷的安装和引入&lt;/h2&gt;

&lt;p&gt;大家用过 ECharts-X 的话，或许曾被其繁琐的引入方式困扰过，甚至可能因为尝试了很多次都没办法正确引入而选择放弃。&lt;/p&gt;

&lt;p&gt;ECharts-GL 中大大简化了引入方式，在标签引入的环境下。你可以从 &lt;a href=&quot;https://github.com/ecomfe/echarts-gl/tree/master/dist&quot;&gt;GitHub&lt;/a&gt; 上获取 ECharts GL 后直接引入构建好的文件.&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;echarts/dist/echarts.min.js&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/script&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;echarts-gl/dist/echarts-gl.min.js&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/script&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;如果你用 webpack 和 npm 作为开发环境。也只需要在 &lt;code class=&quot;highlighter-rouge&quot;&gt;npm install echarts-gl&lt;/code&gt; 之后再&lt;code class=&quot;highlighter-rouge&quot;&gt;require&lt;/code&gt;引入。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'echarts-gl'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&quot;二更多三维可视化类型&quot;&gt;二、更多三维可视化类型。&lt;/h2&gt;

&lt;p&gt;除了老版本的&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#globe&quot;&gt;地球&lt;/a&gt;用于地理数据可视化，ECharts GL 新增了三维的&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#grid3D&quot;&gt;笛卡尔坐标系&lt;/a&gt;、&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#geo3D&quot;&gt;地理坐标系&lt;/a&gt;，并且在这些新的三维坐标系基础上提供了六个新的系列类型，包括 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatter3D&quot;&gt;散点图 scatter3D&lt;/a&gt;、&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-line3D&quot;&gt;折线图 line3D&lt;/a&gt;、&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-bar3D&quot;&gt;柱状图 bar3D&lt;/a&gt;、&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface&quot;&gt;曲面图 surface&lt;/a&gt;、&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-lines3D&quot;&gt;飞线图 lines3D&lt;/a&gt;以及&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-map3D&quot;&gt;地图 map3D&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;这些新的系列类型以及组件类型都是使用 WebGL 绘制，因此能够保证高质量，高性能的展示出你想要的三维可视化作品。&lt;/p&gt;

&lt;p&gt;同时我们在配置项的设计上尽量沿用了 ECharts 的风格，保证简洁统一。比如下面这个配置就能画出一个简单的三维散点图。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;grid3D&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{},&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;xAxis3D&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{},&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;yAxis3D&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{},&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;zAxis3D&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{},&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'scatter3D'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;symbolSize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;50&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[[&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;itemStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;opacity&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;blockquote&gt;
  &lt;p&gt;这里跟 ECharts 有点区别，GL 中尝试了更扁平的 option 设计，使用场景更少的 emphasis 属性将会单独移出来，而原先 normal 这个层级将被移除，itemStyle 下的属性相当于原先 itemStyle.normal 下的属性。如果这次尝试没问题，接下来 ECharts 新的大版本也会使用这种更扁平的设计。
具体配置结构见 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatter3D.itemStyle&quot;&gt;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatter3D.itemStyle&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;大部分 GL 中的三维组件和系列都会带上&lt;code class=&quot;highlighter-rouge&quot;&gt;3D&lt;/code&gt;后缀以便跟 ECharts 中的组件系列区分开。&lt;/p&gt;

&lt;p&gt;下面这个更复杂点的例子使用&lt;code class=&quot;highlighter-rouge&quot;&gt;scatter3D&lt;/code&gt;可视化了三维的 &lt;a href=&quot;https://en.wikipedia.org/wiki/Simplex_noise&quot;&gt;Simplex Noise&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xBkWoZOjTe&quot;&gt;
    &lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/simplex-noise.jpg&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;除了三维的散点图，你也可以在笛卡尔坐标系上画 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-line3D&quot;&gt;折线图 line3D&lt;/a&gt;，&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-bar3D&quot;&gt;柱状图 bar3D&lt;/a&gt;，&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface&quot;&gt;曲面图 surface&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;其中 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-line3D&quot;&gt;line3D&lt;/a&gt;，&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-bar3D&quot;&gt;bar3D&lt;/a&gt; 也是对 ECharts 中的折线图，柱状图扩展到了三维的版本。而 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface&quot;&gt;surface&lt;/a&gt; 是 ECharts GL 里全新的三维图。&lt;/p&gt;

&lt;p&gt;你可以像下面这样用 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface&quot;&gt;surface&lt;/a&gt; 画函数曲面。&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xHkcYXm9pe&quot;&gt;
    &lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/surface.png&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;也可以像这样用曲面去可视化像图片像素这样的数据&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xBk5PSvqpx&quot;&gt;
    &lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/image-pixels.jpg&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;甚至你可以用参数方程构建出下面这样有趣的参数曲面&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xHku9OE96l&quot;&gt;
    &lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/parametric-surface.jpg&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;除了三维笛卡尔坐标系，像柱状图，散点图也可以显示在&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#globe&quot;&gt;地球&lt;/a&gt;，&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#geo3D&quot;&gt;三维地理坐标系&lt;/a&gt;上。&lt;/p&gt;

&lt;p&gt;比如下面这个例子就是在地球上通过散点图绘制世界人口。&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xS1moC0s6x&quot;&gt;
    &lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-2.jpg&quot; style=&quot;width:100%;&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;你可以大胆的组合不同坐标系和系列，制作出更具创造力的可视化作品！&lt;/p&gt;

&lt;h2 id=&quot;三高品质的画面&quot;&gt;三、高品质的画面&lt;/h2&gt;

&lt;p&gt;在很多场景里，高品质的画面是一个很重要的需求，例如：&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;在大屏中，需要提供炫酷的，一下能够抓住人眼球的特效。&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;生成需要放在文章或者 PPT 中的截图，需要高质量的渲染，不能有廉价三维效果的感觉。&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;ECharts GL 提供了一系列诸如&lt;a href=&quot;http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.depthOfField&quot;&gt;景深&lt;/a&gt;，&lt;a href=&quot;http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.bloom&quot;&gt;光晕&lt;/a&gt;，&lt;a href=&quot;http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.colorCorrection&quot;&gt;颜色纠正&lt;/a&gt;，&lt;a href=&quot;http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.SSAO&quot;&gt;阴影&lt;/a&gt;，&lt;a href=&quot;http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.light.ambientCubemap&quot;&gt;基于物理的渲染&lt;/a&gt; 等等开箱即用的配置项让你去方便的提升自己可视化作品的渲染效果。&lt;/p&gt;

&lt;p&gt;在这些配置项的基础上，你可以实现这样带景深的微缩模型的效果：&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-1.jpg&quot; style=&quot;width:100%;&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;或者这样的基于物理渲染的金属零件的效果：&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-3.jpg&quot; style=&quot;width:100%;&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;或者这样 Bling Bling 的影视广告特效：&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-5.jpg&quot; style=&quot;width:100%;&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;又或者这样的大规模建筑群：&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-4.jpg&quot; style=&quot;width:100%;&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;想要了解更多的效果，可以逛逛我们的&lt;a href=&quot;http://gallery.echartsjs.com/explore.html#tags=echarts-gl&quot;&gt;示例集&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;四二维可视化的加速&quot;&gt;四、二维可视化的加速&lt;/h2&gt;

&lt;p&gt;除了三维的可视化，ECharts GL 还内置 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatterGL&quot;&gt;scatterGL&lt;/a&gt;, &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatterGL&quot;&gt;graphGL&lt;/a&gt; 两个系列，能够大幅度的优化常见的二维散点图和关系图的绘制和布局性能。&lt;/p&gt;

&lt;p&gt;散点图也是比较常见的会有大数据量的系列类型。ECharts 尽管能绘制像微博签到图那样上十万的散点图，但是很难做到流畅的交互。拖拽、缩放等操作都会有卡顿。&lt;/p&gt;

&lt;p&gt;在 ECharts GL 里利用 WebGL 加速绘制后，可以无压力得绘制和实时的交互十万个数据的散点图了。&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xHJkXhU9Tg&quot;&gt;
&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/weibo-checkin.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;而且实现这一切只需要把原先的&lt;code class=&quot;highlighter-rouge&quot;&gt;scatter&lt;/code&gt;类型改为&lt;code class=&quot;highlighter-rouge&quot;&gt;scatterGL&lt;/code&gt;类型，不需要再做其它的改动！&lt;/p&gt;

&lt;p&gt;对于&lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatterGL&quot;&gt;关系图 graphGL&lt;/a&gt;除了绘制上有加速之外，我们还在 WebGL 中实现了&lt;a href=&quot;https://github.com/gephi/gephi/wiki/Force-Atlas-2&quot;&gt;力引导布局&lt;/a&gt;。在高端的显卡上 GPU 布局相对于 CPU 布局甚至能有上百倍的性能提升。&lt;/p&gt;

&lt;p&gt;下面是在&lt;code class=&quot;highlighter-rouge&quot;&gt;GTX1070&lt;/code&gt;和&lt;code class=&quot;highlighter-rouge&quot;&gt;i7 4GHz&lt;/code&gt;的电脑中对一个&lt;code class=&quot;highlighter-rouge&quot;&gt;两万&lt;/code&gt;个节点，近&lt;code class=&quot;highlighter-rouge&quot;&gt;五万&lt;/code&gt;条边的关系图一次布局的迭代的性能对比。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/gpu-layout-perf.png&quot; width=&quot;400px&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;以及对这个关系图实时布局的视频。&lt;/p&gt;

&lt;video controls=&quot;&quot; width=&quot;100%&quot; src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/graphGL.mp4&quot;&gt;&lt;/video&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;2500&lt;/code&gt;个节点的网格图使用 GPU 布局的例子（只支持 PC 端）。&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xrJchBL9ag&quot;&gt;
&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/grid.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;这里特别感谢 Gephi 提供了 Force Atlas2 这样在大规模关系数据上能够有稳定优良的布局结果的算法。&lt;/p&gt;

&lt;h2 id=&quot;五与-echarts-交互组件的结合&quot;&gt;五、与 ECharts 交互组件的结合&lt;/h2&gt;

&lt;p&gt;ECharts GL 作为一个扩展，并不是独立的，它提供的系列和组件能够和 ECharts 中的大部分组件组合使用。你可以使用 &lt;a href=&quot;http://echarts.baidu.com/option.html#visualMap&quot;&gt;visualMap&lt;/a&gt; 组件对 GL 中的系列进行颜色，大小，不透明的编码，可以用 &lt;a href=&quot;http://echarts.baidu.com/option.html#tooltip&quot;&gt;tooltip&lt;/a&gt; 组件显示 GL 中图形的数据信息，也可以用 &lt;a href=&quot;http://echarts.baidu.com/option.html#legend&quot;&gt;legend&lt;/a&gt; 筛选出想要展示的系列等等。&lt;/p&gt;

&lt;p&gt;例如下面这个例子用 &lt;a href=&quot;http://echarts.baidu.com/option.html#visualMap&quot;&gt;visualMap&lt;/a&gt; 组件对柱状图做了颜色的映射，而且能够通过控件筛选出区间内的数据&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=xSyMekmcTx&quot;&gt;
&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/visual-map.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;当然除此之外，你也可以在一个实例里任意混搭使用 ECharts GL 的组件以及 ECharts 的组件。&lt;/p&gt;

&lt;h2 id=&quot;六移动端兼容&quot;&gt;六、移动端兼容&lt;/h2&gt;

&lt;p&gt;现在很多移动端的浏览器已经支持 WebGL 了，特别是像 iOS 系统对 WebGL 的扩展特性等支持得非常完善。所以用 ECharts GL 制作的大部分例子都能在 iOS 上流畅无压力的运行。在交互上 ECharts GL 也对移动端做了兼容处理，支持平移，双指缩放等等。&lt;/p&gt;

&lt;p&gt;如果你现在不是在手机上浏览这篇文章，可以稍后在手机上打开 &lt;a href=&quot;http://gallery.echartsjs.com/&quot;&gt;http://gallery.echartsjs.com/&lt;/a&gt; 看看效果。&lt;/p&gt;

&lt;p&gt;下面是在 iPhone 6 上实时预览前面示例中参数曲面的效果。&lt;/p&gt;

&lt;video controls=&quot;&quot; width=&quot;100%&quot; src=&quot;http://echarts.baidu.com/blog/images/post/2017-04-12/mobile.mp4&quot;&gt;&lt;/video&gt;

&lt;h2 id=&quot;更多&quot;&gt;更多&lt;/h2&gt;

&lt;p&gt;ECharts GL 1.0 alpha 只是个开始，在正式版发布之前，我们还会对画面，交互的细节，动画，性能等等做更多的优化。大家使用过程中有任何的问题或者建议都可以在 GitHub 上跟我们反馈，
我们也非常期待大家能够利用 ECharts GL 做出让我们想象不到的作品。&lt;/p&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="新版本" /><category term="扩展" /><category term="echarts-gl" /><summary>距离 ECharts-X 最近一个版本已经过去了两年多时间，期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本，是不是不再维护了等等，对于这些问题我们只能回答我们还没准备好。尽管这两年时间 ECharts X 没什么动静，但是其它的工作，像 ECharts 3 的架构大改动和后续版本的迭代升级，以及其它 WebGL 产品的开发，都是对新版本架构和技术上的积累。现在我们终于可以说我们准备得差不多了，ECharts-X 的下一代，ECharts-GL 发布 1.0 alpha。</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-04-12/buildings2.jpg&quot;}" /></entry><entry><title>ECharts v3.5 发布：新增日历坐标系、坐标轴指示器；同时统计扩展 v1.0 发布</title><link href="http://echarts.baidu.com/blog/2017/03/23/new-release.html" rel="alternate" type="text/html" title="ECharts v3.5 发布：新增日历坐标系、坐标轴指示器；同时统计扩展 v1.0 发布" /><published>2017-03-23T00:00:00+08:00</published><updated>2017-03-23T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/03/23/new-release</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/03/23/new-release.html">&lt;p&gt;在 ECharts 新发布的 &lt;a href=&quot;https://github.com/ecomfe/echarts/releases/tag/3.5.0&quot;&gt;3.5 版本&lt;/a&gt;中，新增了日历坐标系，增强了坐标轴指示器。同时，&lt;a href=&quot;https://github.com/ecomfe/echarts-stat&quot;&gt;ECharts 统计扩展&lt;/a&gt; 1.0 版本发布了。日历坐标系用于在日历中绘制图表，坐标轴指示器方便用户观察数据内容，统计扩展是一个专门用来进行数据分析的工具。&lt;/p&gt;

&lt;h2 id=&quot;统计扩展&quot;&gt;统计扩展&lt;/h2&gt;

&lt;p&gt;统计扩展是一个专门用来进行数据分析的工具，目前主要包含了二维的回归、多维的聚类以及一些常用的统计功能。&lt;/p&gt;

&lt;p&gt;扩展中的回归算法不仅包含了常用的线性回归，还包含了指数回归、对数回归、以及多项式回归。&lt;/p&gt;

&lt;p&gt;线性回归的示例：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xS1bQ2AMKe.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xS1bQ2AMKe&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;对数回归的示例：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xry3aWkmYe.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xry3aWkmYe&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;秉承了可视分析的宗旨，我们的多维聚类分析，不仅可以静态地产出数据集聚类的结果，还可以动态地查看整个聚类分析的过程。&lt;/p&gt;

&lt;p&gt;静态地产出数据集聚类的结果的示例：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xSkBOEaGtx.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xSkBOEaGtx&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;动态地查看整个聚类分析的过程的示例：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xHyr-esMtg.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xHyr-esMtg&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;和 echarts 中的原生图表不一样，统计扩展是作为一个扩展工具发布的。这意味着，在 echarts 官网下载的完整版本将不包含该扩展包。统计扩展和 echarts 结合使用时，需要在引入 &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts.js&lt;/code&gt; 之后，另外引入统计扩展对应的 &lt;code class=&quot;highlighter-rouge&quot;&gt;ecStat.js&lt;/code&gt;。可以在 &lt;a href=&quot;https://github.com/ecomfe/echarts-stat/releases/latest&quot;&gt;这里 (GitHub)&lt;/a&gt; 找到最新版本，其中 &lt;code class=&quot;highlighter-rouge&quot;&gt;dist/ecStat.js&lt;/code&gt; 可作为单文件引用。&lt;/p&gt;

&lt;p&gt;如果想了解更多内容请前往 &lt;a href=&quot;https://github.com/ecomfe/echarts-stat&quot;&gt;统计扩展 GitHub 首页&lt;/a&gt;。&lt;/p&gt;

&lt;h2 id=&quot;日历坐标系&quot;&gt;日历坐标系&lt;/h2&gt;

&lt;p&gt;日历坐标系，是一种新的 echarts 坐标系，提供了在日历上绘制图表的能力。例如可以在日历坐标系上放置热力图、散点图、关系图等。如下示例：&lt;/p&gt;

&lt;p&gt;在日历坐标系中使用热力图：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=calendar-heatmap&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;p&gt;在日历坐标系中使用散点图：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=calendar-effectscatter&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 600px&quot;&gt;&lt;/div&gt;

&lt;p&gt;还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=calendar-graph&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 600px&quot;&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;水平和垂直放置日历&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;在日历坐标系可以水平放置，也可以垂直放置。如上面的例子，使用热力图时，经常是水平放置的。但是如果需要格子的尺寸大些，水平放置就过于宽了，于是也可以选择垂直放置。参见 &lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.orient&quot;&gt;calendar.orient&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;尺寸的自适应&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;日历坐标系支持不同尺寸的容器（页面）大小变化的自适应。首先，和 echarts 其他组件一样，日历坐标系可以选择使用 &lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.left&quot;&gt;left&lt;/a&gt;，&lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.right&quot;&gt;right&lt;/a&gt;，&lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.top&quot;&gt;top&lt;/a&gt;，&lt;a href=&quot;bottom&quot;&gt;bottom&lt;/a&gt;，&lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.width&quot;&gt;width&lt;/a&gt;，&lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.height&quot;&gt;height&lt;/a&gt; 来描述尺寸和位置，从而将日历摆放在上下左右各种位置，并随着页面尺寸变动而改变自身尺寸。另外，也可以使用 &lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.cellSize&quot;&gt;cellSize&lt;/a&gt; 来固定日历格子的长宽。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;中西方日历习惯的支持&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;中西方日历有所差别，西方常使用星期日作为一周的第一天，中国使用星期一为一周的第一天。日历坐标系做了这种切换的支持。参见 &lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.dayLabel.firstDay&quot;&gt;calendar.dayLabel.firstDay&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;另外，日历上的『月份』和『星期几』的文字，也可以较方便的切换中英文，甚至自定义。参见 &lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.dayLabel.nameMap&quot;&gt;calendar.dayLabel.nameMap&lt;/a&gt; &lt;a href=&quot;http://echarts.baidu.com/option.html#calendar.monthLabel.nameMap&quot;&gt;calendar.monthLabel.nameMap&lt;/a&gt;。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;其他更丰富的效果&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;灵活利用 echarts 图表和坐标系的组合，以及 API，可以实现更丰富的效果。&lt;/p&gt;

&lt;p&gt;例如，制作农历：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=calendar-lunar&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt;

&lt;p&gt;下面这个例子，使用 &lt;code class=&quot;highlighter-rouge&quot;&gt;chart.convertToPixel&lt;/code&gt; 接口，实现了饼图放置在日历坐标系中的效果。&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=calendar-pie&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 640px&quot;&gt;&lt;/div&gt;

&lt;h2 id=&quot;坐标轴指示器&quot;&gt;坐标轴指示器&lt;/h2&gt;

&lt;p&gt;坐标轴指示器 （axisPointer）指的是，鼠标悬浮到坐标系上时出现的竖线、阴影区域等。它能帮助用户观察数据。echarts 原有的坐标轴指示器本次被整理和增强了，加入了文本标签，自动吸附到数据，以及移动触屏的手柄拖拽交互，以及支持了多个坐标系中指示器的联动。&lt;/p&gt;

&lt;p&gt;下面是一个K线图的示例。使用坐标轴指示器，能够比较方便得观察到每一项对应的 y 值。&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=doc-example/candlestick-axisPointer&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 450px&quot;&gt;&lt;/div&gt;

&lt;p&gt;上例中，使用了 &lt;a href=&quot;http://echarts.baidu.com/option.html#axisPointer.link&quot;&gt;axisPointer.link&lt;/a&gt; 来关联上下两个直角坐标系的 axisPointer，使他们同步运动。&lt;/p&gt;

&lt;p&gt;坐标轴指示器也提供了一种适合触屏的交互方式，使用手柄来拖拽坐标轴指示器。如果触屏上和鼠标操作一样，在坐标系内部拖拽操作坐标轴指示器，那么手指可能会挡住图表，并且可能和『数据区域缩放移动』操作冲突。用单独的拖拽手柄，可以改善这个问题。&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=line-tooltip-touch&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;这是另一个例子：&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=candlestick-touch&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;坐标轴指示器在多轴的场景能起到辅助作用，清晰得显示出对比数值，甚至可以在坐标轴指示器的文本标签内定制表达更多信息：&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=multiple-y-axis&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=multiple-x-axis&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;p&gt;最后提供一个内容更丰富些的例子，其中也使用了 &lt;a href=&quot;http://echarts.baidu.com/option.html#axisPointer.link&quot;&gt;axisPointer.link&lt;/a&gt; 来联动不同的坐标轴指示器。他关联和高亮了处于不同坐标系中的相互对应的点。&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=scatter-nutrients-matrix&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 640px&quot;&gt;&lt;/div&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="新版本" /><category term="扩展" /><category term="教程" /><summary>在 ECharts 新发布的 3.5 版本中，新增了日历坐标系，增强了坐标轴指示器。同时，ECharts 统计扩展 1.0 版本发布了。日历坐标系用于在日历中绘制图表，坐标轴指示器方便用户观察数据内容，统计扩展是一个专门用来进行数据分析的工具。</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-03-23/banner.png&quot;}" /></entry><entry><title>ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released</title><link href="http://echarts.baidu.com/blog/2017/03/23/new-release-en.html" rel="alternate" type="text/html" title="ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released" /><published>2017-03-23T00:00:00+08:00</published><updated>2017-03-23T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/03/23/new-release-en</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/03/23/new-release-en.html">&lt;p&gt;We are releasing &lt;a href=&quot;https://github.com/ecomfe/echarts/releases/tag/3.5.0&quot;&gt;ECharts v3.5&lt;/a&gt;, where calendar coodinate system is supported and axis pointer is enhanced. Meanwhile &lt;a href=&quot;https://github.com/ecomfe/echarts-stat&quot;&gt;ECharts statistic extension&lt;/a&gt; v1.0 is published.&lt;/p&gt;

&lt;p&gt;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).&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2 id=&quot;statistical-extension&quot;&gt;Statistical Extension&lt;/h2&gt;

&lt;p&gt;Statistical extension is a statistical and data mining tool for &lt;a href=&quot;https://github.com/ecomfe/echarts&quot;&gt;echarts&lt;/a&gt;. At present, it mainly includes two-dimensional regression, multi-dimensional clustering and some commonly used statistical functions.&lt;/p&gt;

&lt;p&gt;The regression algorithm in the extension not only contains the commonly used linear regression, but also contains exponential regression, logarithmic regression, and polynomial regression.&lt;/p&gt;

&lt;p&gt;An example of linear regression:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xS1bQ2AMKe.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xS1bQ2AMKe&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;An example of logarithmic regression:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xry3aWkmYe.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xry3aWkmYe&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;An example of the result of dataset clustering:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xSkBOEaGtx.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xSkBOEaGtx&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;An example demonstrating the entire process of clustering:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/blog/images/post/2017-03-23/xHyr-esMtg.png&quot; data-src=&quot;http://gallery.echartsjs.com/view.html?cid=xHyr-esMtg&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;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 &lt;code class=&quot;highlighter-rouge&quot;&gt;ecStat.js&lt;/code&gt; after &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts.js&lt;/code&gt;. You can find the file &lt;code class=&quot;highlighter-rouge&quot;&gt;dist/ecStat.js&lt;/code&gt; in the latest released version at &lt;a href=&quot;https://github.com/ecomfe/echarts-stat/releases/latest&quot;&gt;here (GitHub)&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you would like to know more, please visit the &lt;a href=&quot;https://github.com/ecomfe/echarts-stat&quot;&gt;Statistical Extension GitHub Home&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;calendar-coordinate-system&quot;&gt;Calendar Coordinate System&lt;/h2&gt;

&lt;p&gt;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).&lt;/p&gt;

&lt;p&gt;Using heatmap in calendar:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-heatmap&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;p&gt;Using scatter in calendar:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-effectscatter&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 600px&quot;&gt;&lt;/div&gt;

&lt;p&gt;Different types of chart can be place on calendar coordinate system together.&lt;/p&gt;

&lt;p&gt;Both place heatmap and graph chart in calendar:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-graph&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 600px&quot;&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Calendar layout:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;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 &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.orient&quot;&gt;calendar.orient&lt;/a&gt; can help in this case.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Adapt to container size:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;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: &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.left&quot;&gt;left&lt;/a&gt;, &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.right&quot;&gt;right&lt;/a&gt;, &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.top&quot;&gt;top&lt;/a&gt;, &lt;a href=&quot;bottom&quot;&gt;bottom&lt;/a&gt;, &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.width&quot;&gt;width&lt;/a&gt;, &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.height&quot;&gt;height&lt;/a&gt;, which make calendar possible to modify its size according to container size. Besides, &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#calendar.cellSize&quot;&gt;cellSize&lt;/a&gt; can be specified to fix the size of each cell of calendar.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;More effects:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Feel free to combination charts and calendar coordinate systems. You may achieve awesome effects.&lt;/p&gt;

&lt;p&gt;For example, using API &lt;code class=&quot;highlighter-rouge&quot;&gt;chart.convertToPixel&lt;/code&gt; to locate pie charts on calendar.&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=calendar-pie&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 640px&quot;&gt;&lt;/div&gt;

&lt;h2 id=&quot;axis-pointer&quot;&gt;Axis Pointer&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;An example, where axis pointers can be displayed in candlestick.&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=doc-example/candlestick-axisPointer&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 450px&quot;&gt;&lt;/div&gt;

&lt;p&gt;In the example above, &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer.link&quot;&gt;axisPointer.link&lt;/a&gt; is used to synchronize axes from the two different cartesian coordiante system.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=line-tooltip-touch&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;This is another example:&lt;/p&gt;
&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;http://echarts.baidu.com/gallery/data/thumb/bubble-gradient.png&quot; data-src=&quot;http://echarts.baidu.com/gallery/view.html?c=candlestick-touch&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;

&lt;p&gt;These examples demonstrating the effect of mutiple axes with axis pointers:&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=multiple-y-axis&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=multiple-x-axis&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 300px&quot;&gt;&lt;/div&gt;

&lt;p&gt;At last, let’s see a more complicated example, where &lt;a href=&quot;https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer.link&quot;&gt;axisPointer.link&lt;/a&gt; is also be used to synchronize axis pointers of different axes.&lt;/p&gt;

&lt;div class=&quot;ec-lazy&quot; data-thumb=&quot;https://ecomfe.github.io/echarts-examples/public/data/thumb/bubble-gradient.png&quot; data-src=&quot;https://ecomfe.github.io/echarts-examples/public/view.html?c=scatter-nutrients-matrix&amp;amp;edit=1&amp;amp;reset=1&quot; style=&quot;width: 100%; height: 640px&quot;&gt;&lt;/div&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="en" /><category term="new release" /><category term="extension" /><category term="tutorial" /><summary>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.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-01-13-new-release-theme-river.png&quot;}" /></entry><entry><title>可视化中的数据</title><link href="http://echarts.baidu.com/blog/2017/03/15/echarts-dataAbstraction-tutorial.html" rel="alternate" type="text/html" title="可视化中的数据" /><published>2017-03-15T00:00:00+08:00</published><updated>2017-03-15T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/03/15/echarts-dataAbstraction-tutorial</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/03/15/echarts-dataAbstraction-tutorial.html">&lt;p&gt;当下随着大数据热潮的到来，数据可视化作为一个新兴的领域，受到了学术界和工业界的重视。从可视分析、数据新闻到商业报表，各个领域都在越来越多的使用它。既然是数据可视化，说明数据是主体，可视化只是将数据以可视的形式表达的手段。接下来小编就与大家一起揭开可视化中数据的面纱，一探究竟。&lt;/p&gt;

&lt;h2 id=&quot;可视化什么数据抽象&quot;&gt;可视化什么：数据抽象&lt;/h2&gt;

&lt;p&gt;既然是数据可视化，无可非议，可视化的元素肯定是数据，这里所指的数据是广义上的数据，包括文本、图片、声音等超媒体数据。ECharts在可视化过程中所涉及的四种基本数据集类型分别是表格数据、网状数据、场数据和几何空间（spatial）数据，像集合、列表等也是常用的数据集类型。这些基本数据集类型又是由不同的数据类组合构成的，这里的数据类是指可视化中所涉及的数据种类，主要包括四种数据类，分别是数据项、数据项的属性、链接（links）、位置。数据项的属性又可分为类别型和有序型两种，其中有序型又进一步细分为序数型和数值型，下面将分别介绍数据类，数据集类型，以及属性类型。&lt;/p&gt;

&lt;h3 id=&quot;数据类&quot;&gt;数据类&lt;/h3&gt;

&lt;p&gt;本文主要讨论ECharts中所涉及的四种基本数据类，分别是数据项、数据项的属性、链接、位置。数据项是指一个独立的实体，如关系数据表中的一行，或网络中的一个节点；属性是数据项的某个可被观测的特性，如年龄，性别等；链接是指数据项之间的关系，该数据类型在网状关系型数据集中用的比较多；位置是地理空间数据类型，指代二维或三维空间中的某个具体位置；下图展示了四种不同的数据集类型所包含的数据类。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-03-15-echarts-dataAbstraction-tutorial-datatypes.png&quot; alt=&quot;data&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;数据集类型&quot;&gt;数据集类型&lt;/h3&gt;

&lt;p&gt;数据集是指为了分析而收集的任何信息，数据集包括数据表，网状数据，场数据（本文主要关注信息可视化，而场数据主要应用于科学可视化，因而在此不作介绍）以及几何空间数据这四种基本类型，而现实世界中的数据集一般是由这四个基本类型中的一个或多个组合而成的。下图展示了四种不同数据集类型具体的内部结构。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-03-15-echarts-dataAbstraction-tutorial-dataset.png&quot; alt=&quot;data&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;数据表&quot;&gt;数据表&lt;/h4&gt;

&lt;p&gt;数据表是常用的数据集形式，由行和列组成。对于简单的扁平表格来说，每一行代表一个数据项，每一列代表一个属性，表格中的每一个单元格是由行号和列号索引的，保存着某个数据项的某个属性值；多维数据表在数据仓库中用的比较多，具有复杂的结构以及复杂的索引机制，一般来说，简单扁平表格至多具有一个键属性（key attribute），而多维表格具有多个键属性。&lt;/p&gt;

&lt;h4 id=&quot;网状数据&quot;&gt;网状数据&lt;/h4&gt;

&lt;p&gt;网状数据主要用来表明数据项之间具有某种关系，在网状数据中数据项通常被称为节点，两个节点之间的关系被称为链接，也就是网络中的边，并且节点和链接都可以拥有与之相关联的属性。树是一种具有层次结构的特殊类型网络数据，与一般网络数据相比，树没有回路，每一个子节点都对应唯一的一个父节点。&lt;/p&gt;

&lt;h4 id=&quot;几何空间spatial数据&quot;&gt;几何空间（spatial）数据&lt;/h4&gt;

&lt;p&gt;几何空间结构数据通过明确的几何空间位置指定数据项的形状信息，这些数据项可以是空间中的点、一维的直线或曲线、二维的平面或区域，以及三维的立方体。空间数据在不同的度量尺度上具有层级结构。这种层级结构要么是原始数据集固有的，要么是从原始数据集派生出来的。
可视化中的数据主要以两种形式存在，一种是静态的数据文件，一种是动态的数据流。静态的数据文件是指可以同时获得完整的数据文件，而动态的数据流是指数据在不断的更新和变化。&lt;/p&gt;

&lt;h3 id=&quot;属性类型&quot;&gt;属性类型&lt;/h3&gt;

&lt;p&gt;属性类型主要分为类别型和有序型两种，有序型又可进一步分为序数型和数值型。有序型数据的排列方向有三种，分别是单向型，有公共零点的双向型，以及环状周期型，如下图所示，除此之外，属性也可能有层级结构。
类别型属性是指名称上的不同，属性的值之间没有明确的排序，例如喜欢的球类运动包括足球、篮球、排球等。虽然类别型属性内部没有明确的排序，但任意外部的排序机制可以被应用在类别型属性上，如将球类运动的名字按字母顺序排列。
有序型属性包括序数型属性和数值型属性，所有有序型属性都有隐含的排列顺序。对于序数型属性，如小中大，虽然我们不能对它进行完全的算术运算，但在属性的内部有明确定义的顺序，如大减去中并不是有意义的概念，但我们知道中介于大和小之间。数值属性与序数属性不同，它具有大小和量级的明确度量，并且支持算术比较，一般以整数和实数形式存在，如76米减去34米是个有意义的数值，并且它们之间的差是可以被度量的，像温度、高度、长度等都是数值属性。
有序型数据可以是单向的有序序列，比如人的年龄，只能往一个方向递增，也可以是有公共零点的对向序列，如温度。有序型数据也可以是环状周期的，如时间相关的属性。
在单个属性内部或者多个属性之间可能具有层级结构，如北京一年的交通事故数量，这是一个时间序列数据，具有时间属性，可以分层级聚合，可以分别按周、月、年聚合，在不同的时间聚合尺度下可能会发现数据集中有趣的模式。除了时间属性之外，地理空间数据也具有层级结构，如可以细分到省、市、县等。&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://echarts.baidu.com/blog/images/post/2017-03-15-echarts-dataAbstraction-tutorial-attribute.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;总结&quot;&gt;总结&lt;/h2&gt;
&lt;p&gt;本文简要讨论了可视化中的数据，从数据的种类、数据集的类型以及属性的类型这三个角度阐述了可视化中需要可视表达的数据信息。&lt;/p&gt;

&lt;h4 id=&quot;参考文献&quot;&gt;参考文献&lt;/h4&gt;

&lt;p&gt;[1] Tamara Munzner.Visualization Analysis and Design. CRC Press, 2014.&lt;/p&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="可视化" /><category term="教程" /><summary>当下随着大数据热潮的到来，数据可视化作为一个新兴的领域，受到了学术界和工业界的重视。从可视分析、数据新闻到商业报表，各个领域都在越来越多的使用它。既然是数据可视化，说明数据是主体，可视化只是将数据以可视的形式表达的手段。接下来小编就与大家一起揭开可视化中数据的面纱，一探究竟。</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-03-15-echarts-dataAbstraction-tutorial-dataset.png&quot;}" /></entry><entry><title>ECharts 水球图教程</title><link href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial.html" rel="alternate" type="text/html" title="ECharts 水球图教程" /><published>2017-02-21T00:00:00+08:00</published><updated>2017-02-21T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial.html">&lt;p&gt;水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的&lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill&quot;&gt;水球图插件&lt;/a&gt;使你能够通过非常简单的配置，实现酷炫的数据展示效果。&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=liquidfill-basic&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;那么，今天我们就一起来学习一下，如何使用 ECharts 水球图。&lt;/p&gt;

&lt;h2 id=&quot;第一步引入-javascript-文件&quot;&gt;第一步：引入 JavaScript 文件&lt;/h2&gt;

&lt;p&gt;ECharts 的水球图是一个&lt;em&gt;插件&lt;/em&gt;类型的图表。这意味着，在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时，需要在引入 &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts.js&lt;/code&gt; 之后，另外引入水球图对应的 &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts-liquidfill.js&lt;/code&gt;，可以在 &lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill/tree/gh-pages/dist&quot;&gt;GitHub&lt;/a&gt; 找到最新版本。&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;echarts.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;echarts-liquidfill.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// 使用水球图的代码&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&quot;第二步指定-dom-元素作为图表容器&quot;&gt;第二步：指定 DOM 元素作为图表容器&lt;/h2&gt;

&lt;p&gt;和创建 ECharts 的其他图表一样，我们需要指定 DOM 中的一个有高度和宽度的元素作为图表的容器——也就是图表将会绘制的位置。&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;liquidfill-chart&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;style=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;width=100%; height = 400px&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;传入该 DOM 元素，使用 ECharts 初始化图表：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;chart&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;echarts&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;init&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'liquidfill-chart'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&quot;第三步设置水球图参数&quot;&gt;第三步：设置水球图参数&lt;/h2&gt;

&lt;p&gt;和其他 ECharts 图表一样，水球图提供将系列的 &lt;code class=&quot;highlighter-rouge&quot;&gt;type&lt;/code&gt; 指定为 &lt;code class=&quot;highlighter-rouge&quot;&gt;'liquidFill'&lt;/code&gt;（注意大小写）来表明这是一个水球图类型。&lt;/p&gt;

&lt;p&gt;一个简单的配置项可以是：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;chart&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setOption&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;这样，就能得到文章开头的水球图效果了：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=liquidfill-basic&quot;&gt;&lt;/iframe&gt;

&lt;blockquote&gt;
  &lt;p&gt;如果发现图表没有正确显示，你可以检查以下几种可能：&lt;/p&gt;

  &lt;ul&gt;
    &lt;li&gt;JS 文件是否正确加载；&lt;/li&gt;
    &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;echarts&lt;/code&gt; 变量是否存在；&lt;/li&gt;
    &lt;li&gt;控制台是否报错（如果报错显示 &lt;code class=&quot;highlighter-rouge&quot;&gt;liquidFill&lt;/code&gt; 系列不存在，则很可能 &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts-liquidfill.js&lt;/code&gt; 没有正确加载）；&lt;/li&gt;
    &lt;li&gt;DOM 元素在 &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts.init&lt;/code&gt; 的时候是否有高度和宽度。&lt;/li&gt;
  &lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;可以发现，在上面的代码中，我们只指定了图表类型为 &lt;code class=&quot;highlighter-rouge&quot;&gt;'liquidFill'&lt;/code&gt;，以及把数据设置为 &lt;code class=&quot;highlighter-rouge&quot;&gt;[0.6, 0.5, 0.4, 0.3]&lt;/code&gt;（对应生成的四个波浪），而其他的参数都是预设的。&lt;/p&gt;

&lt;p&gt;即使不配置很多参数，预设的参数也可以使你获得一个优雅的水球图效果。而如果有特定的需求，ECharts 水球图又支持非常高度定制的效果。下面我们具体说明如何定制化你的水球图。&lt;/p&gt;

&lt;h2 id=&quot;第四步定制化水球图&quot;&gt;第四步：定制化水球图&lt;/h2&gt;

&lt;p&gt;水球图支持非常高度定制化的需求，包括颜色（&lt;code class=&quot;highlighter-rouge&quot;&gt;color&lt;/code&gt;）、大小（&lt;code class=&quot;highlighter-rouge&quot;&gt;radius&lt;/code&gt;）、波的振幅（&lt;code class=&quot;highlighter-rouge&quot;&gt;amplitude&lt;/code&gt;）、波长（&lt;code class=&quot;highlighter-rouge&quot;&gt;waveLength&lt;/code&gt;）、相位（&lt;code class=&quot;highlighter-rouge&quot;&gt;phase&lt;/code&gt;）、周期（&lt;code class=&quot;highlighter-rouge&quot;&gt;period&lt;/code&gt;）、移动方向（&lt;code class=&quot;highlighter-rouge&quot;&gt;direction&lt;/code&gt;）、形状（&lt;code class=&quot;highlighter-rouge&quot;&gt;shape&lt;/code&gt;）、动画（&lt;code class=&quot;highlighter-rouge&quot;&gt;waveAnimation&lt;/code&gt;）等等，完整的配置项参数参见&lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill#api&quot;&gt;水球图 API&lt;/a&gt;。文档有针对每个配置项的详细说明，这里我们来介绍一些重要的参数。&lt;/p&gt;

&lt;h3 id=&quot;形状与动画&quot;&gt;形状与动画&lt;/h3&gt;

&lt;iframe style=&quot;width: 100%; height: 600px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xry0tUfcBe&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;除了默认的圆形（&lt;code class=&quot;highlighter-rouge&quot;&gt;'circle'&lt;/code&gt;）水球图，还可以将 &lt;code class=&quot;highlighter-rouge&quot;&gt;shape&lt;/code&gt; 设置为 ECharts &lt;em&gt;Symbol&lt;/em&gt; 的其他类型：&lt;code class=&quot;highlighter-rouge&quot;&gt;'rect'&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;'roundRect'&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;'triangle'&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;'diamond'&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;'pin'&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;'arrow'&lt;/code&gt;。甚至，使用 &lt;code class=&quot;highlighter-rouge&quot;&gt;'path://...'&lt;/code&gt; 的形式，为其&lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=liquidfill-echarts&quot;&gt;指定一个 SVG 路径&lt;/a&gt;，得到非常酷炫的效果：&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=liquidfill-echarts&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;通过将 &lt;code class=&quot;highlighter-rouge&quot;&gt;direction&lt;/code&gt; 设为 &lt;code class=&quot;highlighter-rouge&quot;&gt;'left'&lt;/code&gt; 或 &lt;code class=&quot;highlighter-rouge&quot;&gt;'right'&lt;/code&gt;，指定波浪的移动方向，或者设为 &lt;code class=&quot;highlighter-rouge&quot;&gt;'none'&lt;/code&gt; 表示静止。&lt;/p&gt;

&lt;p&gt;上面的例子完整的配置项代码为：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'40%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'diamond'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;direction&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'left'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'40%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'rect'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'40%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'roundRect'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;backgroundStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;borderColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#156ACF'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;borderWidth&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'rgba(0, 0, 0, 0.4)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowBlur&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;20&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;waveAnimation&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// 禁止左右波动&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'50%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'pin'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;amplitude&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;waveAnimation&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;backgroundStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'rgba(0, 0, 0, 0.4)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowBlur&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;20&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h3 id=&quot;单个波的配置&quot;&gt;单个波的配置&lt;/h3&gt;

&lt;p&gt;除了对所有水波做的设置之外，每个水波可以进行单独的配置。和 ECharts 的其他配置项一样，对单个数据的配置项将覆盖整个系列的配置项。&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xry6CHNCVl&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;在这个例子中，我们将第二条水波设为红色，并且改变其移动方向。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;direction&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'left'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;itemStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;normal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'red'&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;可以发现，原先 &lt;code class=&quot;highlighter-rouge&quot;&gt;data&lt;/code&gt; 中的一项是一个数字，而在需要做特殊定制的数据中，我们将其设置为一个对象，&lt;code class=&quot;highlighter-rouge&quot;&gt;value&lt;/code&gt; 值是原先的数字，其他配置项将覆盖系列配置项的值。&lt;/p&gt;

&lt;h3 id=&quot;文字显示&quot;&gt;文字显示&lt;/h3&gt;

&lt;p&gt;水球图中间的文字有个酷炫的效果，在水波和背景前的文字颜色是不同的，可以通过 &lt;code class=&quot;highlighter-rouge&quot;&gt;insideColor&lt;/code&gt; 设置水波处的文字颜色，&lt;code class=&quot;highlighter-rouge&quot;&gt;color&lt;/code&gt; 设置背景处的文字颜色。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'80%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.45&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;normal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;textStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'red'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;insideColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'yellow'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;fontSize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;50&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xHyUvV_tFe&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;图表中间默认显示百分比数据，如果你需要将其设置为其他文字内容，可以通过 &lt;code class=&quot;highlighter-rouge&quot;&gt;formatter&lt;/code&gt; 指定，这与 ECharts 的其他格式化函数也是相同的。&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;formatter&lt;/code&gt; 可以是一个字符串，其中 &lt;code class=&quot;highlighter-rouge&quot;&gt;'{a}'&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;'{b}'&lt;/code&gt;、&lt;code class=&quot;highlighter-rouge&quot;&gt;'{c}'&lt;/code&gt; 会被分别替换成系列名称、数据名称、数据值。&lt;/p&gt;

&lt;p&gt;如：&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'Liquid Fill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'First Data'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;normal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;formatter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'{a}\n{b}\nValue: {c}'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;textStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;fontSize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;28&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xHk5831cHg&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;此外，&lt;code class=&quot;highlighter-rouge&quot;&gt;formatter&lt;/code&gt; 也可以是一个函数，以下代码能得到和上面字符串形式同样的效果。&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;formatter&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;seriesName&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'\n'&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'\n'&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'Value:'&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&quot;小结&quot;&gt;小结&lt;/h2&gt;

&lt;p&gt;以上，我们介绍了 ECharts 水球图的一些基本用法，希望能够给大家启发，创作出更多波涛汹涌的作品。&lt;/p&gt;

&lt;p&gt;更完整的配置项请参考 GitHub 上&lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill&quot;&gt;详细的文档&lt;/a&gt;，或者到 ECharts Gallery 上查看其它&lt;a href=&quot;http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidFill~author=all&quot;&gt;水球图作品&lt;/a&gt;。&lt;/p&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="扩展" /><category term="教程" /><summary>水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的水球图插件使你能够通过非常简单的配置，实现酷炫的数据展示效果。</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-02-21-echarts-liquidfill-chart-tutorial.gif&quot;}" /></entry><entry><title>ECharts Liquid-fill Chart Tutorial</title><link href="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html" rel="alternate" type="text/html" title="ECharts Liquid-fill Chart Tutorial" /><published>2017-02-21T00:00:00+08:00</published><updated>2017-02-21T00:00:00+08:00</updated><id>http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en</id><content type="html" xml:base="http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial-en.html">&lt;p&gt;Liquid-fill is a type of charts that are suitable for displaying single percentage data. &lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill&quot;&gt;ECharts liquid-fill Chart&lt;/a&gt; provides fancy presentation of percentage data through single but power configurations.&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=liquidfill-basic&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;Now, let’s learn how to use it.&lt;/p&gt;

&lt;h2 id=&quot;step-1-including-javascript-files&quot;&gt;Step 1: Including JavaScript Files&lt;/h2&gt;

&lt;p&gt;ECharts liquid-fill chart is a &lt;em&gt;plugin&lt;/em&gt; 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 &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts-liquidfill.js&lt;/code&gt; after &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts.js&lt;/code&gt;, the former of which can be downloaded at &lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill/tree/gh-pages/dist&quot;&gt;GitHub&lt;/a&gt;.&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;echarts.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;echarts-liquidfill.js&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;

&lt;span class=&quot;nt&quot;&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// your code here&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&quot;step-2-assign-dom-element-as-chart-container&quot;&gt;Step 2: Assign DOM Element As Chart Container&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;liquidfill-chart&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;style=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;width=100%; height = 400px&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;Use the DOM element to init chart.&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;chart&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;echarts&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;init&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'liquidfill-chart'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&quot;step-3-configure-the-chart&quot;&gt;Step 3: Configure The Chart&lt;/h2&gt;

&lt;p&gt;We set the chart series &lt;code class=&quot;highlighter-rouge&quot;&gt;type&lt;/code&gt; to be &lt;code class=&quot;highlighter-rouge&quot;&gt;'liquidFill'&lt;/code&gt; to use it.&lt;/p&gt;

&lt;p&gt;A simple configuration item may be:&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;chart&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setOption&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;Thus, we can get the liquid-fill chart at the beginning of this post.&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=liquidfill-basic&quot;&gt;&lt;/iframe&gt;

&lt;blockquote&gt;
  &lt;p&gt;If the chart doesn’t display as expected, you may check the following things:&lt;/p&gt;

  &lt;ul&gt;
    &lt;li&gt;Whether JS files are loaded correctly;&lt;/li&gt;
    &lt;li&gt;Whether &lt;code class=&quot;highlighter-rouge&quot;&gt;echarts&lt;/code&gt; variable exists;&lt;/li&gt;
    &lt;li&gt;Whether there are error messages in Console;&lt;/li&gt;
    &lt;li&gt;Whether the DOM element has width and height when init.&lt;/li&gt;
  &lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;As you can see, we only assigned series type to be &lt;code class=&quot;highlighter-rouge&quot;&gt;'liquidFill'&lt;/code&gt;, and set the data to be &lt;code class=&quot;highlighter-rouge&quot;&gt;[0.6, 0.5, 0.4, 0.3]&lt;/code&gt;, which generate the four waves in the chart. Other parameters are all by default.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2 id=&quot;step-4-customerize-the-chart&quot;&gt;Step 4: Customerize The Chart&lt;/h2&gt;

&lt;p&gt;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 &lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill#api&quot;&gt;API&lt;/a&gt;. Here, we are going to introduces some important parameters.&lt;/p&gt;

&lt;h3 id=&quot;shape-and-animation&quot;&gt;Shape And Animation&lt;/h3&gt;

&lt;iframe style=&quot;width: 100%; height: 600px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xry0tUfcBe&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;Besides the default &lt;code class=&quot;highlighter-rouge&quot;&gt;'circle'&lt;/code&gt; shape, it also supports symbols like &lt;code class=&quot;highlighter-rouge&quot;&gt;'rect'&lt;/code&gt;, &lt;code class=&quot;highlighter-rouge&quot;&gt;'roundRect'&lt;/code&gt;, &lt;code class=&quot;highlighter-rouge&quot;&gt;'triangle'&lt;/code&gt;, &lt;code class=&quot;highlighter-rouge&quot;&gt;'diamond'&lt;/code&gt;, &lt;code class=&quot;highlighter-rouge&quot;&gt;'pin'&lt;/code&gt;, and &lt;code class=&quot;highlighter-rouge&quot;&gt;'arrow'&lt;/code&gt;. Even more, you can set it to be an &lt;a href=&quot;http://gallery.echartsjs.com/editor.html?c=liquidfill-echarts&quot;&gt;SVG path&lt;/a&gt; to get some fancy effect.&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 400px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=liquidfill-echarts&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;By setting &lt;code class=&quot;highlighter-rouge&quot;&gt;direction&lt;/code&gt; to be &lt;code class=&quot;highlighter-rouge&quot;&gt;'left'&lt;/code&gt; or &lt;code class=&quot;highlighter-rouge&quot;&gt;'right'&lt;/code&gt;, we may assign the moving direction of the wave. Or, we can set it to be &lt;code class=&quot;highlighter-rouge&quot;&gt;'none'&lt;/code&gt; for still.&lt;/p&gt;

&lt;p&gt;Full configuration of the above is:&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'40%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'diamond'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;direction&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'left'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'40%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'rect'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'40%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'roundRect'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'25%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;backgroundStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;borderColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'#156ACF'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;borderWidth&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'rgba(0, 0, 0, 0.4)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowBlur&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;20&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;waveAnimation&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// disable moving&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'50%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;shape&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'pin'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;center&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'75%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;amplitude&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;waveAnimation&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;show&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;backgroundStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'rgba(0, 0, 0, 0.4)'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;shadowBlur&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;20&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h3 id=&quot;configuration-for-a-single-wave&quot;&gt;Configuration For A Single Wave&lt;/h3&gt;

&lt;p&gt;Besides the configuration of the waves as introduced above, each single wave can have configuration to be overwritten.&lt;/p&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xry6CHNCVl&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;In this example, we set the second wave to be red, and changed its moving direction.&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;direction&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'left'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;itemStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;normal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'red'&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;You may notice that an item of the previous &lt;code class=&quot;highlighter-rouge&quot;&gt;data&lt;/code&gt; is a number, but for those to be configured, they are an object containing &lt;code class=&quot;highlighter-rouge&quot;&gt;value&lt;/code&gt;.&lt;/p&gt;

&lt;h2 id=&quot;label&quot;&gt;Label&lt;/h2&gt;

&lt;p&gt;Label of liquid-fill charts have a nice effect that the text colors before wave and background are different. &lt;code class=&quot;highlighter-rouge&quot;&gt;insideColor&lt;/code&gt; can be used to set the text color before wave, and &lt;code class=&quot;highlighter-rouge&quot;&gt;color&lt;/code&gt; can be used to set the color before background.&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;radius&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'80%'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.45&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;normal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;textStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'red'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;insideColor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'yellow'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;fontSize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;50&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xHyUvV_tFe&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;Label displays percentage data by default. If you want to set it otherwise, you may use &lt;code class=&quot;highlighter-rouge&quot;&gt;formatter&lt;/code&gt; to do this. This is similar to other formatter of ECharts.&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;formatter&lt;/code&gt; can be a string, in which &lt;code class=&quot;highlighter-rouge&quot;&gt;'{a}'&lt;/code&gt;, &lt;code class=&quot;highlighter-rouge&quot;&gt;'{b}'&lt;/code&gt;, &lt;code class=&quot;highlighter-rouge&quot;&gt;'{c}'&lt;/code&gt; will be replaced to be series name, data name, and data value.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;option&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;na&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'liquidFill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'Liquid Fill'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'First Data'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.6&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.5&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mf&quot;&gt;0.3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
        &lt;span class=&quot;na&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;na&quot;&gt;normal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;formatter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'{a}\n{b}\nValue: {c}'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;na&quot;&gt;textStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
                    &lt;span class=&quot;na&quot;&gt;fontSize&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;28&lt;/span&gt;
                &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;}]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;iframe style=&quot;width: 100%; height: 350px&quot; src=&quot;http://gallery.echartsjs.com/view.html?cid=xHk5831cHg&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;Besides, &lt;code class=&quot;highlighter-rouge&quot;&gt;formatter&lt;/code&gt; can also be a function. The following code provides the same effect as before.&lt;/p&gt;

&lt;div class=&quot;language-js highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;formatter&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;seriesName&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'\n'&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'\n'&lt;/span&gt;
        &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'Value:'&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;param&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;

&lt;p&gt;In this post, we introduced how to use ECharts liquid-fill charts. Hopefully, you can be inspired by it and create more interesting works.&lt;/p&gt;

&lt;p&gt;Full document please refer to &lt;a href=&quot;https://github.com/ecomfe/echarts-liquidfill&quot;&gt;GitHub&lt;/a&gt;. And you may go to &lt;a href=&quot;http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidFill~author=all&quot;&gt;ECharts Gallery&lt;/a&gt; to view more liquid-fill charts.&lt;/p&gt;</content><author><name>{&quot;dingding&quot;=&gt;{&quot;name&quot;=&gt;&quot;王俊婷&quot;, &quot;title&quot;=&gt;&quot;ECharts 设计师&quot;, &quot;web&quot;=&gt;&quot;https://www.behance.net/wjtjiayouac8aa&quot;, &quot;image&quot;=&gt;&quot;http://echarts.baidu.com/images/people/王俊婷.png&quot;, &quot;desc&quot;=&gt;&quot;喜欢神游的女子一枚，又名王叮叮&quot;}}</name></author><category term="en" /><category term="extension" /><category term="tutorial" /><summary>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.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://echarts.baidu.com/blog{&quot;feature&quot;=&gt;&quot;post/2017-02-21-echarts-liquidfill-chart-tutorial.gif&quot;}" /></entry></feed>