参考代码网址为:https://gallery.echartsjs.com/editor.html?c=xBJDR584vG
效果如下:
但是3.x以上版本本的echarts会遇到一个问题,就是气泡上显示的不是数据信息,而是维度信息,这时需要修改部分代码,修改的代码如下(已标红处理):
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a * min;
b = maxSize4Pin - a * max;
return a * val[2] + b;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter:function(params){
console.log(params) // return params
return params.value[2];
},
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
},
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data:convertData(list),//geoCoordMap
},