地图下钻
需要重新注册地图信息
registerAndsetOption(myChart, name, mapJson, serData) {
this.cityName = name;
//把获取到的城市name和 城市地图json 用来注册地图
this.$echarts.registerMap(name, mapJson);
//图表的配置文件
this.mapChartOption = {
//鼠标放置在地图上的显示
tooltip: {
trigger: "item",
formatter: function(p) {
let a = p.name + ":" + "￥" + toMoney(p.value);
if (!p.value) {
a = p.name + ": 暂无数据";
}
return a;
}
// formatter: "{a} <br/>{b} : {c}"
},
geo: {
map: name,
aspectScale: 1, //长宽比
label: {
//地图上的名称
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: "rgba(5, 17, 41, 0.5)",
borderColor: "#2acaff",
borderWidth: 3, //设置外层边框
shadowColor: "#2acaff",
shadowBlur: 15,
opacity: 0.4
}
}
},
series: [
{
name: "市",
type: "map",
aspectScale: 1,
roam: false,
map: name,
hoverable: false,
label: {
//地图上的名称
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: 12
}
},
emphasis: {
// 对应的鼠标悬浮效果
show: false,
textStyle: {
color: "#fff",
fontSize: 12
}
}
},
itemStyle: {
normal: {
// areaColor: "#05112987",
borderColor: "#2acaff",
areaColor: "rgba(5, 17, 41, 0.8)"
},
emphasis: {
borderWidth: 0,
borderColor: "#2acaff",
areaColor: "#2acaff",
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
data: serData
}
],
grid: {
left: "4%",
right: "4%",
bottom: "0",
containLabel: true
},
//左下角lengend
dataRange: {
min: this.minValue,
max: this.maxValue,
x: "15%",
y: "bottom",
text: ["高", "低"], // 文本，默认为数值文本
// color: ["#ff0801", "#e5ef07", "#51ca0c", "#151576"],
calculable: true,
textStyle: {
color: "#fff" // 值域文字颜色
}
}
};
myChart.setOption(this.mapChartOption, true);
},
分享一个地图信息的网址 http://datav.aliyun.com/tools/atlas/index.html