| <!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 支持 geoJson 格式的地图，并且官网上提供了现成的 world，china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 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 支持 geoJson 格式的地图，并且官网上提供了现成的 world，china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。"> |
| <meta property="og:url" content="http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html"> |
| <meta property="og:site_name" content=""> |
| |
| |
| |
| |
| |
| <link rel="canonical" href="http://echarts.baidu.com/blog/2016/04/28/echarts-map-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/2016-04-28-echarts-map-tutorial-scatter-2.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="2016-04-28T00:00:00+08:00">2016-04-28</time></span></h2> |
| |
| </div><!-- /.header-title-wrap --> |
| </header> |
| <div class="entry-content"> |
| <p>ECharts 作为国内应用最广泛的前端可视化生成工具，提供了丰富的图表展现方式和便捷的图表操作。 |
| ECharts 支持 geoJson 格式的地图，并且官网上提供了现成的 world，china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。</p> |
| |
| <h2 id="一初始准备">一、初始准备</h2> |
| |
| <h4 id="1-新建html">1. 新建html</h4> |
| |
| <p>首先，新建项目目录 echartsMapDemo，在其中新建一个 html 文件 <code class="highlighter-rouge">index.html</code>。</p> |
| |
| <p>echartsMapDemo/index.html:</p> |
| |
| <div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span> |
| <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> |
| <span class="nt"><head></span> |
| <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> |
| <span class="nt"><title></span>ECharts map Demo<span class="nt"></title></span> |
| <span class="nt"></head></span> |
| <span class="nt"><body></span> |
| <span class="nt"></body></span> |
| <span class="nt"></html></span> |
| |
| </code></pre> |
| </div> |
| |
| <h4 id="2引入echarts文件">2.引入echarts文件</h4> |
| |
| <p>从 <a href="http://echarts.baidu.com/download.html">echarts官网</a> 下载最新完整开发包（目前最新版本是3.1.4）。</p> |
| |
| <p>将下载好的包放置在 <code class="highlighter-rouge">echartsMapDemo/dep</code> 目录下并在 html 中以 script 标签引入：</p> |
| |
| <div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span> |
| <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> |
| <span class="nt"><head></span> |
| <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> |
| <span class="nt"><title></span>ECharts map Demo<span class="nt"></title></span> |
| <span class="nt"></head></span> |
| <span class="nt"><body></span> |
| <span class="nt"></body></span> |
| |
| <span class="nt"><script </span><span class="na">src=</span><span class="s">"/dep/echarts.min.js"</span><span class="nt">></script></span> |
| |
| <span class="nt"></html></span> |
| </code></pre> |
| </div> |
| <h4 id="3创建图标容器">3.创建图标容器</h4> |
| |
| <p>在 html 中定义一个 div 作为地图的容器，高度设为 500px 。别忘了，一定要保证容器高度不为 0：</p> |
| |
| <div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span> |
| <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> |
| <span class="nt"><head></span> |
| <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> |
| <span class="nt"><title></span>ECharts map Demo<span class="nt"></title></span> |
| <span class="nt"></head></span> |
| <span class="nt"><body></span> |
| |
| <span class="nt"><div</span> <span class="na">id=</span><span class="s">"map-wrap"</span> <span class="na">style=</span><span class="s">"height: 500px;"</span><span class="nt">></span> |
| <span class="c"><!-- 这里以后是地图 --></span> |
| <span class="nt"></div></span> |
| |
| <span class="nt"></body></span> |
| <span class="nt"><script </span><span class="na">src=</span><span class="s">"/dep/echarts.min.js"</span><span class="nt">></script></span> |
| <span class="nt"></html></span> |
| </code></pre> |
| </div> |
| |
| <p>然后，我们还需要一个地图文件，echart 提供两种格式的地图数据，一种是 js 格式，一种是 JSON 格式。下文中我们会分别使用这两种方式实现。</p> |
| |
| <p>同样去 <a href="http://echarts.baidu.com/download-map.html">官网</a> 上下载，这里选择下载中国地图 china.js 或 china.json 。你也可以根据需要选择其他省份地图或世界地图</p> |
| |
| <p>好了，准备工作完成，现在就开始绘制地图了~</p> |
| |
| <h2 id="二绘制地图">二、绘制地图</h2> |
| |
| <p>echart 提供两种格式的地图数据，一种是 js 格式，一种是 JSON 格式。下面分别介绍两种格式的用法：</p> |
| |
| <h3 id="引用js格式地图数据">引用js格式地图数据：</h3> |
| |
| <h4 id="1在官网上下载-js-格式中国地图-chinajs将下载好的-chinajs-放在-echartsmapdemomapjs-目录下以-script-标签引入到-html-中">1.在<a href="http://echarts.baidu.com/download-map.html">官网</a>上下载 js 格式中国地图 china.js，将下载好的 china.js 放在 <code class="highlighter-rouge">echartsMapDemo/map/js</code> 目录下，以 script 标签引入到 html 中:</h4> |
| |
| <div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span> |
| <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> |
| <span class="nt"><head></span> |
| <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> |
| <span class="nt"><title></span>ECharts map Demo<span class="nt"></title></span> |
| <span class="nt"></head></span> |
| <span class="nt"><body></span> |
| <span class="nt"><div</span> <span class="na">id=</span><span class="s">"map-wrap"</span> <span class="na">style=</span><span class="s">"height: 500px;"</span><span class="nt">></span> |
| <span class="c"><!-- 这里以后是地图 --></span> |
| <span class="nt"></div></span> |
| <span class="nt"></body></span> |
| <span class="nt"><script </span><span class="na">src=</span><span class="s">"/dep/echarts.min.js"</span><span class="nt">></script></span> |
| |
| <span class="nt"><script </span><span class="na">src=</span><span class="s">"/map/js/china.js"</span><span class="nt">></script></span> |
| |
| <span class="nt"></html></span> |
| </code></pre> |
| </div> |
| |
| <h4 id="2在js中用-echartsinit-方法初始化一个-echarts-实例在-init-中传入图表容器-dom-对象">2.在js中用 <code class="highlighter-rouge">echarts.init()</code> 方法初始化一个 ECharts 实例，在 init() 中传入图表容器 Dom 对象，</h4> |
| |
| <p>同时定义一个变量 <code class="highlighter-rouge">option</code>，作为图表的配置项：</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="c1">// 初始化echarts示例mapChart</span> |
| <span class="kd">var</span> <span class="nx">mapChart</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">'map-wrap'</span><span class="p">));</span> |
| |
| <span class="c1">// mapChart的配置</span> |
| <span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| |
| <span class="p">};</span> |
| |
| </code></pre> |
| </div> |
| |
| <h4 id="3通过配置-option新建一个地理坐标系-geo-地图类型为中国地图">3.通过配置 option，新建一个地理坐标系 <code class="highlighter-rouge">geo</code> ，地图类型为中国地图。</h4> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">geo</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">map</span><span class="p">:</span> <span class="s1">'china'</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>geo.map 属性定义该地理坐标系中的地图数据，这里我们要用 china.js ，设置map值为 ‘china’。</p> |
| |
| <p>这里需要注意，中国地图的map值为 ‘china’ ，世界地图的map值为 ‘world’ ，但如果要引用省市自治区地图 map 值为<strong>简体中文</strong>，例如 beijing.js，map 值为’北京’。</p> |
| |
| <h4 id="4调用-setoptionoption-为图表设置配置项">4.调用 <code class="highlighter-rouge">setOption(option)</code> 为图表设置配置项。</h4> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">mapChart</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> |
| |
| <h3 id="引用json格式地图数据">引用JSON格式地图数据：</h3> |
| |
| <h4 id="1同样在官网下载json格式的地图数据放在echartsmapdemomapjson目录下">1.同样在<a href="http://echarts.baidu.com/download-map.html">官网</a>下载JSON格式的地图数据，放在<code class="highlighter-rouge">echartsMapDemo/map/json</code>目录下</h4> |
| |
| <h4 id="2json数据通过异步方式加载加载完成后需要手动注册地图">2.json数据通过异步方式加载，加载完成后需要手动注册地图</h4> |
| |
| <p>这里我们使用 jQuery 的 $.get() 方法异步加载 china.json （首先要在html中引用 jquery ，这里省略操作说明），在回调函数中，以上述同样的方法初始化一个 mapCharts 、注册地图并设置 option：</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'map/json/china.json'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">chinaJson</span><span class="p">)</span> <span class="p">{</span> |
| |
| <span class="nx">echarts</span><span class="p">.</span><span class="nx">registerMap</span><span class="p">(</span><span class="s1">'china'</span><span class="p">,</span> <span class="nx">chinaJson</span><span class="p">);</span> <span class="c1">// 注册地图</span> |
| |
| <span class="kd">var</span> <span class="nx">mapChart</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">'map-wrap'</span><span class="p">));</span> |
| |
| <span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">geo</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">map</span><span class="p">:</span> <span class="s1">'china'</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| |
| <span class="nx">mapChart</span><span class="p">.</span><span class="nx">setOption</span><span class="p">(</span><span class="nx">option</span><span class="p">);</span> |
| |
| <span class="p">});</span> |
| <span class="p">});</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>现在就可以在页面中看到中国地图了：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-04-28-echarts-map-tutorial-china-js-1.png" alt="地图" /></p> |
| |
| <p>为了突出散点效果，先为地图改个颜色</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">geo</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">map</span><span class="p">:</span> <span class="s1">'china'</span><span class="p">,</span> |
| |
| <span class="na">itemStyle</span><span class="p">:</span> <span class="p">{</span> <span class="c1">// 定义样式</span> |
| <span class="na">normal</span><span class="p">:</span> <span class="p">{</span> <span class="c1">// 普通状态下的样式</span> |
| <span class="na">areaColor</span><span class="p">:</span> <span class="s1">'#323c48'</span><span class="p">,</span> |
| <span class="na">borderColor</span><span class="p">:</span> <span class="s1">'#111'</span> |
| <span class="p">},</span> |
| <span class="na">emphasis</span><span class="p">:</span> <span class="p">{</span> <span class="c1">// 高亮状态下的样式</span> |
| <span class="na">areaColor</span><span class="p">:</span> <span class="s1">'#2a333d'</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="na">backgroundColor</span><span class="p">:</span> <span class="s1">'#404a59'</span><span class="p">,</span> <span class="c1">// 图表背景色</span> |
| <span class="p">}</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>换装后的地图：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-04-28-echarts-map-tutorial-china-js-2.png" alt="中国地图底图" /></p> |
| |
| <h2 id="三绘制散点图">三、绘制散点图</h2> |
| |
| <hr /> |
| |
| <h4 id="1新建散点图series">1.新建散点图series</h4> |
| |
| <p>在 option 中添加一个 series ， series 的类型为散点图 <code class="highlighter-rouge">scatter</code> ，坐标系为地理坐标系 <code class="highlighter-rouge">geo</code> 。</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">geo</span><span class="p">:</span> <span class="p">{</span> |
| <span class="p">...</span> |
| <span class="p">},</span> |
| <span class="na">backgroundColor</span><span class="p">:</span> <span class="s1">'#404a59'</span><span class="p">,</span> |
| |
| <span class="na">series</span><span class="p">:</span> <span class="p">[</span> |
| <span class="p">{</span> |
| <span class="na">name</span><span class="p">:</span> <span class="s1">'销量'</span><span class="p">,</span> <span class="c1">// series名称</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'scatter'</span><span class="p">,</span> <span class="c1">// series图表类型</span> |
| <span class="na">coordinateSystem</span><span class="p">:</span> <span class="s1">'geo'</span> <span class="c1">// series坐标系类型</span> |
| <span class="p">}</span> |
| <span class="p">]</span> |
| <span class="p">}</span> |
| |
| </code></pre> |
| </div> |
| |
| <h4 id="2添加数据">2.添加数据</h4> |
| |
| <p>ECharts 中 series.data 是定义图表数据内容的数组，其中每个项数据格式为：</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="p">{</span> |
| <span class="nl">name</span><span class="p">:</span> <span class="s1">'北京'</span><span class="p">,</span> <span class="c1">// 数据项名称，在这里指地区名称</span> |
| |
| <span class="nx">value</span><span class="err">:</span> <span class="p">[</span> <span class="c1">// 数据项值</span> |
| <span class="mf">116.46</span><span class="p">,</span> <span class="c1">// 地理坐标，经度</span> |
| <span class="mf">39.92</span><span class="p">,</span> <span class="c1">// 地理坐标，纬度</span> |
| <span class="mi">340</span> <span class="c1">// 北京地区的数值</span> |
| <span class="p">]</span> |
| <span class="p">}</span> |
| |
| |
| </code></pre> |
| </div> |
| |
| <p>首先我们将需要渲染的数据转换成上述数据格式，存在一个变量中：</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">myData</span> <span class="o">=</span> <span class="p">[</span> |
| |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'海门'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">121.15</span><span class="p">,</span> <span class="mf">31.89</span><span class="p">,</span> <span class="mi">90</span><span class="p">]},</span> |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'鄂尔多斯'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">109.781327</span><span class="p">,</span> <span class="mf">39.608266</span><span class="p">,</span> <span class="mi">120</span><span class="p">]},</span> |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'招远'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">120.38</span><span class="p">,</span> <span class="mf">37.35</span><span class="p">,</span> <span class="mi">142</span><span class="p">]},</span> |
| <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'舟山'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">122.207216</span><span class="p">,</span> <span class="mf">29.985295</span><span class="p">,</span> <span class="mi">123</span><span class="p">]},</span> |
| <span class="p">...</span> |
| <span class="p">]</span> |
| |
| |
| </code></pre> |
| </div> |
| |
| <p>然后，将 myData 赋值给 series.data：</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">geo</span><span class="p">:</span> <span class="p">{</span> |
| <span class="p">...</span> |
| <span class="p">},</span> |
| <span class="na">backgroundColor</span><span class="p">:</span> <span class="s1">'#404a59'</span><span class="p">,</span> |
| <span class="na">series</span><span class="p">:</span> <span class="p">[</span> |
| <span class="p">{</span> |
| <span class="na">name</span><span class="p">:</span> <span class="s1">'销量'</span><span class="p">,</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'scatter'</span><span class="p">,</span> |
| <span class="na">coordinateSystem</span><span class="p">:</span> <span class="s1">'geo'</span><span class="p">,</span> |
| |
| <span class="na">data</span><span class="p">:</span> <span class="nx">myData</span> <span class="c1">// series数据内容</span> |
| <span class="p">}</span> |
| <span class="p">]</span> |
| <span class="p">}</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>数据添加完成，就可以在图表中看到渲染出的散点了：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-04-28-echarts-map-tutorial-scatter-1.png" alt="散点图1" /></p> |
| |
| <h4 id="3添加视觉映射组件">3.添加视觉映射组件</h4> |
| |
| <p><a href="http://echarts.baidu.com/option.html#visualMap">视觉映射组件</a>是标识某一数据范围内数据及颜色对应关系的控件，视觉映射组件分为连续型和分段型，这里我们选用连续型 <code class="highlighter-rouge">type:continuous</code> 。同时，通过视觉映射组件可以实现 ECharts 值域漫游功能，即通过拖拽控件手柄选择不同数值范围，达到对图表数据的筛选显示。 |
| 在 <code class="highlighter-rouge">visualMap</code> 属性中设置值域控件的相关配置：</p> |
| |
| <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="p">...</span> |
| |
| <span class="na">visualMap</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">type</span><span class="p">:</span> <span class="s1">'continuous'</span><span class="p">,</span> <span class="c1">// 连续型</span> |
| <span class="na">min</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="c1">// 值域最小值，必须参数</span> |
| <span class="na">max</span><span class="p">:</span> <span class="mi">200</span><span class="p">,</span> <span class="c1">// 值域最大值，必须参数</span> |
| <span class="na">calculable</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 是否启用值域漫游</span> |
| <span class="na">inRange</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">color</span><span class="p">:</span> <span class="p">[</span><span class="s1">'#50a3ba'</span><span class="p">,</span><span class="s1">'#eac736'</span><span class="p">,</span><span class="s1">'#d94e5d'</span><span class="p">]</span> |
| <span class="c1">// 指定数值从低到高时的颜色变化</span> |
| <span class="p">},</span> |
| <span class="na">textStyle</span><span class="p">:</span> <span class="p">{</span> |
| <span class="na">color</span><span class="p">:</span> <span class="s1">'#fff'</span> <span class="c1">// 值域控件的文本颜色</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| |
| </code></pre> |
| </div> |
| |
| <p>添加了值域控件的图表效果：</p> |
| |
| <p><img src="http://echarts.baidu.com/blog/images/post/2016-04-28-echarts-map-tutorial-china-js-2.png" alt="散点图2" /></p> |
| |
| <p>这样一个基于中国地图的散点图就基本实现了，如果想要继续完善图表，可以为它添加标题，图例，高亮提示等控件，配置方式在这里查看（<a href="http://echarts.baidu.com/option.html#title">ECharts 配置项手册</a>），在此不再详细说明。</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>--> |
| |
| |
| </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>--> |
| |
| </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>--> |
| |
| </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>--> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| </div> |
| </div> |
| </div> |
| |
| </article> |
| </div><!-- /#main --> |
| |
| <footer> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div> |
| <div id="efe-product" class="col-md-2 col-sm-4 pc"> |
| <h3>百度EFE更多产品</h3> |
| <ul id="efe-product"> |
| <li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li> |
| <li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li> |
| <li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li> |
| <li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li> |
| <li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li> |
| <li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3 col-md-offset-1 col-sm-4 pc"> |
| <h3>友情链接</h3> |
| <ul> |
| <li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li> |
| <li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li> |
| <li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3" id="footer-icon-panel"> |
| <div class="icon-panel"> |
| <a href="mailto:echarts@baidu.com" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-email.png"/> |
| </a> |
| <a href="https://twitter.com/EChartsJs" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-twitter.png"/> |
| </a> |
| <a href="http://weibo.com/u/5160877841" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-weibo.png"/> |
| </a> |
| <a href="https://github.com/ecomfe/echarts" class="footer-icon"> |
| <img src="http://echarts.baidu.com/images/icon-github.png"/> |
| </a> |
| </div> |
| <div id="echarts-copyright">Ⓒ 2017 百度ECharts团队出品</div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script> |
| <script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script> |
| <script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script> |
| |
| |
| |
| |
| <script> |
| var _hmt = _hmt || []; |
| (function() { |
| var hm = document.createElement("script"); |
| hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f"; |
| var s = document.getElementsByTagName("script")[0]; |
| s.parentNode.insertBefore(hm, s); |
| })(); |
| </script> |
| |
| |
| |
| </body> |
| </html> |
