Google Git
Sign in
apache / echarts-doc / refs/tags/4.5.0 / . / blog / 2017 / 05 / 09 / echarts-statistical-extension-tutorial.html
blob: 2834e6f45ff717fc6064d21ce51ef4735c6b356b [file] [log] [blame]
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>ECharts 统计扩展教程 </title>
<meta name="description" content="你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？——什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器——ECharts 统计扩展，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。">
<meta name="keywords" content="统计, 扩展, 教程">
<!-- Open Graph -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="ECharts 统计扩展教程">
<meta property="og:description" content="你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？——什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器——ECharts 统计扩展，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。">
<meta property="og:url" content="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html">
<meta property="og:site_name" content="">
<link rel="canonical" href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html">
<link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For all browsers -->
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css">
<meta http-equiv="cleartype" content="on">
<!-- Load Modernizr -->
<script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
<!-- Icons -->
<!-- 16x16 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png">
</head>
<body id="post" class="feature">
<!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://echarts.baidu.com/index.html" class="navbar-brand">
<img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo">
</a>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li>
<li id="nav-doc" class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/feature.html">特性</a></li>
<li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li>
<li><a href="http://echarts.baidu.com/api.html">API</a></li>
<li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li>
<li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li>
<li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li>
</ul>
</li>
<li id="nav-download" class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/download.html">下载</a></li>
<li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li>
<li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li>
<li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li>
</ul>
</li>
<li id="nav-examples">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li>
<li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li>
</ul>
</li>
<li id="nav-community" class="active">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://gallery.echartsjs.com">GALLERY</a></li>
<li><a href="http://echarts.baidu.com/blog">博客</a></li>
</ul>
</li>
<li id="nav-tool">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li>
<li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li>
<li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li>
</ul>
</li>
<li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li>
<li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li>
<li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li>
</ul>
</div>
</div>
</nav>
<div class="entry-header">
<div class="entry-image">
<img src="http://echarts.baidu.com/blog/images/post/2017-05-09-echarts-statistical-logarithmic-regression.png" alt="ECharts 统计扩展教程">
</div><!-- /.entry-image -->
</div><!-- /.entry-header -->
<div id="post-main" role="main">
<article class="hentry">
<header class="header-title">
<div class="header-title-wrap">
<h1 class="entry-title">ECharts 统计扩展教程</h1>
<h2><span class="entry-date date published"><time datetime="2017-05-09T00:00:00+08:00">2017-05-09</time></span></h2>
</div><!-- /.header-title-wrap -->
</header>
<div class="entry-content">
<h1 id="echarts-统计扩展教程">ECharts 统计扩展教程</h1>
<p>你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？—— 什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器 —— <a href="https://github.com/ecomfe/echarts-stat/">ECharts 统计扩展</a>，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 <a href="http://echarts.baidu.com/">ECharts</a> 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。下面我们就一起来学习一下这些功能。</p>
<h2 id="首先引入-javascript-文件">首先引入 JavaScript 文件</h2>
<p>如果大家不仅要对数据进行分析，还要将分析的结果呈现出来，那就需要在下载引入扩展文件的同时，下载引入 ECharts 文件。如下：</p>
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"echarts.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"ecStat.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script&gt;</span>
<span class="c1">//具体可视分析的代码</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre>
</div>
<p>除此之外，还需要指定一个具有高度和宽度的 DOM 元素，作为图表的容器，用来放置将被绘制的图表。如：</p>
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"main"</span> <span class="na">style=</span><span class="s">"width=100%; height=100%"</span><span class="nt">&gt;&lt;/div&gt;</span>
</code></pre>
</div>
<p>然后传入该 DOM 元素，初始化 ECharts 图表：</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">chart</span> <span class="o">=</span> <span class="nx">echarts</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'main'</span><span class="p">));</span>
</code></pre>
</div>
<p>完成了上面的准备工作，下面将一一介绍统计扩展的功能。</p>
<h2 id="直方图">直方图</h2>
<p>直方图主要用来反映一组样本数据的分布情况，可以近似估计一个数值类变量的概率分布。直方图是一种特殊的柱状图，它的任意两个 bar 之间不允许有间隙，这是因为整个数轴范围被分割成了一个个连续的、相互邻接的小区间。这个分割过程就是由统计扩展做的，用户只需要传入一维的数据，如下：</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">girth</span> <span class="o">=</span> <span class="p">[</span><span class="mf">8.3</span><span class="p">,</span> <span class="mf">8.6</span><span class="p">,</span> <span class="mf">8.8</span><span class="p">,</span> <span class="mf">10.5</span><span class="p">,</span> <span class="mf">10.7</span><span class="p">,</span> <span class="mf">10.8</span><span class="p">,</span> <span class="mf">11.0</span><span class="p">,</span> <span class="mf">11.0</span><span class="p">,</span> <span class="mf">11.1</span><span class="p">,</span> <span class="mf">11.2</span><span class="p">,</span> <span class="mf">11.3</span><span class="p">,</span> <span class="mf">11.4</span><span class="p">,</span> <span class="mf">11.4</span><span class="p">,</span> <span class="mf">11.7</span><span class="p">,</span> <span class="mf">12.0</span><span class="p">,</span> <span class="mf">12.9</span><span class="p">,</span> <span class="mf">12.9</span><span class="p">,</span> <span class="mf">13.3</span><span class="p">,</span> <span class="mf">13.7</span><span class="p">,</span> <span class="mf">13.8</span><span class="p">,</span> <span class="mf">14.0</span><span class="p">,</span> <span class="mf">14.2</span><span class="p">,</span> <span class="mf">14.5</span><span class="p">,</span> <span class="mf">16.0</span><span class="p">,</span> <span class="mf">16.3</span><span class="p">,</span> <span class="mf">17.3</span><span class="p">,</span> <span class="mf">17.5</span><span class="p">,</span> <span class="mf">17.9</span><span class="p">,</span> <span class="mf">18.0</span><span class="p">,</span> <span class="mf">18.0</span><span class="p">,</span> <span class="mf">20.6</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">bins</span> <span class="o">=</span> <span class="nx">ecStat</span><span class="p">.</span><span class="nx">histogram</span><span class="p">(</span><span class="nx">girth</span><span class="p">,</span> <span class="s1">'scott'</span><span class="p">);</span>
</code></pre>
</div>
<p>这里的第二个参数 <code class="highlighter-rouge">'scott'</code> 是用来指定切割 bin 的方法，有四个选项，分别是 <code class="highlighter-rouge">'squareRoot'</code> 、 <code class="highlighter-rouge">'scott'</code> 、 <code class="highlighter-rouge">'freedmanDiaconis'</code> 、 <code class="highlighter-rouge">'sturges'</code> ，其中 <code class="highlighter-rouge">'squareRoot'</code> 是默认的计算方法，也是Excel中直方图使用的计算 bin 的方法
，有关这四种计算方法的详细介绍，请参见 <a href="https://en.wikipedia.org/wiki/Histogram#Mathematical_definition">wikipedia</a>。使用处理后的 <code class="highlighter-rouge">bins.data</code> 配置 ECharts 柱状图中的 <code class="highlighter-rouge">option.data</code> 就可以得到如下的直方图。由于篇幅的问题，这里就不再赘述具体的 <code class="highlighter-rouge">option</code> 配置，感兴趣的读者可以点击下方的 <code class="highlighter-rouge">代码</code> 按钮，进入 ECharts Gallery 中查看。</p>
<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=xBk5VZddJW&amp;v=4"></iframe>
<h2 id="聚类分析">聚类分析</h2>
<p>聚类分析用于将原数据集聚合成多个特性不同的数据簇，每个数据簇内的数据对象具有某些相似的特征。通过 ECharts 不仅可以可视化聚类的结果，还可以可视化聚类的过程。具体的使用方式如下：</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">ecStat</span><span class="p">.</span><span class="nx">clustering</span><span class="p">.</span><span class="nx">hierarchicalKMeans</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">clusterNumber</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</code></pre>
</div>
<p>其中 <code class="highlighter-rouge">data</code> 是用户传入的二维数值数组， <code class="highlighter-rouge">clusterNumber</code> 是由用户设定的数据簇的个数，最后一个 <code class="highlighter-rouge">boolean</code> 类型的变量是用来指定，静态地可视化聚类的结果，还是动态地可视化聚类的过程。若值为 <code class="highlighter-rouge">false</code> 则为前者，反之，则为后者。</p>
<p>静态可视化聚类的结果：</p>
<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=xSkBOEaGtx&amp;v=10"></iframe>
<p>动态可视化聚类的过程：</p>
<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=xHyr-esMtg&amp;v=4"></iframe>
<p>同样，感兴趣的读者可以点击上方实例的 <code class="highlighter-rouge">代码</code> 按钮，进入 ECharts Gallery 中查看具体的代码，以及 <code class="highlighter-rouge">option</code> 的配置。</p>
<h2 id="回归分析">回归分析</h2>
<p>回归分析就是根据数据集中自变量和因变量的值，拟合出一条曲线，反映它们的变化趋势。在统计扩展中我们实现了四种回归算法，分别是线性回归、指数回归、对数回归、以及多项式回归。使用方式如下：</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">myRegression</span> <span class="o">=</span> <span class="nx">ecStat</span><span class="p">.</span><span class="nx">regression</span><span class="p">(</span><span class="nx">regressionType</span><span class="p">,</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">order</span><span class="p">);</span>
</code></pre>
</div>
<p>其中，<code class="highlighter-rouge">regressionType</code> 指的是回归类型，有四种取值，分别是 <code class="highlighter-rouge">'linear'</code> 、<code class="highlighter-rouge">'exponential'</code> 、<code class="highlighter-rouge">'logarithmic'</code> 、<code class="highlighter-rouge">'polynomial'</code> 。<code class="highlighter-rouge">data</code> 是用户传入的二维数值数组，分别是自变量和因变量的样本值。最后一个参数 <code class="highlighter-rouge">order</code> 用于多项式回归，用来指定多项式的阶数。</p>
<p>线性回归：</p>
<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=xS1bQ2AMKe&amp;v=6"></iframe>
<p>指数回归：</p>
<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=xHyaNv0fFe&amp;v=5"></iframe>
<p>对数回归：</p>
<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=xry3aWkmYe&amp;v=4"></iframe>
<p>多项式回归：</p>
<iframe style="width: 100%; height: 400px" src="http://gallery.echartsjs.com/view.html?cid=xB16yW0MFl&amp;v=3"></iframe>
<h2 id="常用汇总统计">常用汇总统计</h2>
<p>除了上面提到的数据分析方法之外，统计扩展还包括了常用的汇总统计，如分位数、样本方差、标准差、中位数、平均数、求和、最大值、最小值等。具体的用法，这里就不在展开了，详情请参见 GitHub 上的<a href="https://github.com/ecomfe/echarts-stat#statistics">详细文档</a>。</p>
<p>最后的最后，提醒大家一句，在参照完 <code class="highlighter-rouge">Gallery</code> 上 <code class="highlighter-rouge">option</code> 的设置之后，一定要记得 <code class="highlighter-rouge">setOption</code> ，如下：</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">chart</span><span class="p">.</span><span class="nx">setOption</span><span class="p">(</span><span class="nx">option</span><span class="p">);</span>
</code></pre>
</div>
<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/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</span>
</div>
</div><!-- /.entry-content -->
<div class="container">
<div class="read-more">
<h3>更多相关信息</h3>
<div class="row">
<div class="col-md-4">
<div class="read-more-post">
<h4><a href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" title="在 ECharts GL 中绘制三维地图">在 ECharts GL 中绘制三维地图</a></h4>
<p>ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL 更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢？答案是肯定的，用户除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。</p>
<div class="tag-panel">
<!--<a href="http://echarts.baidu.com/blog/tags/#统计" title="Pages tagged 统计" class="tag">-->
<span class="term">统计</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">-->
<span class="term">扩展</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="read-more-post">
<h4><a href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" title="ECharts v3.6 发布：自定义系列、极坐标柱状图">ECharts v3.6 发布：自定义系列、极坐标柱状图</a></h4>
<p>在 ECharts 新发布的 3.6 版本中，新增了自定义系列，能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</p>
<div class="tag-panel">
<!--<a href="http://echarts.baidu.com/blog/tags/#统计" title="Pages tagged 统计" class="tag">-->
<span class="term">统计</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#扩展" title="Pages tagged 扩展" class="tag">-->
<span class="term">扩展</span>
<!--</a>-->
<!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="read-more-post">
<h4><a href="http://echarts.baidu.com/blog/2017/05/08/echarts-histogram-tutorial.html" title="那些年我们一起学过的直方图">那些年我们一起学过的直方图</a></h4>
<p>某天下午小编正在安安静静地撸代码，突然听说在我们的[gallery](http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)上，有用户提出，[ECharts](http://echarts.baidu.com/index.html)不支持直方图，什么？这怎么能忍？于是小编将珍藏已久的机械键盘拿出来，摆好姿势，通宵达旦地为用户大大们加好了直方图，并于上周四悄悄上线了，对，我们就是这么低调。然而，很多大大们表示，直方图还是柱状图？傻傻分不清。小编深感这年头光有图怕是不行了，必须得有个教程，要做到图文并茂。下面小编就从直方图是什么，为什么要用直方图，以及如何使用[ECharts](http://echarts.baidu.com/index.html)制作直方图三个方面，为各位大大们上点干货。</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/#教程" title="Pages tagged 教程" class="tag">-->
<span class="term">教程</span>
<!--</a>-->
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div><!-- /#main -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div>
<div id="efe-product" class="col-md-2 col-sm-4 pc">
<h3>百度EFE更多产品</h3>
<ul id="efe-product">
<li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li>
<li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li>
<li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li>
<li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li>
<li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li>
<li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li>
</ul>
</div>
<div class="col-md-3 col-md-offset-1 col-sm-4 pc">
<h3>友情链接</h3>
<ul>
<li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li>
<li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li>
<li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li>
</ul>
</div>
<div class="col-md-3" id="footer-icon-panel">
<div class="icon-panel">
<a href="mailto:echarts@baidu.com" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-email.png"/>
</a>
<a href="https://twitter.com/EChartsJs" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-twitter.png"/>
</a>
<a href="http://weibo.com/u/5160877841" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-weibo.png"/>
</a>
<a href="https://github.com/ecomfe/echarts" class="footer-icon">
<img src="http://echarts.baidu.com/images/icon-github.png"/>
</a>
</div>
<div id="echarts-copyright">&#9400; 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>