想要實現地圖,首先要引入china.js
文件,如果有引入就直接調過本步驟去下方看代碼,沒有引入可以點擊下方鏈接自行Ctrl c
+ Ctrl v
china.js
import "../../plugins/china.js";
import echarts from 'echarts';
引入之后只需要在代碼中地圖的配置項中添加你需要改變顏色的省份名字即可,名字需要和china.js保持一致
let option = {
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff",
},
roam: true,
zoom: this.zoom,
},
regions: [ //這個地方是關鍵,通過設置regions,可以實現不同的省份邊界線配置不同的顏色,
{
name: '江蘇', //這個名字要和china.js保持一致
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 5,
},
},
},
{
name: '上海',
itemStyle: {
normal: {
borderColor: "red",
borderWidth: 5,
},
},
}
],
}
}