1.echarts custom label
Note: When setting the visualMap, to cover the value of the regions defined separately (if there is no data in regions of the area anyway, I this is to remove the 'Qingdao' from the data, but it can not show the lable normal, if there is the god who good way, please enlighten me)
initChart(id,data){
// console.log(data);
let obj = echarts.init(document.getElementById(id));
const geoCoordMap = {
'Jinan': [117,36.65],
'Qingdao': [120.33,36.07],
'Zibo City': [118.05,36.78],
'Zaozhuang City': [117.57,34.86],
'Dongying City': [118.49,37.6],
'Yantai': [121.0,37.52],
'Weifang City': [119.1,36.62],
'Jining City': [116.59,35.38],
'Tai'an City': [117.13,36.0],
'Weihai City': [122.3,37.5],
'Sunshine City': [119.46,35.42],
'Binzhou City': [118.03,37.4],
'Dezhou': [116.29,37.45],
'Liaocheng': [115.97,36.45],
'Linyi City': [118.35,35.05],
'Heze City': [115.43,35.24],
'Laiwu City': [117.67,36.2],
}
const convertData = function(data) {
There res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].region];
if (geoCoord) {
res.push({
value: geoCoord.concat(data[i].value),
name: data[i].region,
managercount:data[i].managercount,
fundcount:data[i].fundcount,
});
}
}
return res;
};
let option = ({// perform configuration
visualMap: {// color of each urban area the size of a given value worth
show:false,
text: [ 'high', 'low'],
showLabel: true,
seriesIndex: [0],
I: 1,
max: 300,
inRange: {
color:[ '#2ab0fc','#0195f1', '#047ad7',]
},
},
geo: {
map: 'Shandong'
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#83caf5',
borderColor: '#fff',
},
emphasis: {
areaColor: '#aed6f2',
}
},
regions: [{// define a separate color Qingdao
name: 'Qingdao'
value:this.qdVal.managercount,
itemStyle: {
normal: {
areaColor: '#fe9910',
}
}
}],
},
series: [
{
type: 'map',
map: 'Shandong'
geoIndex: 0, // map here for the first value of geo
date: date,
},
{
name: 'Shandong'
type: 'scatter',
coordinateSystem: 'geo',
symbol:'pin',
symbolSize:1,
label: {// tag styling
normal:{
show:true,
formatter: function (params) {// tag content
return params.name+':'+params.data.managercount+','+params.data.fundcount
},
lineHeight: 20,
backgroundColor:'rgba(255,255,255,.9)',
borderColor:'#80cffd',
borderWidth:'1',
padding:[5,15,4],
color:'#000000',
fontSize: 14,
fontWeight:'normal',
},
},
data:convertData(data),
}
]
})
obj.setOption(option);
},
Show results:
