配置项如下
//城市经纬度
var geoCoordMap = {
"北京": [116.46, 39.92],
"成都": [104.06, 30.67],
"杭州": [120.19, 30.26],
"济南": [117, 36.65],
"福州": [119.3, 26.08],
"上海": [121.48, 31.22],
"重庆": [106.54, 29.59],
"深圳": [114.07, 22.62],
"宁波": [121.56, 29.86],
"南昌": [115.89, 28.68],
"广州": [113.23, 23.16],
"厦门": [118.1, 24.46],
"太原": [112.53, 37.87],
"哈尔滨": [126.63, 45.75],
"西安": [108.95, 34.27],
"沈阳": [123.38, 41.8],
"大连": [121.62, 38.92],
"海口": [110.35, 20.02],
"长沙": [113, 28.21],
"银川": [106.27, 38.47],
"石家庄": [114.48, 38.03],
"昆明": [102.73, 25.04],
"武汉": [114.31, 30.52],
"呼和浩特": [111.65, 40.82],
"天津": [117.2, 39.13],
"贵阳": [106.71, 26.57],
"兰州": [103.73, 36.03],
"青岛": [120.33, 36.07],
"南京": [118.78, 32.04],
"长春": [125.35, 43.88],
"郑州": [113.65, 34.76],
"西宁": [101.74, 36.56],
"合肥": [117.27, 31.86],
"南宁": [108.33, 22.84],
"拉萨": [91.11, 29.97],
"乌鲁木齐": [87.68, 43.77]
};
//数据部分
var data = [
{name:"北京",value:88.8},
{name:"成都",value:88.7},
{name:"厦门",value:88.01},
{name:"杭州",value:87.9},
{name:"济南",value:87.48},
{name:"福州",value:87.47},
{name:"上海",value:87.43},
{name:"重庆",value:87.38},
{name:"深圳",value:87.37},
{name:"昆明",value:87.26},
{name:"宁波",value:87.1},
{name:"南昌",value:86.06},
{name:"广州",value:85.89},
{name:"太原",value:84.45},
{name:"哈尔滨",value:83.96},
{name:"西安",value:83.24},
{name:"沈阳",value:82.96},
{name:"大连",value:82.94},
{name:"海口",value:82.88},
{name:"长沙",value:82.85},
{name:"银川",value:82.49},
{name:"石家庄",value:82.24},
{name:"武汉",value:81.68},
{name:"呼和浩特",value:81.61},
{name:"天津",value:80.99},
{name:"贵阳",value:80.71},
{name:"兰州",value:80.69},
{name:"南京",value:80.65},
{name:"青岛",value:80.61},
{name:"长春",value:80.1},
{name:"郑州",value:79.56},
{name:"西宁",value:79.07},
{name:"南宁",value:78.2},
{name:"合肥",value:77.29},
{name:"乌鲁木齐",value:76.91},
{name:"拉萨",value:76.01}
];
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;
};
myChart.setOption(option = {
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
},
top:40,
right:40
},
title: {
//text: '2020年全国大厅监测得分',
top:40,
//subtext: 'from 零点有数',
left: 'center',
textStyle: {
color: '#ffffff',
fontSize: 30
},
subtextStyle: {
fontSize: 20
}
},
legend: {
left: 'left',
data: ['强', '中', '弱'],
textStyle: {
color: '#ccc'
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: '#0f2c70' // 0% 处的颜色
}, {
offset: 1, color: '#091732' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
visualMap: {
min: 75,
max: 90,
left: 40,
bottom: 40,
calculable: false,
text: ['高', '低'],
inRange: {
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)']
},
textStyle: {
color: '#ffffff',
fontSize: 10
}
},
geo: {
map: 'china',
show: true,
roam: true,
label: {
emphasis: {
show: true
}
},
itemStyle: {
normal: {
areaColor: '#091632',
borderColor: '#1773c3',
shadowColor: '#1773c3',
shadowBlur: 20
}
}
},
series: [
{
type: 'map',
map: 'china',
geoIndex: 1,
aspectScale: 0.75, //长宽比
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
borderWidth: 1.5
},
emphasis: {
areaColor: '#0f2c70'
}
},
},
{
name: '城市',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2]/8;
},
label: {
normal: {
formatter: '{b}',
position: 'bottom',
textStyle:{
fontSize:10,
fontWeight:'bolder',
color:'#ffffff'
},
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}
]
});