main.js 导入
import china from ‘echarts/map/js/china.js’
this.myChart2 = window.Echarts.init(document.getElementById('china'));
let data=this.mapdata
this.myChart2.setOption({ // 进行相关配置
backgroundColor: "#fff",
tooltip: {
trigger: 'item',
formatter: function(data){
// console.log(data);
if( !isNaN(data.value) ){
return data.name+":"+data.value +'%';
}
}
}, // 鼠标移到图里面的浮动提示框
visualMap: {
min: 0,
max: 100,
itemWidth: 15,
itemHeight: 70,
color: ['rgba(84,127,229,1)', 'rgba(84,127,229,8)', 'rgba(84,127,229,6)', 'rgba(84,127,229,.4)', 'rgba(84,127,229,.2)'],
inRange: {
color: ['#8dacf5', '#547fe5']
},
left: 'left',
bottom: '20px',
text: ['高', '低'], // 文本,默认为数值文本
calculable: false,
orient:'horizontal'
},
geo: { // 这个是重点配置区
map: 'china', // 表示中国地图
roam: true,
label: {
normal: {
show: false, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [{
type: 'scatter',
coordinateSystem: 'geo' // 对应上方配置
},
{
name: '人数占比', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: data
}
]
})