本文主要是介绍echarts省份标注加散点效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这个是安徽的效果图，鼠标移到红色标注或者对应的市区位置都会显示对应的数值。
先直接上代码：
import anhuiMapJson from './anhui.json'
getCoords: function(city) {var res = [];if (city != null) {for (var c in this.cityMap.features) {if (this.cityMap.features[c].properties.name == city) {res = this.cityMap.features[c].properties.cp;break;}}return res;} else {return res;}},convertData: function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = this.getCoords(data[i].name);if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;},loadMapAH() {var data = [];this.getPost("xxxx/xxxxx", this.queryParams).then(response => {var result = response.data;if (result.returnCode == "0") {data = result.data.list;var max = 480, min = 9; // todo var maxSize4Pin = 100, minSize4Pin = 20;this.e3.registerMap('anhui', anhuiMapJson);let main1 = this.e3.init(document.getElementById("main1"));let option = {tooltip: {trigger: 'item',formatter: function(params) {if (typeof (params.value)[2] == "undefined") {if(isNaN(parseInt(params.value))){return params.name + ' : ' + '-';}else {return params.name + ' : ' + params.value;}} else {return params.name + ' : ' + params.value[2];}}},legend: {orient: 'vertical',y: 'bottom',x: 'right',data: ['pm2.5'],textStyle: {color: '#fff'}},visualMap: {show: false,min: 0,max: 500,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: {}},geo: {show: true,map: 'anhui',label: {normal: {show: false},emphasis: {show: false,}},left:'45%', //调整地图初始化位置roam: true,itemStyle: {normal: {areaColor: 'transparent',borderColor: '#3fdaff',borderWidth: 2,shadowColor: 'rgba(63, 218, 255, 0.5)',shadowBlur: 30},emphasis: {areaColor: '#2B91B7',}}},series: [{type: 'map',map: 'anhui',geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#FFFFFF',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{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,}}},itemStyle: {normal: {color: '#F62157', //标志颜色}},zlevel: 6,data: this.convertData(data)},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: this.convertData(data.sort(function(a, b) {return b.value - a.value;})),symbolSize: function(val) {return val[2] / 5;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#F4E925',shadowBlur: 10,shadowColor: '#05C3F9'}},zlevel: 1},]};setTimeout(() => {main1.setOption(option);main1.resize();}, 10);}});
import 导入的是安徽对应的json地图文件，然后getCoords方法是自己写的，根据后端请求的数据去跟json文件中的市名字比对，返回对应的地理坐标系。
需要后端返回的数据格式为
data = [{name: '海门', value: 9},{name: '鄂尔多斯', value: 12},{name: '招远', value: 12}]
注意：后端返回的数据一定要跟地图名称的对应，如果返回其他省份地市的名字数据会有可能导致数据显示异常。
这篇关于echarts省份标注加散点效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
