//label中formatter无法使用html引入img
配置项如下
//label中formatter无法使用html引入img
//请大哥移至132行代码
var geoCoordMap = {
'济南市': [117.121225, 36.682785],
'菏泽市': [115.480656, 35.23375],
'济宁市': [116.59, 35.38],
'德州市': [116.39, 37.45],
'聊城市': [115.97, 36.45],
'泰安市': [117.13, 36.18],
'临沂市': [118.35, 35.05],
'淄博市': [118.05, 36.78],
'枣庄市': [117.57, 34.86],
'滨州市': [118.03, 37.36],
'潍坊市': [119.1, 36.62],
'东营市': [118.49, 37.46],
'青岛市': [120.3, 36.62],
'烟台市': [120.9, 37.32],
'威海市': [122.1, 37.2],
'日照市': [119.1, 35.62],
'济宁市': [116.7, 35.42],
'莱芜市': [117.70, 36.28],
}
var data = {
"济南市": "370100",
"青岛市": "370200",
"淄博市": "370300",
"枣庄市": "370400",
"东营市": "370500",
"烟台市": "370600",
"潍坊市": "370700",
"济宁市": "370800",
"泰安市": "370900",
"威海市": "371000",
"日照市": "371100",
"莱芜市": "371200",
"临沂市": "371300",
"德州市": "371400",
"聊城市": "371500",
"滨州市": "371600",
"菏泽市": "371700",
};
function convertData(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;
};
function renderMap(map) {
var option = {
tooltip: {
show: true,
backgroundColor: '#020933', //'#45A3EF', RGB(69,163,239) rgba(69,163,239,1)
trigger: 'item',
formatter: function(params) {
var res = '';
var myseries = option.series;
for (var j = 0; j < myseries[0].data.length; j++) {
if (myseries[0].data[j].name == params.name) {
res += myseries[0].data[j].name +
'</br><img src="./modules/iomc/homepage/images/首页展示-10.png" style="margin-bottom: 5px;"> ' + myseries[0].data[j].value +
'</br><img src="./modules/iomc/homepage/images/首页展示-11.png" style="margin-bottom: 5px;"> ' + myseries[0].data[j].value2 +
'</br><img src="./modules/iomc/homepage/images/首页展示-12.png" style="margin-bottom: 5px;"> ' + myseries[0].data[j].value3;
}
}
return res;
}
},
geo: {
show: true,
roam: true,
top: '40px',
map: map,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
itemStyle: {
normal: {
borderColor: 'white', //地图边界线颜色
borderWidth: 1, //边界线宽度
areaColor: '#B8D7FA', //背景颜色
},
//鼠标悬停事件
emphasis: {
borderColor: '#020933', //鼠标移动地区边框显示颜色 #A1DFF2
borderWidth: 1,
areaColor: '#178CEB', //背景颜色
}
},
},
series: [{
name: map,
type: 'map',
/*center: ['50%', '50%'],*/
aspectScale: 0.75, //长宽比. default: 0.75
data: loadCityData,
geoIndex: 0,
map: map,
}, {
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
roam: true,
data: convertData(loadCityData),
symbolSize: function(val) {
var i = parseInt(val[2]);
if (i < 520) {
return 0.1;
} else {
return 20;
}
},
//label中formatter无法使用html引入img
label: {
normal: {
color: '#000000',
//label中formatter无法使用html引入img
formatter: function(params) {
var res = '';
var myseries = option.series;
for (var j = 0; j < myseries[0].data.length; j++) {
if (myseries[0].data[j].name == params.name) {
//label中formatter无法使用html引入img
res += myseries[0].data[j].name +
'</br><img src="./modules/iomc/homepage/images/首页展示-10.png" style="margin-bottom: 5px;"> ' + myseries[0].data[j].value +
'</br><img src="./modules/iomc/homepage/images/首页展示-11.png" style="margin-bottom: 5px;"> ' + myseries[0].data[j].value2 +
'</br><img src="./modules/iomc/homepage/images/首页展示-12.png" style="margin-bottom: 5px;"> ' + myseries[0].data[j].value3;
}
}
return res;
},
position: 'right',
show: true,
},
},
itemStyle: {
normal: {
color: function(sb) {
debugger;
var i = parseInt(sb.data.value[2]);
if (i > 520) {
return '#F4E925';
} else {
return 'red';
}
}
}
}
},
]
};
};