首先，數據需要提供
1、
mapData=[ {name: '海門', value: 9},
{name: '鄂爾多斯', value: 12},
{name: '招遠', value: 12},
{name: '舟山', value: 12},
{name: '齊齊哈爾', value: 14},
{name: '鹽城', value: 15},
{name: '赤峯', value: 16},
{name: '青島', value: 18},
{name: '乳山', value: 18},
{name: '金昌', value: 19},
{name: '泉州', value: 21},
{name: '萊西', value: 21},
{name: '日照', value: 21},
{name: '膠南', value: 22},
{name: '南通', value: 23},
{name: '拉薩', value: 24},
{name: '雲浮', value: 24},
{name: '梅州', value: 25},
{name: '文登', value: 25},
{name: '上海', value: 25},
{name: '攀枝花', value: 25},
{name: '威海', value: 25},
{name: '承德', value: 25},
{name: '廈門', value: 26},
{name: '汕尾', value: 26},
{name: '潮州', value: 26},
{name: '丹東', value: 27},
{name: '太倉', value: 27},
{name: '曲靖', value: 27},
{name: '煙臺', value: 28},
{name: '福州', value: 29},
{name: '瓦房店', value: 30},
{name: '即墨', value: 30}
]
2、
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]
}
option = {
color: ['#B0EEF4', 'yellow', '#d8e050'],
tooltip: {
trigger: 'item', // 數據項圖形觸發方式，主要在散點圖，餅圖等無類目軸的圖表中使用。
formatter: format //函數，提供參數params，返回的是tip上的html片段，常用params.data
},
geo: {
show: true,
map: '遼寧', //地圖範圍數據，通過echarts.registerMap引入(在node_modules裏)
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false, //鼠標平移或者縮放
itemStyle: { //每個點的樣式
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
name: 'light',
type: 'scatter', //設置普通點樣式，scatter爲單色實心圓形
coordinateSystem: 'geo', //使用地理座標系，通過 geoIndex 指定相應的地理座標系組件。
data: convertData(mapData),
/*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;
};*/
//把 { name: '齊齊哈爾', value: 14 } { '齊齊哈爾':[123.97,47.33] } 格式的數據合併轉換爲 { "name":"齊齊哈爾","value":[114.854101942,33.8237408181,5000] }
symbolSize: function (val) {
return val[2] / 1000;
},
// symbolSize:15,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle: {
fontFamily: "微軟雅黑",
fontSize: 12,
fontWeight: 'bold',
color: '#007277'
}
},
emphasis: {
show: true
}
}
},
{
name: 'point', //點名稱
type: 'map',
mapType: '遼寧', //地圖省份
roam: false,
mapLocation: { x: 'center', y: '2%' }, //在v2以上作廢，改用top left right bottom
selectedMode: 'single', //選點模式，單選
label: {
normal: {
show: false
},
textStyle: {
color: '#fff'
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#89d6d9',
borderColor: '#b1b1b1'
},
emphasis: {
areaColor: '#99e3e6',
label: {
// show: true
}
}
},
data: mapData,
heatmap: {
minAlpha: 0.5,
data: heatData
},
},
{
name: 'Top 5',
type: 'effectScatter', //雷達樣式點
coordinateSystem: 'geo',
data: convertData(mapData.sort(function (a, b) {
return b.dayOrderTotal - a.dayOrderTotal; //數據排序，取前五
}).slice(0, 5)),
symbolSize: function (val) { //點的大小，根據數據值來定
return val[2] / 1000;
},
showEffectOn: 'render', //何時顯示特效，'render' 繪製完成後顯示，'emphasis'鼠標放上去後顯示。
rippleEffect: { //漣漪特效相關配置
brushType: 'stroke' //波紋的繪製方式，可選 'stroke' 和 'fill'。
},
hoverAnimation: false, //是否開啓鼠標hover效果
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle: {
fontFamily: "微軟雅黑",
fontSize: 12,
fontWeight: 'bold',
color: '#007277'
}
}
},
itemStyle: {
normal: {
color: '#ff0000',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};