< template >
<div style="width:100%;height:770px;" id="yunnanmap"></div>< / template >
< script >
import echarts from "echarts";
export default {
name: "homeMap",
data() {
return{}
},
mounted () {
var map = echarts.init(document.getElementById("yunnanmap"));
const chinaJson = require("../map-data/yunnan.json");
echarts.registerMap("yunnan", chinaJson);
map.setOption({
backgroundColor: "-sharpFFF",
title: {
text: "",
},
tooltip: {
trigger: "item",
formatter: "{b}<br/>{c}"
},
series: [],
geo: {
map: "yunnan",
label: {
emphasis: {
show: true
}
},
},
visualMap: {
min: 0,
max: 100,
text:["High","Low"],
realtime: false,
calculable: true,
inRange: {
color: ["lightskyblue","yellow", "orangered"]
}
},
series: [
{
name: "",
type: "map",
mapType: "yunnan", //
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[{
name : "",
value : 1
}, {
name : "",
value : 5
}, {
name : "",
value : 10
}, {
name : "",
value : 15
}, {
name : "",
value : 20
}, {
name : "",
value : 25
}, {
name : "",
value : 30
}, {
name : "",
value : 35
}, {
name : "",
value : 40
}, {
name : "",
value : 45
}, {
name : "",
value : 50
}, {
name : "",
value : 55
}, {
name : "",
value : 60
}, {
name : "",
value : 65
}, {
name : "",
value : 70
}, {
name : "",
value : 75
}],
}
]
});
window.addEventListener("resize", function () {
map.resize();
});
}};
< / script >
how to make the following effect
