Echarts繪圖技術總結
阿新 • • 發佈：2018-11-03
Echarts是百度釋出的一種繪圖工具，通過Echarts，我們可以繪製各種圖形：包括折線圖(Line)、條形圖(Bar)、餅圖(Pie)、散點圖(Scatter)、地圖(Map)等。今天我們來談談如何繪製地圖。
首先我們來捋一捋Echarts繪圖的整個流程：
1.一般而言，Echarts的程式碼是嵌入到指令碼檔案（js等）中的，因此，我們首先在js中引用Echarts的庫。例如，你要繪製中國地圖，那就需要引入china.js檔案和echarts.min.js；Echarts地圖的資料格式分js和json兩種，這兩種都可以拿來繪圖，只是用法有點不同而已。
2.在引入庫之後，就可以寫程式碼了，將你要繪製的程式碼寫入你的javascript中；
3.將寫好的指令碼嵌入到html中，就可以在瀏覽器中開啟查看了。
在正式進入繪圖之前，我們需要用到一些資源。許多開發者費盡腦筋尋找這些資源，苦苦難覓。這裡，我給大家分享一下我專案中用到的一些資源，希望對大家有用。
下列所有檔案均可通過此百度雲盤連結下載：
連結：https://pan.baidu.com/s/1sZ7qFsez_VDy25fZzDgRnQ 密碼：f2r5
檔案說明
-------------------------------------外部庫檔案---------------------------------
1.bootstrap.min.js
2.custom.js
3.clndr.js
4.d3.v3.js
5.echarts.min.js
6.jquery.min.js
7.jquery.vmap.js
8.jquery.vmap.sampledata.js
9.jquery.vmap.world.js
10.metisMenu.min.js
11.moment-2.2.1.js
12.rickshaw.js
13.site.js
14.underscore-min.js
15.require.js
16.apiv2.0.min.js
-------------------------------------省份的json檔案---------------------------------
安徽：anhui.json
澳門：aomen.json
北京：beijing.json
重慶：chongqing.json
福建：fujian.json
甘肅：gansu.json
廣東：guangdong.json
廣西：guangxi.json
貴州：guizhou.json
海南：hainan.json
河北：hebei.json
黑龍江：heilongjiang.json
河南：henan.json
湖北：hubei.json
湖南：hunan.json
江蘇：jiangsu.json
江西：jiangxi.json
吉林：jilin.json
遼寧：liaoning.json
內蒙古：neimenggu.json
寧夏：ningxia.json
青海：qinghai.json
山東：shandong.json
上海：shanghai.json
山西：shanxi1.json
陝西：shanxi3.json
四川：sichuan.json
臺灣：taiwan.json
天津：tianjin.json
香港：xianggang.json
新疆：xinjiang.json
西藏：xizang.json
雲南：yunnan.json
浙江：zhejiang.json
這些檔案都可以放在工程中被引用，作為靜態庫。當然，也可以引用線上庫。如：引用線上的echarts.min.js和china.js：
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>在Echarts的官網中給出了許多demo，可以進行參考引用。在Echarts gallery中也有很多漂亮的地圖模板，可以進行參考。我們在用Echarts繪圖時，主要是要實現option，官網中給出了配置項手冊，參照其用法，我們就可以設計出一款很漂亮的地圖了。好的，現在開始實戰。
1.繪製散點圖
散點圖就是在地圖上描點。
首先，準備散點資料，用變數geoCoordMap儲存這些散點資料。一般來說，geoCoordMap越大越好，表明散點資料量越多。geoCoordMap中的資料並不是你要畫的資料，但必須包含你要畫的點的資料。
下方的geoCoordMap中就包含34個省會的經緯度資訊：
var geoCoordMap = {
"海門": [121.15, 31.89],
"鄂爾多斯": [109.781327, 39.608266],
"招遠": [120.38, 37.35],
"舟山": [122.207216, 29.985295],
"齊齊哈爾": [123.97, 47.33],
"鹽城": [120.13, 33.38],
"赤峰": [118.87, 42.28],
"青島": [120.33, 36.07],
"乳山": [121.52, 36.89],
"金昌": [102.188043, 38.520089],
"泉州": [118.58, 24.93],
"萊西": [120.53, 36.86],
"日照": [119.46, 35.42],
"膠南": [119.97, 35.88],
"南通": [121.05, 32.08],
"拉薩": [91.11, 29.97],
"雲浮": [112.02, 22.93],
"梅州": [116.1, 24.55],
"文登": [122.05, 37.2],
"上海": [121.48, 31.22],
"攀枝花": [101.718637, 26.582347],
"威海": [122.1, 37.5],
"承德": [117.93, 40.97],
"廈門": [118.1, 24.46],
"汕尾": [115.375279, 22.786211],
"潮州": [116.63, 23.68],
"丹東": [124.37, 40.13],
"太倉": [121.1, 31.45],
"曲靖": [103.79, 25.51],
"煙臺": [121.39, 37.52],
"福州": [119.3, 26.08],
"瓦房店": [121.979603, 39.627114],
"即墨": [120.45, 36.38],
"撫順": [123.97, 41.97],
"玉溪": [102.52, 24.35],
"張家口": [114.87, 40.82],
"陽泉": [113.57, 37.85],
"萊州": [119.942327, 37.177017],
"湖州": [120.1, 30.86],
"汕頭": [116.69, 23.39],
"崑山": [120.95, 31.39],
"寧波": [121.56, 29.86],
"湛江": [110.359377, 21.270708],
"揭陽": [116.35, 23.55],
"榮成": [122.41, 37.16],
"連雲港": [119.16, 34.59],
"葫蘆島": [120.836932, 40.711052],
"常熟": [120.74, 31.64],
"東莞": [113.75, 23.04],
"河源": [114.68, 23.73],
"淮安": [119.15, 33.5],
"泰州": [119.9, 32.49],
"南寧": [108.33, 22.84],
"營口": [122.18, 40.65],
"惠州": [114.4, 23.09],
"江陰": [120.26, 31.91],
"蓬萊": [120.75, 37.8],
"韶關": [113.62, 24.84],
"嘉峪關": [98.289152, 39.77313],
"廣州": [113.23, 23.16],
"延安": [109.47, 36.6],
"太原": [112.53, 37.87],
"清遠": [113.01, 23.7],
"中山": [113.38, 22.52],
"昆明": [102.73, 25.04],
"壽光": [118.73, 36.86],
"盤錦": [122.070714, 41.119997],
"長治": [113.08, 36.18],
"深圳": [114.07, 22.62],
"珠海": [113.52, 22.3],
"宿遷": [118.3, 33.96],
"咸陽": [108.72, 34.36],
"銅川": [109.11, 35.09],
"平度": [119.97, 36.77],
"佛山": [113.11, 23.05],
"海口": [110.35, 20.02],
"江門": [113.06, 22.61],
"章丘": [117.53, 36.72],
"肇慶": [112.44, 23.05],
"大連": [121.62, 38.92],
"臨汾": [111.5, 36.08],
"吳江": [120.63, 31.16],
"石嘴山": [106.39, 39.04],
"瀋陽": [123.38, 41.8],
"蘇州": [120.62, 31.32],
"茂名": [110.88, 21.68],
"嘉興": [120.76, 30.77],
"長春": [125.35, 43.88],
"膠州": [120.03336, 36.264622],
"銀川": [106.27, 38.47],
"張家港": [120.555821, 31.875428],
"三門峽": [111.19, 34.76],
"錦州": [121.15, 41.13],
"南昌": [115.89, 28.68],
"柳州": [109.4, 24.33],
"三亞": [109.511909, 18.252847],
"自貢": [104.778442, 29.33903],
"吉林": [126.57, 43.87],
"陽江": [111.95, 21.85],
"瀘州": [105.39, 28.91],
"西寧": [101.74, 36.56],
"宜賓": [104.56, 29.77],
"呼和浩特": [111.65, 40.82],
"成都": [104.06, 30.67],
"大同": [113.3, 40.12],
"鎮江": [119.44, 32.2],
"桂林": [110.28, 25.29],
"張家界": [110.479191, 29.117096],
"宜興": [119.82, 31.36],
"北海": [109.12, 21.49],
"西安": [108.95, 34.27],
"金壇": [119.56, 31.74],
"東營": [118.49, 37.46],
"牡丹江": [129.58, 44.6],
"遵義": [106.9, 27.7],
"紹興": [120.58, 30.01],
"揚州": [119.42, 32.39],
"常州": [119.95, 31.79],
"濰坊": [119.1, 36.62],
"重慶": [106.54, 29.59],
"台州": [121.420757, 28.656386],
"南京": [118.78, 32.04],
"濱州": [118.03, 37.36],
"貴陽": [106.71, 26.57],
"無錫": [120.29, 31.59],
"本溪": [123.73, 41.3],
"克拉瑪依": [84.77, 45.59],
"渭南": [109.5, 34.52],
"馬鞍山": [118.48, 31.56],
"寶雞": [107.15, 34.38],
"焦作": [113.21, 35.24],
"句容": [119.16, 31.95],
"北京": [116.46, 39.92],
"徐州": [117.2, 34.26],
"衡水": [115.72, 37.72],
"包頭": [110, 40.58],
"綿陽": [104.73, 31.48],
"烏魯木齊": [87.68, 43.77],
"棗莊": [117.57, 34.86],
"杭州": [120.19, 30.26],
"淄博": [118.05, 36.78],
"鞍山": [122.85, 41.12],
"溧陽": [119.48, 31.43],
"庫爾勒": [86.06, 41.68],
"安陽": [114.35, 36.1],
"開封": [114.35, 34.79],
"濟南": [117, 36.65],
"德陽": [104.37, 31.13],
"溫州": [120.65, 28.01],
"九江": [115.97, 29.71],
"邯鄲": [114.47, 36.6],
"臨安": [119.72, 30.23],
"蘭州": [103.73, 36.03],
"滄州": [116.83, 38.33],
"臨沂": [118.35, 35.05],
"南充": [106.110698, 30.837793],
"天津": [117.2, 39.13],
"富陽": [119.95, 30.07],
"泰安": [117.13, 36.18],
"諸暨": [120.23, 29.71],
"鄭州": [113.65, 34.76],
"哈爾濱": [126.63, 45.75],
"聊城": [115.97, 36.45],
"蕪湖": [118.38, 31.33],
"唐山": [118.02, 39.63],
"平頂山": [113.29, 33.75],
"邢臺": [114.48, 37.05],
"德州": [116.29, 37.45],
"濟寧": [116.59, 35.38],
"荊州": [112.239741, 30.335165],
"宜昌": [111.3, 30.7],
"義烏": [120.06, 29.32],
"麗水": [119.92, 28.45],
"洛陽": [112.44, 34.7],
"秦皇島": [119.57, 39.95],
"株洲": [113.16, 27.83],
"石家莊": [114.48, 38.03],
"萊蕪": [117.67, 36.19],
"常德": [111.69, 29.05],
"保定": [115.48, 38.85],
"湘潭": [112.91, 27.87],
"金華": [119.64, 29.12],
"岳陽": [113.09, 29.37],
"長沙": [113, 28.21],
"衢州": [118.88, 28.97],
"廊坊": [116.7, 39.53],
"菏澤": [115.480656, 35.23375],
"合肥": [117.27, 31.86],
"武漢": [114.31, 30.52],
"大慶": [125.03, 46.58],
"臺北": [121.5201, 25.0630],
"香港": [114.1861, 22.293586],
"澳門": [113.5575, 22.204118]
};準備好資料後，需要通過一個函式把這些經緯資訊轉為echarts地圖能解析的資料，這個通過convertData函式來實現：
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};接下來，實現option：
option = {
title:{
text:'中國地圖',
show:true,
left:'center',
textStyle:{
color:'#FFFFFF',
fontSize:18
}
},
legend:{
left:'right',
top:'top',
data:[{
name:'省會'
}],
textStyle:{
color:'#FFFFFF'
}
},
backgroundColor: '#303030',
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
geo: {
type:'map',
map: 'china',
roam:true,
zoom:1.2,
center:[103.48,36.03],
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#1874CD',
borderColor: '#FFFFF0'
}
}
},
series:[{
name: '省會',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name: "北京", value: -1},
{name: "哈爾濱", value: -1},
{name: "長春", value: -1},
{name: "瀋陽", value: -1},
{name: "天津", value: -1},
{name: "呼和浩特", value: -1},
{name: "烏魯木齊", value: -1},
{name: "銀川", value: -1},
{name: "西寧", value: -1},
{name: "蘭州", value: -1},
{name: "西安", value: -1},
{name: "拉薩", value: -1},
{name: "成都", value: -1},
{name: "重慶", value: -1},
{name: "貴陽", value: -1},
{name: "昆明", value: -1},
{name: "太原", value: -1},
{name: "石家莊", value: -1},
{name: "濟南", value: -1},
{name: "鄭州", value: -1},
{name: "合肥", value: -1},
{name: "南京", value: -1},
{name: "上海", value: -1},
{name: "武漢", value: -1},
{name: "長沙", value: -1},
{name: "南昌", value: -1},
{name: "杭州", value: -1},
{name: "福州", value: -1},
{name: "臺北", value: -1},
{name: "南寧", value: -1},
{name: "海口", value: -1},
{name: "廣州", value: -1},
{name: "香港", value: -1},
{name: "澳門", value: -1}
]),
symbol:'circle',
symbolSize: 14,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal:{
color:'#8B0000'
}
}
}]
};現在，整合上述程式碼，得test.html檔案如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
*{margin: 0;padding: 0; font-family: 微軟雅黑}
#container{
width: 1366px;
height: 650px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1)} </script>
<!-- jQuery -->
<script src="../js/jquery.min.js"></script>
<script src="../js/Chart.js"></script>
</head>
<body>
<!-- Metis Menu Plugin JavaScript -->
<script src="../js/metisMenu.min.js"></script>
<script src="../js/custom.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/province/china.json"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<div id="container" class="container"></div>
<script type="text/javascript">
//地圖資料
var geoCoordMap = {
"海門":[121.15,31.89],
"鄂爾多斯":[109.781327,39.608266],
"招遠":[120.38,37.35],
"舟山":[122.207216,29.985295],
"齊齊哈爾":[123.97,47.33],
"鹽城":[120.13,33.38],
"赤峰":[118.87,42.28],
"青島":[120.33,36.07],
"乳山":[121.52,36.89],
"金昌":[102.188043,38.520089],
"泉州":[118.58,24.93],
"萊西":[120.53,36.86],
"日照":[119.46,35.42],
"膠南":[119.97,35.88],
"南通":[121.05,32.08],
"拉薩":[91.11,29.97],
"雲浮":[112.02,22.93],
"梅州":[116.1,24.55],
"文登":[122.05,37.2],
"上海":[121.48,31.22],
"攀枝花":[101.718637,26.582347],
"威海":[122.1,37.5],
"承德":[117.93,40.97],
"廈門":[118.1,24.46],
"汕尾":[115.375279,22.786211],
"潮州":[116.63,23.68],
"丹東":[124.37,40.13],
"太倉":[121.1,31.45],
"曲靖":[103.79,25.51],
"煙臺":[121.39,37.52],
"福州":[119.3,26.08],
"瓦房店":[121.979603,39.627114],
"即墨":[120.45,36.38],
"撫順":[123.97,41.97],
"玉溪":[102.52,24.35],
"張家口":[114.87,40.82],
"陽泉":[113.57,37.85],
"萊州":[119.942327,37.177017],
"湖州":[120.1,30.86],
"汕頭":[116.69,23.39],
"崑山":[120.95,31.39],
"寧波":[121.56,29.86],
"湛江":[110.359377,21.270708],
"揭陽":[116.35,23.55],
"榮成":[122.41,37.16],
"連雲港":[119.16,34.59],
"葫蘆島":[120.836932,40.711052],
"常熟":[120.74,31.64],
"東莞":[113.75,23.04],
"河源":[114.68,23.73],
"淮安":[119.15,33.5],
"泰州":[119.9,32.49],
"南寧":[108.33,22.84],
"營口":[122.18,40.65],
"惠州":[114.4,23.09],
"江陰":[120.26,31.91],
"蓬萊":[120.75,37.8],
"韶關":[113.62,24.84],
"嘉峪關":[98.289152,39.77313],
"廣州":[113.23,23.16],
"延安":[109.47,36.6],
"太原":[112.53,37.87],
"清遠":[113.01,23.7],
"中山":[113.38,22.52],
"昆明":[102.73,25.04],
"壽光":[118.73,36.86],
"盤錦":[122.070714,41.119997],
"長治":[113.08,36.18],
"深圳":[114.07,22.62],
"珠海":[113.52,22.3],
"宿遷":[118.3,33.96],
"咸陽":[108.72,34.36],
"銅川":[109.11,35.09],
"平度":[119.97,36.77],
"佛山":[113.11,23.05],
"海口":[110.35,20.02],
"江門":[113.06,22.61],
"章丘":[117.53,36.72],
"肇慶":[112.44,23.05],
"大連":[121.62,38.92],
"臨汾":[111.5,36.08],
"吳江":[120.63,31.16],
"石嘴山":[106.39,39.04],
"瀋陽":[123.38,41.8],
"蘇州":[120.62,31.32],
"茂名":[110.88,21.68],
"嘉興":[120.76,30.77],
"長春":[125.35,43.88],
"膠州":[120.03336,36.264622],
"銀川":[106.27,38.47],
"張家港":[120.555821,31.875428],
"三門峽":[111.19,34.76],
"錦州":[121.15,41.13],
"南昌":[115.89,28.68],
"柳州":[109.4,24.33],
"三亞":[109.511909,18.252847],
"自貢":[104.778442,29.33903],
"吉林":[126.57,43.87],
"陽江":[111.95,21.85],
"瀘州":[105.39,28.91],
"西寧":[101.74,36.56],
"宜賓":[104.56,29.77],
"呼和浩特":[111.65,40.82],
"成都":[104.06,30.67],
"大同":[113.3,40.12],
"鎮江":[119.44,32.2],
"桂林":[110.28,25.29],
"張家界":[110.479191,29.117096],
"宜興":[119.82,31.36],
"北海":[109.12,21.49],
"西安":[108.95,34.27],
"金壇":[119.56,31.74],
"東營":[118.49,37.46],
"牡丹江":[129.58,44.6],
"遵義":[106.9,27.7],
"紹興":[120.58,30.01],
"揚州":[119.42,32.39],
"常州":[119.95,31.79],
"濰坊":[119.1,36.62],
"重慶":[106.54,29.59],
"台州":[121.420757,28.656386],
"南京":[118.78,32.04],
"濱州":[118.03,37.36],
"貴陽":[106.71,26.57],
"無錫":[120.29,31.59],
"本溪":[123.73,41.3],
"克拉瑪依":[84.77,45.59],
"渭南":[109.5,34.52],
"馬鞍山":[118.48,31.56],
"寶雞":[107.15,34.38],
"焦作":[113.21,35.24],
"句容":[119.16,31.95],
"北京":[116.46,39.92],
"徐州":[117.2,34.26],
"衡水":[115.72,37.72],
"包頭":[110,40.58],
"綿陽":[104.73,31.48],
"烏魯木齊":[87.68,43.77],
"棗莊":[117.57,34.86],
"杭州":[120.19,30.26],
"淄博":[118.05,36.78],
"鞍山":[122.85,41.12],
"溧陽":[119.48,31.43],
"庫爾勒":[86.06,41.68],
"安陽":[114.35,36.1],
"開封":[114.35,34.79],
"濟南":[117,36.65],
"德陽":[104.37,31.13],
"溫州":[120.65,28.01],
"九江":[115.97,29.71],
"邯鄲":[114.47,36.6],
"臨安":[119.72,30.23],
"蘭州":[103.73,36.03],
"滄州":[116.83,38.33],
"臨沂":[118.35,35.05],
"南充":[106.110698,30.837793],
"天津":[117.2,39.13],
"富陽":[119.95,30.07],
"泰安":[117.13,36.18],
"諸暨":[120.23,29.71],
"鄭州":[113.65,34.76],
"哈爾濱":[126.63,45.75],
"聊城":[115.97,36.45],
"蕪湖":[118.38,31.33],
"唐山":[118.02,39.63],
"平頂山":[113.29,33.75],
"邢臺":[114.48,37.05],
"德州":[116.29,37.45],
"濟寧":[116.59,35.38],
"荊州":[112.239741,30.335165],
"宜昌":[111.3,30.7],
"義烏":[120.06,29.32],
"麗水":[119.92,28.45],
"洛陽":[112.44,34.7],
"秦皇島":[119.57,39.95],
"株洲":[113.16,27.83],
"石家莊":[114.48,38.03],
"萊蕪":[117.67,36.19],
"常德":[111.69,29.05],
"保定":[115.48,38.85],
"湘潭":[112.91,27.87],
"金華":[119.64,29.12],
"岳陽":[113.09,29.37],
"長沙":[113,28.21],
"衢州":[118.88,28.97],
"廊坊":[116.7,39.53],
"菏澤":[115.480656,35.23375],
"合肥":[117.27,31.86],
"武漢":[114.31,30.52],
"大慶":[125.03,46.58],
"臺北":[121.5201,25.0630],
"香港":[114.1861,22.293586],
"澳門":[113.5575,22.204118]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var dom= document.getElementById("container");
var myChart = echarts.init(dom);
var app={};
option = {
title:{
text:'中國地圖',
show:true,
left:'center',
textStyle:{
color:'#FFFFFF',
fontSize:18
}
},
legend:{
left:'right',
top:'top',
data:[{
name:'省會'
}],
textStyle:{
color:'#FFFFFF'
}
},
backgroundColor: '#303030',
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
geo: {
type:'map',
map: 'china',
roam:true,
zoom:1.2,
center:[103.48,36.03],
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#1874CD',
borderColor: '#FFFFF0'
}
}
},
series:[{
name: '省會',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name: "北京", value: -1},
{name: "哈爾濱", value: -1},
{name: "長春", value: -1},
{name: "瀋陽", value: -1},
{name: "天津", value: -1},
{name: "呼和浩特", value: -1},
{name: "烏魯木齊", value: -1},
{name: "銀川", value: -1},
{name: "西寧", value: -1},
{name: "蘭州", value: -1},
{name: "西安", value: -1},
{name: "拉薩", value: -1},
{name: "成都", value: -1},
{name: "重慶", value: -1},
{name: "貴陽", value: -1},
{name: "昆明", value: -1},
{name: "太原", value: -1},
{name: "石家莊", value: -1},
{name: "濟南", value: -1},
{name: "鄭州", value: -1},
{name: "合肥", value: -1},
{name: "南京", value: -1},
{name: "上海", value: -1},
{name: "武漢", value: -1},
{name: "長沙", value: -1},
{name: "南昌", value: -1},
{name: "杭州", value: -1},
{name: "福州", value: -1},
{name: "臺北", value: -1},
{name: "南寧", value: -1},
{name: "海口", value: -1},
{name: "廣州", value: -1},
{name: "香港", value: -1},
{name: "澳門", value: -1}
]),
symbol:'circle',
symbolSize: 14,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal:{
color:'#8B0000'
}
}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
繪製出來的中國省會地圖見下：
2.繪製遷徙圖
遷徙圖，其實就是地圖上動態的路線圖。我們已經實現了在地圖上畫點，接下來我們來畫線，並且讓線動起來。
Echarts的Gallery中已經給出了很棒的例子，我們可以參考。在這個例子中，畫了3種線（綠、黃、藍），而且遷徙路徑是飛機的飛行路線（用的是planePath）。讓線動起來的關鍵就是這個planePath。多說一句，planePath是一個向量路線，可以通過illustrator CS6繪製得到。為了方便大家繪圖，我給出飛機線、火車線、汽車線以及輪船線。
飛機線：
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
火車線：
var trainPath = 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z';汽車線：
var carPath = 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z';輪船線：
var shipPath = 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h-2.025l-0.361,0.684 h-3.473L22.377,14.045z M23.695,20.678l-0.004,0.004h0.004V20.678z M24.828,18.199h-2.031l-0.719,1.358h2.029L24.828,18.199z M40.385,34.227c-12.85-7.009-25.729-14.667-38.971-12.527c1.26,8.809,9.08,16.201,8.213,24.328 c-0.553,4.062-3.111,0.828-3.303,7.137c15.799,0,32.379,0,48.166,0l0.066-4.195l1.477-7.23 C50.842,39.812,45.393,36.961,40.385,34.227z M13.99,35.954c-1.213,0-2.195-1.353-2.195-3.035c0-1.665,0.98-3.017,2.195-3.017 c1.219,0,2.195,1.352,2.195,3.017C16.186,34.604,15.213,35.954,13.99,35.954z M23.691,20.682h-2.02l-0.588,1.351h2.023 L23.691,20.682z M19.697,18.199l-0.721,1.358h2.025l0.727-1.358H19.697z';下面是我自己繪製的貨運遷徙圖：
原始碼請參考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0;padding: 0; font-family: 微軟雅黑}
#herder{
height: 50px;
background:#404a59;
}
.main-left{
width:75%;
height: 578px;
background: #404a59;
float: left;
}
.main-right{
width: 24.4%;
height: 578px;
background: #404a59;
float: right;
}
#juxing{
width:330px;
height: 30px;
}
.button1{
width: 33.3%;
height: 30px;
background: #404a59;
float: left;
}
.button2{
width: 33.3%;
height: 30px;
background: #404a59;
float: left;
}
.button3{
width: 33.3%;
height: 30px;
background: #404a59;
float: right;
}
.info {
width: 250px;
height: 300px;
background-color: rgba(233, 231, 231, 0.1);
float: right;
position: absolute;
color: #00f4fc;
font-size: 12px;
padding-left: 25px;
text-align: left;
line-height: 25px;
}
.info img {
margin: 20px 20px 0 0;
float: right;
}
.info p:nth-child(2) {
margin-top:40px;
}
.info span {
color: #f1f1f1;
}
.info2 {
width: 250px;
height: 200px;
background-color: rgba(233, 231, 231, 0.1);
float: right;
position: absolute;
color: #00f4fc;
font-size: 12px;
padding-left: 25px;
text-align: left;
line-height: 25px;
}
.info2 img {
margin: 20px 20px 0 0;
float: right;
}
.info2 p:nth-child(2) {
margin-top:40px;
}
.info2 span {
color: #f1f1f1;
}
table.hovertable {
font-family: 微軟雅黑;
font-size:11px;
color:#FFFFE0;
border-width: 2px;
border-color: #660033;
border-collapse: collapse;
}
table.hovertable th {
background-color:#404a59;
border-width: 2px;
padding: 15.5px;
border-style: solid;
border-color: #1E90FF;
}
table.hovertable tr {
background-color:#404a59;
}
table.hovertable td {
border-width: 1px;
padding: 2.9px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
</style>
</head>
<body>
<div id="herder" style="font-size: 30px; color: #fff; text-align: center;">貨運遷徙圖</div>
<div id="container" class="main-left" style="border: #FFFFF0 solid 2px;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<!--顯示右方表格資訊-->
<div id="data_show" class="main-right" style="border:#FFFFF0 solid 2px;">
<div id="juxing">
<input type="button" value="北京倉庫" onclick="hide('table1','table2','table3')" class="button1" style="font-size: 15px; color: #FFFFFF; text-align: center; background-color:#a6c84c">
<input type="button" value="西安倉庫" onclick="hide('table2','table1','table3')" class="button2" style="font-size: 15px;color: #FFFFFF;text-align: center;background-color: #F4A460">
<input type="button" value="武漢倉庫" onclick="hide('table3','table1','table2')" class="button3" style="font-size: 15px;color: #FFFFFF;text-align: center;background-color: #46bee9">
</div>
<!--當是北京倉庫時，顯示運輸資訊-->
<table class="hovertable" id="table1">
<caption align="center" style="font-size: 18px;color: #EEEE00">昆明--北京倉庫</caption>
<tr>
<th scope="col" style="color: #FFFFFF">序號</th>
<th scope="col" style="color: #FFFFFF">城市名</th>
<th scope="col" style="color: #FFFFFF">路線</th>
<th scope="col" style="color: #FFFFFF">成本</th>
<th scope="col" style="color: #FFFFFF">時效</th>
</tr>
<tr>
<td>1</td>
<td>北京</td>
<td>北京倉庫-北京</td>
<td>150元</td>
<td>2h</td>
</tr>
<tr>
<td>2</td>
<td>長春</td>
<td>北京倉庫-長春</td>
<td>800元</td>
<td>8h</td>
</tr>
<tr>
<td>3</td>
<td>太原</td>
<td>北京倉庫-太原</td>
<td>600元</td>
<td>5h</td>
</tr>
<tr>
<td>4</td>
<td>包頭</td>
<td>北京倉庫-包頭</td>
<td>700元</td>
<td>6h</td>
</tr>
<tr>
<td>5</td>
<td>丹東</td>
<td>北京倉庫-丹東</td>
<td>1000元</td>
<td>10h</td>
</tr>
<tr>
<td>6</td>
<td>大連</td>
<td>北京倉庫-大連</td>
<td>900元</td>
<td>8h</td>
</tr>
<tr>
<td>7</td>
<td>西安</td>
<td>昆明-西安</td>
<td>600元</td>
<td>6h</td>
</tr>
<tr>
<td>8</td>
<td>鄭州</td>
<td>昆明-鄭州</td>
<td>600元</td>
<td>5h</td>
</tr>
<tr>
<td>9</td>
<td>拉薩</td>
<td>昆明-拉薩</td>
<td>800元</td>
<td>8h</td>
</tr>
<tr>
<td>10</td>
<td>成都</td>
<td>昆明-成都</td>
<td>400元</td>
<td>4h</td>
</tr>
<tr>
<td>11</td>
<td>重慶</td>
<td>昆明-重慶</td>
<td>400元</td>
<td>3.5h</td>
</tr>
<tr>
<td>12</td>
<td>昆明</td>
<td>昆明-昆明</td>
<td>150元</td>
<td>2h</td>
</tr>
<tr>
<td>13</td>
<td>南寧</td>
<td>昆明-南寧</td>
<td>800元</td>
<td>8h</td>
</tr>
<tr>
<td>14</td>
<td>武漢</td>
<td>昆明-武漢</td>
<td>1000元</td>
<td>10h</td>
</tr>
<tr>
<td>15</td>
<td>北海</td>
<td>昆明-北海</td>
<td>1200元</td>
<td>12h</td>
</tr>
<tr>
<td>16</td>
<td>海口</td>
<td>昆明-海口</td>
<td>1500元</td>
<td>14h</td>
</tr>
<tr>
<td>17</td>
<td>福州</td>
<td>昆明-福州</td>
<td>1500元</td>
<td>14h</td>
</tr>
<tr>
<td>18</td>
<td>南昌</td>
<td>昆明-南昌</td>
<td>1000元</td>
<td>10h</td>
</tr>
<tr>
<td>19</td>
<td>長沙</td>
<td>昆明-長沙</td>
<td>980元</td>
<td>9h</td>
</tr>
<tr>
<td>20</td>
<td>烏魯木齊</td>
<td>昆明-烏魯木齊</td>
<td>1800元</td>
<td>18h</td>
</tr>
<tr>
<td>總計</td>
<td>-</td>
<td>-</td>
<td>16880元</td>
<td>162.5h</td>
</tr>
</table>
<!--當是西安倉庫時，顯示運輸資訊-->
<table class="hovertable" id="table2">
<caption align="center" style="font-size: 18px;color: #EEEE00">昆明--西安倉庫</caption>
<tr>
<th scope="col" style="color: #FFFFFF">序號</th>
<th scope="col" style="color: #FFFFFF">城市名</th>
<th scope="col" style="color: #FFFFFF">路線</th>
<th scope="col" style="color: #FFFFFF">成本</th>
<th scope="col" style="color: #FFFFFF">時效</th>
</tr>
<tr>
<td>1</td>
<td>北京</td>
<td>西安倉庫-北京</td>
<td>1000元</td>
<td>8h</td>
</tr>
<tr>
<td>2</td>
<td>長春</td>
<td>西安倉庫-長春</td>
<td>1600元</td>
<td>16h</td>
</tr>
<tr>
<td>3</td>
<td>太原</td>
<td>西安倉庫-太原</td>
<td>800元</td>
<td>6h</td>
</tr>
<tr>
<td>4</td>
<td>包頭</td>
<td>西安倉庫-包頭</td>
<td>800元</td>
<td>7h</td>
</tr>
<tr>
<td>5</td>
<td>丹東</td>
<td>西安倉庫-丹東</td>
<td>1600元</td>
<td>18h</td>
</tr>
<tr>
<td>6</td>
<td>大連</td>
<td>西安倉庫-大連</td>
<td>1500元</td>
<td>16h</td>
</tr>
<tr>
<td>7</td>
<td>西安</td>
<td>西安倉庫-西安</td>
<td>100元</td>
<td>2h</td>
</tr>
<tr>
<td>8</td>
<td>鄭州</td>
<td>西安倉庫-鄭州</td>
<td>400元</td>
<td>5h</td>
</tr>
<tr>
<td>9</td>
<td>拉薩</td>
<td>西安倉庫-拉薩</td>
<td>800元</td>
<td>8h</td>
</tr>
<tr>
<td>10</td>
<td>成都</td>
<td>昆明-成都</td>
<td>400元</td>
<td>4h</td>
</tr>
<tr>
<td>11</td>
<td>重慶</td>
<td>昆明-重慶</td>
<td>400元</td>
<td>3.5h</td>
</tr>
<tr>
<td>12</td>
<td>昆明</td>
<td>昆明-昆明</td>
<td>150元</td>
<td>2h</td>
</tr>
<tr>
<td>13</td>
<td>南寧</td>
<td>昆明-南寧</td>
<td>800元</td>
<td>8h</td>
</tr>
<tr>
<td>14</td>
<td>武漢</td>
<td>昆明-武漢</td>
<td>1000元</td>
<td>10h</td>
</tr>
<tr>
<td>15</td>
<td>北海</td>
<td>昆明-北海</td>
<td>1200元</td>
<td>12h</td>
</tr>
<tr>
<td>16</td>
<td>海口</td>
<td>昆明-海口</td>
<td>1500元</td>
<td>14h</td>
</tr>
<tr>
<td>17</td>
<td>福州</td>
<td>昆明-福州</td>
<td>1500元</td>
<td>14h</td>
</tr>
<tr>
<td>18</td>
<td>南昌</td>
<td>昆明-南昌</td>
<td>1000元</td>
<td>10h</td>
</tr>
<tr>
<td>19</td>
<td>長沙</td>
<td>昆明-長沙</td>
<td>980元</td>
<td>9h</td>
</tr>
<tr>
<td>20</td>
<td>烏魯木齊</td>
<td>西安倉庫-烏魯木齊</td>
<td>1500元</td>
<td>15h</td>
</tr>
<tr>
<td>總計</td>
<td>-</td>
<td>-</td>
<td>19030元</td>
<td>187.5h</td>
</tr>
</table>
<!--當是武漢倉庫時，顯示運輸資訊-->
<table class="hovertable" id="table3">
<caption align="center" style="font-size: 18px;color: #EEEE00">昆明--武漢倉庫</caption>
<tr>
<th scope="col" style="color: #FFFFFF">序號</th>
<th scope="col" style="color: #FFFFFF">城市名</th>
<th scope="col" style="color: #FFFFFF">路線</th>
<th scope="col" style="color: #FFFFFF">成本</th>
<th scope="col" style="color: #FFFFFF">時效</th>
</tr>
<tr>
<td>1</td>
<td>北京</td>
<td>武漢倉庫-北京</td>
<td>1100元</td>
<td>10h</td>
</tr>
<tr>
<td>2</td>
<td>長春</td>
<td>武漢倉庫-長春</td>
<td>2000元</td>
<td>22h</td>
</tr>
<tr>
<td>3</td>
<td>太原</td>
<td>武漢倉庫-太原</td>
<td>1000元</td>
<td>9h</td>
</tr>
<tr>
<td>4</td>
<td>包頭</td>
<td>武漢倉庫-包頭</td>
<td>1500元</td>
<td>16h</td>
</tr>
<tr>
<td>5</td>
<td>丹東</td>
<td>武漢倉庫-丹東</td>
<td>2700元</td>
<td>26h</td>
</tr>
<tr>
<td>6</td>
<td>大連</td>
<td>武漢倉庫-大連</td>
<td>2600元</td>
<td>25h</td>
</tr>
<tr>
<td>7</td>
<td>西安</td>
<td>武漢倉庫-西安</td>
<td>900元</td>
<td>8h</td>
</tr>
<tr>
<td>8</td>
<td>鄭州</td>
<td>武漢倉庫-鄭州</td>
<td>500元</td>
<td>5h</td>
</tr>
<tr>
<td>9</td>
<td>拉薩</td>
<td>昆明-拉薩</td>
<td>800元</td>
<td>8h</td>
</tr>
<tr>
<td>10</td>
<td>成都</td>
<td>昆明-成都</td>
<td>400元</td>
<td>4h</td>
</tr>
<tr>
<td>11</td>
<td>重慶</td>
<td>昆明-重慶</td>
<td>400元</td>
<td>3.5h</td>
</tr>
<tr>
<td>12</td>
<td>昆明</td>
<td>昆明-昆明</td>
<td>150元</td>
<td>2h</td>
</tr>
<tr>
<td>13</td>
<td>南寧</td>
<td>昆明-南寧</td>
<td>800元</td>
<td>8h</td>
</tr>
<tr>
<td>14</td>
<td>武漢</td>
<td>武漢倉庫-武漢</td>
<td>150元</td>
<td>2h</td>
</tr>
<tr>
<td>15</td>
<td>北海</td>
<td>昆明-北海</td>
<td>1200元</td>
<td>12h</td>
</tr>
<tr>
<td>16</td>
<td>海口</td>
<td>昆明-海口</td>
<td>1500元</td>
<td>14h</td>
</tr>
<tr>
<td>17</td>
<td>福州</td>
<td>武漢倉庫-福州</td>
<td>1000元</td>
<td>10h</td>
</tr>
<tr>
<td>18</td>
<td>南昌</td>
<td>武漢倉庫-南昌</td>
<td>500元</td>
<td>4h</td>
</tr>
<tr>
<td>19</td>
<td>長沙</td>
<td>武漢倉庫-長沙</td>
<td>450元</td>
<td>3.5h</td>
</tr>
<tr>
<td>20</td>
<td>烏魯木齊</td>
<td>昆明-烏魯木齊</td>
<td>1800元</td>
<td>18h</td>
</tr>
<tr>
<td>總計</td>
<td>-</td>
<td>-</td>
<td>21450元</td>
<td>210h</td>
</tr>
</table>
</div>
<script type="text/javascript">
//初始只顯示錶1的內容
document.getElementById('table2').style.display='none';
document.getElementById('table3').style.display='none';
//畫地圖
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var geoCoordMap = {
'上海': [121.4648,31.2891],
'東莞': [113.8953,22.901],
'東營': [118.7073,37.5513],
'中山': [113.4229,22.478],
'臨汾': [111.4783,36.1615],
'臨沂': [118.3118,35.2936],
'丹東': [124.541,40.4242],
'麗水': [119.5642,28.1854],
'烏魯木齊': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'蘭州': [103.5901,36.3043],
'包頭': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南寧': [108.479,23.1152],
'南昌': [116.0046,28.6633],
'南通': [121.1023,32.1625],
'廈門': [118.1689,24.6478],
'台州': [121.1353,28.6688],
'合肥': [117.29,32.0581],
'呼和浩特': [111.4124,40.4901],
'咸陽': [108.4131,34.8706],
'哈爾濱': [127.9688,45.368],
'唐山': [118.4766,39.6826],
'嘉興': [120.9155,30.6354],
'大同': [113.7854,39.8035],
'大