背景：初用echarts看官網的實例，可能對初學者有難度，整理下，來個簡單的打點實例。

?//頁面上給echarts一個容器

var myChart0 = echarts.init(document.getElementById('map'));?

var geoCoordMap = { //這里放你打點的坐標信息，虛擬信息
? ? '青島':[119.84348,35.819467,'青島'，12],
? ? '即墨市人民政府':[20.453685,36.395272,'即墨市人民政府',11],
? ? '市委政府':[120.19013,36.073168,'市委政府',11],
? ? '青島大學':[120.429622,36.377366,'青島大學',11],
? ? '青島北站':[120.380868,36.175683,'青島北站',11],
? ? '火車站':[120.409743,36.065352,'火車站',11],
? ? '嶗山':[120.633966,36.197331,'嶗山',11],
? ? '城陽區政府':[120.402787,36.313572,'城陽區政府',11],
? ? '快船客運中心': [120.322429,36.07961,'快船客運中心',11],
??? '青島國際機場': [120.390628,36.273579,'青島國際機場',11],
??? '膠州站': [120.00486,36.305696,'膠州站',11],
??? '青島站': [120.319626,36.070333,'青島站',11],
? ? '萊西站': [120.523721,36.817047,'萊西站',11],
? ? '平度火車站': [119.892033,36.769939,'平度火車站',11],
??? '萊西市政府': [120.52329,36.895417,'萊西市政府',11]
};

//下邊就是個普通的函數編程了，直接賦給變量。
var convertData = function(data) {
var res = [];
for (a in data) {
? ? res.push({
? ? name:a,value:data[a]
? ? });
? ? ? ? ? }
? ? ? ? ? ? return res;
? ? ?};
option0 = {
title:{
text: '打點',
x: '30%',
y:'0%',
textStyle:{
color: '#fff',
fontFamily: 'Microsoft YaHei'
}
},
? ? backgroundColor: '',
? ? tooltip : {
padding : 10,
backgroundColor : '#222',
borderColor : '#777',

borderWidth : 1,

//formatter有字符串模板，跟回調函數，這里的obj就是下邊series.data里的數據。

formatter : function(obj) { //
var value = obj.value;

return '<div style="border-bottom: 1px solid rgba(255,255,255,.3);'

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? +'font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'

+ '地點：'
+ value[2]
+ '<br>'
+ '人數：'
+ value[3]
+ '<br>';
}
},
? ? geo: {
? ? ? ? map: 'qingdao', //青島的地圖要準備好
? ? ? ? label: {
? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? show: false
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? zoom:1.1,
? ? ? ? left:'33%',
? ? ? ? roam: false,
? ? ? ? itemStyle: {? ? //地圖顏色
? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? areaColor: '#5fc9f8',
? ? ? ? ? ? ? ? borderColor: '#9be4ff'
? ? ? ? ? ? },
? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? areaColor: '#43b9f6'
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? series : [
? ? ? ? {
? ? ? ? ? ? name: '重點人員監控',
? ? ? ? ? ? type: 'effectScatter',
? ? ? ? ? ? coordinateSystem: 'geo',
? ? ? ? ? ? data: convertData(geoCoordMap),
? ? ? ? ? ? symbolSize: 10,
? ? ? ? ? ? showEffectOn: 'render',
? ? ? ? ? ? rippleEffect: {
? ? ? ? ? ? ? ? brushType: 'stroke'
? ? ? ? ? ? },
? ? ? ? ? ? hoverAnimation: true,
? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? formatter: '{b}',
? ? ? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? ? ? show: true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? itemStyle: {? ? //打點的顏色
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? color: '#fecb2e',
? ? ? ? ? ? ? ? ? ? shadowBlur: 10,
? ? ? ? ? ? ? ? ? ? shadowColor: '#0d5ebd'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? zlevel: 1
? ? ? ? }
? ? ]
};
myChart0.setOption(option0);
$(window).resize(function() {
? ? myChart0.resize();?

});

看下效果

個人觀點,歡迎指正

本人原創,未經允許,禁止轉載

總結

以上是生活随笔為你收集整理的echarts-map 地图打点小案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。