給每個城市自定義坐標，根據每個城市的value值所在范圍給每個坐標點設置不同的顏色，鼠標懸停顯示tip，tip值為城市名稱以及value。
效果圖：
demo：https://my.weblf.cn/xly/demo/echarts/map/map_china_city.html
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>#charts{width:600px;height:600px;}</style>
</head>
<body>
<div id="charts"></div>
</body>
<script src="../../../public/js/echarts.min.js"></script>
<script src="china.js"></script>
<script>
var mycharts = echarts.init(document.getElementById('charts'))
//自定義城市坐標菜單
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],
};
//拼接對象數組
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) //用連接數組的形式將value值加入
});
//res.push(geoCoord.concat(data[i].value));
//res.push(geoCoord.concat(data[i].name));
}
}
return res;
};
option = {
backgroundColor: '#404a59',//整個畫布背景
//標題組件
title: {
text: '全國主要城市空氣質量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
//提示框組件
tooltip: {
trigger: 'item',
"confine": true,
"formatter": (p)=>{//自定義提示信息
let dataCon = p.data;
txtCon =dataCon.name+'<br>值:'+dataCon.value[2];
return txtCon;
}
},
//左下lengend
visualMap: {
min: 0,//最小
max: 300,//最大
splitNumber: 5,//共分5層
color: ['#ff6300','#eac736','#50a3ba'],//顏色從高到低依次漸變
textStyle: {
color: '#fff'
}
},
//地圖區域樣式
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
//未激活樣式
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
//激活樣式
emphasis: {
areaColor: '#2a333d'
}
}
},
//數據
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name: "海門", value: 9},
{name: "鄂爾多斯", value: 12},
{name: "招遠", value: 12},
{name: "舟山", value: 12},
{name: "齊齊哈爾", value: 14,},
{name: "鹽城", value: 15},
{name: "赤峰", value: 100},
{name: "青島", value: 18},
{name: "乳山", value: 300},
{name: "金昌", value: 19},
]),
symbolSize: 12,
//直接在點上顯示標簽
label: {
show:false,
// normal: {
// show: true
// },
// emphasis: {
// show: true
// },
formatter:'{b}',
offset:[15,-15],//文字的相對偏移
},
//標簽的樣式
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
}
mycharts.setOption(option);
</script>
</html>