最近在研究Echarts的相關案例，畢竟現在大數據比較流行，比較了D3.js、superset等相關的圖表插件，還是覺得echarts更簡單上手些。
本文是以原生JS為基礎，如果使用Vue.js的話，只需把相關配置放到method函數中，或者放在computed屬性中，畢竟參數配置都是固定的，換湯不換葯，話不多說，先上效果圖:
本案例需要引用的JS文件有：echarts.js（echarts官方資源）、china.js（中國地圖的配置），相關配置文件已打包至Github，如需使用，clone下載即可。
github地址： https://github.com/Tzlibai/Demo.git
代碼如下，代碼中有詳細注釋，這里就不過多贅述
HTML部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.map {
width: 1400px;
height: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 設置地圖容器，需要設置寬高樣式-->
<div id="main" class="map"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
</html>
Script部分：
<script>
var myChart = echarts.init(document.getElementById('main'));
// 數據格式 地圖上標點為citys，value為經緯度，symbolSize為標記點的大小
// 數據格式 moveLines，fromName為線條出發城市，toName為線條到達城市，coords為數組經緯度，第一個為出發點經緯度，第二個為到達點經緯度
var allData = {
"citys":[{"name":"延壽","value":[128.331644,45.451897,2],"symbolSize":20,"itemStyle":{"normal":{"color":"#F58158"}}},
{"name":"臨江","value":[126.918087,41.811979,2],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}},
{"name":"長春","value":[125.323544,43.817072,8],"symbolSize":2,"itemStyle":{"normal":{"color":"#F58158"}}}],
"moveLines":[{"fromName":"黑龍江","toName":"珠海","coords":[[126.661669,45.742347],[113.576726,22.270715]]},
{"fromName":"黑龍江","toName":"舒蘭","coords":[[126.661669,45.742347],[126.965607,44.406106]]},
{"fromName":"黑龍江","toName":"膠州","coords":[[126.661669,45.742347],[120.033382,36.26468]]}
]};
option = {
backgroundColor: '#404a59', // 地圖背景顏色
title: {
text: '遷徙圖', // 地圖標題設置
subtext:"123321", // 地圖小標題設置
sublink:"http://www.baidu.com", //小標題鏈接
target:"blank", //'self' 當前窗口打開，'blank' 新窗口打開
padding:5, // 標題內邊距 5 [5, 10] [5,10,5,10]
left:"center", // 組件離容器左側的距離,'left', 'center', 'right','20%'
top:"5%", // 組件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", // 組件離容器右側的距離,'20%'
bottom:"auto", // 組件離容器下側的距離,'20%'
textStyle: {
color:"#fff", //文字顏色
fontStyle:"normal", // italic斜體 oblique傾斜
fontWeight:"normal", // 文字粗細bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", // 字體系列
fontSize:18, // 字體大小
}
},
legend: { // 右下角圖例
show: false, // 是否顯示
orient: 'vertical', // 圖例排列方向
top: 'bottom', // 位置
left: 'right', // 位置
data: ['地點', '線路'], // 數據
textStyle: { // 文字設置
color: '#fff'
}
},
geo: {
show:true, // 是否顯示
map: 'china', // 地圖類型。world世界地圖，china中國地圖
// center:[115.97, 29.71], //當前視角的中心點，用經緯度表示
label: {
normal:{ //普通狀態下的標簽文本樣式。(省份名稱)
show: false, //是否在普通狀態下顯示標簽。
textStyle: { // 文字設置
color: '#fff'
},
},
emphasis: { // 是否在高亮狀態下顯示標簽。(省份名稱)
show: true,
textStyle: { // 文字設置
color: '#fff'
},
}
},
roam: true, // 是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟
itemStyle: { // 地圖板塊區域的多邊形 圖形樣式
normal: { // 默認板塊信息
areaColor: '#222',
borderColor: '#404a59'
},
emphasis: { // 高亮版板塊信息
areaColor: '#2a333d'
}
}
},
series: [{
name: '地點',
type: 'effectScatter', // 特效散點圖
coordinateSystem: 'geo', // 'cartesian2d'使用二維的直角坐標系。'geo'使用地理坐標系
zlevel: 2, // 所有圖形的 zlevel 值。
rippleEffect: { //漣漪特效相關配置。
brushType: 'stroke', //波紋的繪制方式，可選 'stroke' 和 'fill'。
period:4, // 動畫的時間。
scale:2.5, // 動畫中波紋的最大縮放比例。
},
label: {
normal: {
show: false, //是否顯示標簽。
position: "inside", //標簽的位置。// 絕對的像素值[10, 10]
offset: [30, 40], //是否對文字進行偏移。默認不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter: '{b}: {c}', //標簽內容格式器。模板變量有 {a}、{b}、{c}，分別表示系列名，數據名，數據值。
},
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 2, // 標記的大小，可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
showEffectOn: 'render', // 配置何時顯示特效。可選：'render' 繪制完成后顯示特效。'emphasis' 高亮（hover）的時候顯示特效。
itemStyle: { // 圖形樣式，normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
normal: {
color: '#46bee9'
}
},
data: allData.citys
}, {
name: '線路',
type: 'lines',
coordinateSystem: 'geo', // 'cartesian2d'使用二維的直角坐標系。'geo'使用地理坐標系
zlevel: 2,
large: true, // 是否開啟大規模散點圖的優化，在數據圖形特別多的時候（>=5k）可以開啟。開啟后配合 largeThreshold 在數據量大於指定閾值的時候對繪制進行優化。缺點：優化后不能自定義設置單個數據項的樣式。
effect: {
show: true,
constantSpeed: 30, // 點移動的速度
symbol: 'pin', // 圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 3, // 標記的大小，可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
trailLength: 0, // 線的寬度
},
lineStyle: { // 線的顏色、寬度，樣式設置
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#58B3CC'
}, {
offset: 1, color: '#F58158'
}], false),
width: 1, // 線的寬度
opacity: 0.2, // 線的透明度
curveness: 0.1 // 線的完全程度
}
},
data: allData.moveLines
}]
};
myChart.setOption(option);
</script>