| <!doctype html> |
| <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]--> |
| <!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]--> |
| <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]--> |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]--> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts GL 1.0 alpha 发布 </title> |
| <meta name="description" content="ECharts GL （原 ECharts-X）发布 1.0 alpha，ECharts GL 是 ECharts 的 WebGL 扩展，其中提供了三维散点图，飞线图，柱状图，曲面图，地球等多种三维可视化方式。并且增加 scatterGL，graphGL系列类型用于二维的散点图，关系图的加速绘制和布局。"> |
| <meta name="keywords" content="新版本, 扩展, echarts-gl"> |
| |
| |
| |
| <!-- Open Graph --> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:type" content="article"> |
| <meta property="og:title" content="ECharts GL 1.0 alpha 发布"> |
| <meta property="og:description" content="ECharts GL （原 ECharts-X）发布 1.0 alpha，ECharts GL 是 ECharts 的 WebGL 扩展，其中提供了三维散点图，飞线图，柱状图，曲面图，地球等多种三维可视化方式。并且增加 scatterGL，graphGL系列类型用于二维的散点图，关系图的加速绘制和布局。"> |
| <meta property="og:url" content="http://echarts.baidu.com/blog/2017/04/12/echarts-gl-alpha.html"> |
| <meta property="og:site_name" content=""> |
| |
| |
| |
| |
| |
| <link rel="canonical" href="http://echarts.baidu.com/blog/2017/04/12/echarts-gl-alpha.html"> |
| <link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed"> |
| |
| <!-- http://t.co/dKP3o1e --> |
| <meta name="HandheldFriendly" content="True"> |
| <meta name="MobileOptimized" content="320"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <!-- For all browsers --> |
| <link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css"> |
| |
| <meta http-equiv="cleartype" content="on"> |
| |
| <!-- Load Modernizr --> |
| <script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script> |
| |
| <!-- Icons --> |
| <!-- 16x16 --> |
| <link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico"> |
| <!-- 32x32 --> |
| <link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png"> |
| <!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices --> |
| <link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png"> |
| <!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini --> |
| <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png"> |
| <!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch --> |
| <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png"> |
| <!-- 144x144 (precomposed) for iPad 3rd and 4th generation --> |
| <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png"> |
| |
| </head> |
| |
| <body id="post" class="feature"> |
| |
| <!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]--> |
| <nav class="navbar navbar-default navbar-fixed-top"> |
| <div class="container-fluid"> |
| <div class="navbar-header"> |
| <button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a href="http://echarts.baidu.com/index.html" class="navbar-brand"> |
| <img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo"> |
| </a> |
| </div> |
| <div id="navbar-collapse" class="collapse navbar-collapse"> |
| <ul class="nav navbar-nav navbar-left"> |
| <li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li> |
| <li id="nav-doc" class="dropdown"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/feature.html">特性</a></li> |
| <li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li> |
| <li><a href="http://echarts.baidu.com/api.html">API</a></li> |
| <li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li> |
| <li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li> |
| <li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li> |
| </ul> |
| </li> |
| <li id="nav-download" class="dropdown"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/download.html">下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li> |
| <li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li> |
| </ul> |
| </li> |
| <li id="nav-examples"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li> |
| <li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li> |
| </ul> |
| </li> |
| <li id="nav-community" class="active"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://gallery.echartsjs.com">GALLERY</a></li> |
| <li><a href="http://echarts.baidu.com/blog">博客</a></li> |
| </ul> |
| </li> |
| <li id="nav-tool"> |
| <a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a> |
| <ul class="dropdown-menu"> |
| <li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li> |
| <li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li> |
| <li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li> |
| </ul> |
| </li> |
| <li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li> |
| </ul> |
| <ul class="nav navbar-nav navbar-right"> |
| <li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li> |
| <li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li> |
| <li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
| |
| |
| |
| <div class="entry-header"> |
| |
| <div class="entry-image"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/buildings2.jpg" alt="ECharts GL 1.0 alpha 发布"> |
| </div><!-- /.entry-image --> |
| </div><!-- /.entry-header --> |
| |
| |
| <div id="post-main" role="main"> |
| <article class="hentry"> |
| <header class="header-title"> |
| <div class="header-title-wrap"> |
| <h1 class="entry-title">ECharts GL 1.0 alpha 发布</h1> |
| <h2><span class="entry-date date published"><time datetime="2017-04-12T00:00:00+08:00">2017-04-12</time></span></h2> |
| |
| </div><!-- /.header-title-wrap --> |
| </header> |
| <div class="entry-content"> |
| <p>距离 ECharts-X 最近一个版本已经过去了两年多时间，期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本，是不是不再维护了等等，对于这些问题我们只能回答我们还没准备好。尽管这两年时间 ECharts X 没什么动静，但是其它的工作，像 ECharts 3 的架构大改动和后续版本的迭代升级，以及其它 WebGL 产品的开发，都是对新版本架构和技术上的积累。现在我们终于可以说我们准备得差不多了，ECharts-X 的下一代，ECharts-GL 发布 1.0 alpha。</p> |
| |
| <p><a href="https://github.com/ecomfe/echarts-gl">ECharts GL</a> 是 ECharts 的 WebGL 扩展，其中提供了三维散点图，飞线图，柱状图，曲面图，地球等多种三维可视化方式。并且增加 <code class="highlighter-rouge">scatterGL</code>，<code class="highlighter-rouge">graphGL</code> 系列类型用于二维的散点图，关系图的加速绘制和布局。</p> |
| |
| <p>先来一张 Gallery 上 <a href="https://github.com/ecomfe/echarts-gl">ECharts GL</a> 的示例图片集。</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2017-04-12/demos.jpg" alt="" /></p> |
| |
| <p>下面会一一介绍 ECharts GL 的特性，如果你已经等不及想尝鲜了，可以直接在 Gallery 上查看编辑 ECharts GL 的示例。</p> |
| |
| <ul> |
| <li> |
| <p><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 的 Gallery 示例</a></p> |
| </li> |
| <li> |
| <p><a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html">GL 的配置项手册</a></p> |
| </li> |
| </ul> |
| |
| <h2 id="一更便捷的安装和引入">一、更便捷的安装和引入</h2> |
| |
| <p>大家用过 ECharts-X 的话，或许曾被其繁琐的引入方式困扰过，甚至可能因为尝试了很多次都没办法正确引入而选择放弃。</p> |
| |
| <p>ECharts-GL 中大大简化了引入方式，在标签引入的环境下。你可以从 <a href="https://github.com/ecomfe/echarts-gl/tree/master/dist">GitHub</a> 上获取 ECharts GL 后直接引入构建好的文件.</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="o"><</span><span class="nx">script</span> <span class="nx">data</span><span class="o">-</span><span class="nx">src</span><span class="o">=</span><span class="s2">"echarts/dist/echarts.min.js"</span><span class="o">><</span><span class="sr">/script</span><span class="err">> |
| </span><span class="o"><</span><span class="nx">script</span> <span class="nx">data</span><span class="o">-</span><span class="nx">src</span><span class="o">=</span><span class="s2">"echarts-gl/dist/echarts-gl.min.js"</span><span class="o">><</span><span class="sr">/script</span><span class="err">> |
| </span></code></pre> |
| </div> |
| |
| <p>如果你用 webpack 和 npm 作为开发环境。也只需要在 <code class="highlighter-rouge">npm install echarts-gl</code> 之后再<code class="highlighter-rouge">require</code>引入。</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">require</span><span class="p">(</span><span class="s1">'echarts-gl'</span><span class="p">);</span> |
| </code></pre> |
| </div> |
| |
| <h2 id="二更多三维可视化类型">二、更多三维可视化类型。</h2> |
| |
| <p>除了老版本的<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#globe">地球</a>用于地理数据可视化，ECharts GL 新增了三维的<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#grid3D">笛卡尔坐标系</a>、<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#geo3D">地理坐标系</a>，并且在这些新的三维坐标系基础上提供了六个新的系列类型，包括 <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatter3D">散点图 scatter3D</a>、<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-line3D">折线图 line3D</a>、<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-bar3D">柱状图 bar3D</a>、<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface">曲面图 surface</a>、<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-lines3D">飞线图 lines3D</a>以及<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-map3D">地图 map3D</a></p> |
| |
| <p>这些新的系列类型以及组件类型都是使用 WebGL 绘制，因此能够保证高质量，高性能的展示出你想要的三维可视化作品。</p> |
| |
| <p>同时我们在配置项的设计上尽量沿用了 ECharts 的风格，保证简洁统一。比如下面这个配置就能画出一个简单的三维散点图。</p> |
| |
| <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">grid3D</span><span class="p">:</span> <span class="p">{},</span> |
| <span class="na">xAxis3D</span><span class="p">:</span> <span class="p">{},</span> |
| <span class="na">yAxis3D</span><span class="p">:</span> <span class="p">{},</span> |
| <span class="na">zAxis3D</span><span class="p">:</span> <span class="p">{},</span> |
| <span class="na">series</span><span class="p">:</span> <span class="p">[{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'scatter3D'</span><span class="p">,</span> |
| <span class="na">symbolSize</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span> |
| <span class="na">data</span><span class="p">:</span> <span class="p">[[</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">],</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">],</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">]],</span> |
| <span class="na">itemStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">opacity</span><span class="p">:</span> <span class="mi">1</span> |
| <span class="p">}</span> |
| <span class="p">}]</span> |
| <span class="p">};</span> |
| </code></pre> |
| </div> |
| <blockquote> |
| <p>这里跟 ECharts 有点区别，GL 中尝试了更扁平的 option 设计，使用场景更少的 emphasis 属性将会单独移出来，而原先 normal 这个层级将被移除，itemStyle 下的属性相当于原先 itemStyle.normal 下的属性。如果这次尝试没问题，接下来 ECharts 新的大版本也会使用这种更扁平的设计。 |
| 具体配置结构见 <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatter3D.itemStyle">https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatter3D.itemStyle</a></p> |
| </blockquote> |
| |
| <p>大部分 GL 中的三维组件和系列都会带上<code class="highlighter-rouge">3D</code>后缀以便跟 ECharts 中的组件系列区分开。</p> |
| |
| <p>下面这个更复杂点的例子使用<code class="highlighter-rouge">scatter3D</code>可视化了三维的 <a href="https://en.wikipedia.org/wiki/Simplex_noise">Simplex Noise</a></p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xBkWoZOjTe"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/simplex-noise.jpg" alt="" /> |
| </a></p> |
| |
| <p>除了三维的散点图，你也可以在笛卡尔坐标系上画 <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-line3D">折线图 line3D</a>，<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-bar3D">柱状图 bar3D</a>，<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface">曲面图 surface</a>。</p> |
| |
| <p>其中 <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-line3D">line3D</a>，<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-bar3D">bar3D</a> 也是对 ECharts 中的折线图，柱状图扩展到了三维的版本。而 <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface">surface</a> 是 ECharts GL 里全新的三维图。</p> |
| |
| <p>你可以像下面这样用 <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-surface">surface</a> 画函数曲面。</p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xHkcYXm9pe"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/surface.png" alt="" /> |
| </a></p> |
| |
| <p>也可以像这样用曲面去可视化像图片像素这样的数据</p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xBk5PSvqpx"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/image-pixels.jpg" alt="" /> |
| </a></p> |
| |
| <p>甚至你可以用参数方程构建出下面这样有趣的参数曲面</p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xHku9OE96l"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/parametric-surface.jpg" alt="" /> |
| </a></p> |
| |
| <p>除了三维笛卡尔坐标系，像柱状图，散点图也可以显示在<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#globe">地球</a>，<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#geo3D">三维地理坐标系</a>上。</p> |
| |
| <p>比如下面这个例子就是在地球上通过散点图绘制世界人口。</p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xS1moC0s6x"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-2.jpg" style="width:100%;" alt="" /> |
| </a></p> |
| |
| <p>你可以大胆的组合不同坐标系和系列，制作出更具创造力的可视化作品！</p> |
| |
| <h2 id="三高品质的画面">三、高品质的画面</h2> |
| |
| <p>在很多场景里，高品质的画面是一个很重要的需求，例如：</p> |
| |
| <ul> |
| <li> |
| <p>在大屏中，需要提供炫酷的，一下能够抓住人眼球的特效。</p> |
| </li> |
| <li> |
| <p>生成需要放在文章或者 PPT 中的截图，需要高质量的渲染，不能有廉价三维效果的感觉。</p> |
| </li> |
| </ul> |
| |
| <p>ECharts GL 提供了一系列诸如<a href="http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.depthOfField">景深</a>，<a href="http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.bloom">光晕</a>，<a href="http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.colorCorrection">颜色纠正</a>，<a href="http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.postEffect.SSAO">阴影</a>，<a href="http://localhost/echarts-doc/public/cn/option-gl.html#geo3D.light.ambientCubemap">基于物理的渲染</a> 等等开箱即用的配置项让你去方便的提升自己可视化作品的渲染效果。</p> |
| |
| <p>在这些配置项的基础上，你可以实现这样带景深的微缩模型的效果：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-1.jpg" style="width:100%;" alt="" /></p> |
| |
| <p>或者这样的基于物理渲染的金属零件的效果：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-3.jpg" style="width:100%;" alt="" /></p> |
| |
| <p>或者这样 Bling Bling 的影视广告特效：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-5.jpg" style="width:100%;" alt="" /></p> |
| |
| <p>又或者这样的大规模建筑群：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2017-04-12/high-quality-4.jpg" style="width:100%;" alt="" /></p> |
| |
| <p>想要了解更多的效果，可以逛逛我们的<a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">示例集</a></p> |
| |
| <h2 id="四二维可视化的加速">四、二维可视化的加速</h2> |
| |
| <p>除了三维的可视化，ECharts GL 还内置 <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatterGL">scatterGL</a>, <a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatterGL">graphGL</a> 两个系列，能够大幅度的优化常见的二维散点图和关系图的绘制和布局性能。</p> |
| |
| <p>散点图也是比较常见的会有大数据量的系列类型。ECharts 尽管能绘制像微博签到图那样上十万的散点图，但是很难做到流畅的交互。拖拽、缩放等操作都会有卡顿。</p> |
| |
| <p>在 ECharts GL 里利用 WebGL 加速绘制后，可以无压力得绘制和实时的交互十万个数据的散点图了。</p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xHJkXhU9Tg"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/weibo-checkin.jpg" alt="" /></a></p> |
| |
| <p>而且实现这一切只需要把原先的<code class="highlighter-rouge">scatter</code>类型改为<code class="highlighter-rouge">scatterGL</code>类型，不需要再做其它的改动！</p> |
| |
| <p>对于<a href="https://ecomfe.github.io/echarts-doc/public/cn/option-gl.html#series-scatterGL">关系图 graphGL</a>除了绘制上有加速之外，我们还在 WebGL 中实现了<a href="https://github.com/gephi/gephi/wiki/Force-Atlas-2">力引导布局</a>。在高端的显卡上 GPU 布局相对于 CPU 布局甚至能有上百倍的性能提升。</p> |
| |
| <p>下面是在<code class="highlighter-rouge">GTX1070</code>和<code class="highlighter-rouge">i7 4GHz</code>的电脑中对一个<code class="highlighter-rouge">两万</code>个节点，近<code class="highlighter-rouge">五万</code>条边的关系图一次布局的迭代的性能对比。</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2017-04-12/gpu-layout-perf.png" width="400px" alt="" /></p> |
| |
| <p>以及对这个关系图实时布局的视频。</p> |
| |
| <video controls="" width="100%" src="http://echarts.baidu.com/blog/images/post/2017-04-12/graphGL.mp4"></video> |
| |
| <p><code class="highlighter-rouge">2500</code>个节点的网格图使用 GPU 布局的例子（只支持 PC 端）。</p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xrJchBL9ag"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/grid.jpg" alt="" /></a></p> |
| |
| <p>这里特别感谢 Gephi 提供了 Force Atlas2 这样在大规模关系数据上能够有稳定优良的布局结果的算法。</p> |
| |
| <h2 id="五与-echarts-交互组件的结合">五、与 ECharts 交互组件的结合</h2> |
| |
| <p>ECharts GL 作为一个扩展，并不是独立的，它提供的系列和组件能够和 ECharts 中的大部分组件组合使用。你可以使用 <a href="http://echarts.baidu.com/option.html#visualMap">visualMap</a> 组件对 GL 中的系列进行颜色，大小，不透明的编码，可以用 <a href="http://echarts.baidu.com/option.html#tooltip">tooltip</a> 组件显示 GL 中图形的数据信息，也可以用 <a href="http://echarts.baidu.com/option.html#legend">legend</a> 筛选出想要展示的系列等等。</p> |
| |
| <p>例如下面这个例子用 <a href="http://echarts.baidu.com/option.html#visualMap">visualMap</a> 组件对柱状图做了颜色的映射，而且能够通过控件筛选出区间内的数据</p> |
| |
| <p><a href="http://gallery.echartsjs.com/editor.html?c=xSyMekmcTx"> |
| <img src="http://echarts.baidu.com/blog/images/post/2017-04-12/visual-map.jpg" alt="" /></a></p> |
| |
| <p>当然除此之外，你也可以在一个实例里任意混搭使用 ECharts GL 的组件以及 ECharts 的组件。</p> |
| |
| <h2 id="六移动端兼容">六、移动端兼容</h2> |
| |
| <p>现在很多移动端的浏览器已经支持 WebGL 了，特别是像 iOS 系统对 WebGL 的扩展特性等支持得非常完善。所以用 ECharts GL 制作的大部分例子都能在 iOS 上流畅无压力的运行。在交互上 ECharts GL 也对移动端做了兼容处理，支持平移，双指缩放等等。</p> |
| |
| <p>如果你现在不是在手机上浏览这篇文章，可以稍后在手机上打开 <a href="http://gallery.echartsjs.com/">http://gallery.echartsjs.com/</a> 看看效果。</p> |
| |
| <p>下面是在 iPhone 6 上实时预览前面示例中参数曲面的效果。</p> |
| |
| <video controls="" width="100%" src="http://echarts.baidu.com/blog/images/post/2017-04-12/mobile.mp4"></video> |
| |
| <h2 id="更多">更多</h2> |
| |
| <p>ECharts GL 1.0 alpha 只是个开始，在正式版发布之前，我们还会对画面，交互的细节，动画，性能等等做更多的优化。大家使用过程中有任何的问题或者建议都可以在 GitHub 上跟我们反馈， |
| 我们也非常期待大家能够利用 ECharts GL 做出让我们想象不到的作品。</p> |
| |
| |
| <div class="entry-meta"> |
| <span class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">--> |
| <span class="term">新版本</span> |
| <!--</a>--> |
| |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#echarts-gl" title="Pages tagged echarts-gl" class="tag">--> |
| <span class="term">echarts-gl</span> |
| <!--</a>--> |
| |
| |
| </span> |
| </div> |
| |
| |
| </div><!-- /.entry-content --> |
| |
| <div class="container"> |
| <div class="read-more"> |
| <h3>更多相关信息</h3> |
| <div class="row"> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" title="在 ECharts GL 中绘制三维地图">在 ECharts GL 中绘制三维地图</a></h4> |
| <p>ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL 更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢？答案是肯定的，用户除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">--> |
| <span class="term">新版本</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#echarts-gl" title="Pages tagged echarts-gl" class="tag">--> |
| <span class="term">echarts-gl</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" title="ECharts v3.6 发布：自定义系列、极坐标柱状图">ECharts v3.6 发布：自定义系列、极坐标柱状图</a></h4> |
| <p>在 ECharts 新发布的 3.6 版本中，新增了自定义系列，能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">--> |
| <span class="term">新版本</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#echarts-gl" title="Pages tagged echarts-gl" class="tag">--> |
| <span class="term">echarts-gl</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="col-md-4"> |
| <div class="read-more-post"> |
| <h4><a href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html" title="ECharts 统计扩展教程">ECharts 统计扩展教程</a></h4> |
| <p>你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？——什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器——ECharts 统计扩展，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。</p> |
| <div class="tag-panel"> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#新版本" title="Pages tagged 新版本" class="tag">--> |
| <span class="term">新版本</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">--> |
| <span class="term">扩展</span> |
| <!--</a>--> |
| |
| <!--<a href="http://echarts.baidu.com/blog/tags/#echarts-gl" title="Pages tagged echarts-gl" class="tag">--> |
| <span class="term">echarts-gl</span> |
| <!--</a>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| </div> |
| </div> |
| </div> |
| |
| </article> |
| </div><!-- /#main --> |
| |
| <footer> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div> |
| <div id="efe-product" class="col-md-2 col-sm-4 pc"> |
| <h3>百度EFE更多产品</h3> |
| <ul id="efe-product"> |
| <li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li> |
| <li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li> |
| <li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li> |
| <li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li> |
| <li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li> |
| <li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3 col-md-offset-1 col-sm-4 pc"> |
| <h3>友情链接</h3> |
| <ul> |
| <li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li> |
| <li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li> |
| <li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3" id="footer-icon-panel"> |
| <div class="icon-panel"> |
| <a href="mailto:echarts@baidu.com" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-email.png"/> |
| </a> |
| <a href="https://twitter.com/EChartsJs" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-twitter.png"/> |
| </a> |
| <a href="http://weibo.com/u/5160877841" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-weibo.png"/> |
| </a> |
| <a href="https://github.com/ecomfe/echarts" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-github.png"/> |
| </a> |
| </div> |
| <div id="echarts-copyright">Ⓒ 2017 百度ECharts团队出品</div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script> |
| <script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script> |
| <script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script> |
| |
| |
| <script src="http://echarts.baidu.com/blog/assets/js/plugins/md-env.js"></script> |
| <script src="http://echarts.baidu.com/blog/assets/js/plugins/lazy-load.js"></script> |
| |
| |
| |
| <script> |
| var _hmt = _hmt || []; |
| (function() { |
| var hm = document.createElement("script"); |
| hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f"; |
| var s = document.getElementsByTagName("script")[0]; |
| s.parentNode.insertBefore(hm, s); |
| })(); |
| </script> |
| |
| |
| |
| </body> |
| </html> |
