地圖下鑽
需要重新注冊地圖信息
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