1.下载所需要的地理区域的JSON文件,推荐阿里云的那个网址
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
2.引入JSON文件注册地图
3.setOption()
this.myChart.setOption({
tooltip: {
trigger: "item",
formatter: "{b} : {c}",
},
geo: {
// 公共样式
map: "china",
label: {
normal: {
show: false, // 显示省份标签
textStyle: {
color: "#fff",
}, // 省份标签字体颜色
},
},
itemStyle: {
normal: {
label: {
show: true,
},
borderWidth: 0.5, // 区域边框宽度
borderColor: "#A4A4A4", // 区域边框颜色
areaColor: "#fff", // 区域颜色
},
},
emphasis: {
label: {
show: true,
},
areaColor: "#F6C9AB", // 区域颜色
},
roam: false,
zoom: 1.2, // 设置地图默认大小
},
visualMap: [
{
// 地图组件映射
show: true,
seriesIndex: 0, // 指定系列数据
min: 0,//最小值
max: that.max,//最大值
text: ["最多", "最少"],
color: MapColor,//热力图渐变颜色,数组形式
textStyle: {
color: "#fff",
},
left: 100,
},
],
//backgroundColor: "#fff",//背景色
series: [
{
type: "map", // 地图类型
mapType: "china",
roam: true,
geoIndex: 0,
aspectScale: 0.75,
data: that.listData, // 各省地图数据
},
],
});
4.最后效果