vue+echart实现某一个省下面的市级地图
我随便找了一个省
<div id="shandong-map" style="width: 700px; height: 600px"></div>
data(){
dataList: [ // 可以当作后台返回的数据
{ label: "1", name: "济南市" },
{ label: "4", name: "青岛市" },
{ label: "1", name: "淄博市" },
{ label: "4", name: "枣庄市" },
{ label: "2", name: "东营市" },
{ label: "3", name: "烟台市" },
{ label: "4", name: "潍坊市" },
{ label: "1", name: "济宁市" },
{ label: "4", name: "泰安市" },
{ label: "2", name: "威海市" },
{ label: "1", name: "日照市" },
{ label: "3", name: "滨州市" },
{ label: "4", name: "烟台市" },
{ label: "2", name: "德州市" },
{ label: "3", name: "聊城市" },
{ label: "2", name: "临沂市" },
{ label: "3", name: "菏泽市" },
{ label: "1", name: "莱芜市" },
{ label: "2", name: "临沂市" },
],
}
let result = [];
// 上面定义变量的时候没有写 就自己遍历了一个 要跟下面的visualMap对应
this.dataList.forEach((ele) => {
if (ele.label === "1") {
ele.value = [10, 20];
} else if (ele.label === "2") {
ele.value = [30, 40];
} else if (ele.label === "3") {
ele.value = [50, 68];
} else if (ele.label === "4") {
ele.value = [76, 100];
}
});
// console.log(this.dataList);
let chart = echarts.init(document.getElementById("shandong-map"));
const shandong = require("../../../map/json/province/shandong");
echarts.registerMap("shandong", shandong);
let optios = {
series: [
{
type: "map",
map: "shandong",
zoom: 1,
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } },
},
data: this.dataList,
// geoIndex: 0,
},
],
geo: {
roam: true,
},
tooltip: {
formatter: function (params) {
console.log(params);
return params.name + "<br>" + "当前移入的是:" + params.data.label;
},
},
visualMap: {
show: true,
type: "piecewise",
min: 0,
max: 100,
left: 10,
bottom: 0,
top: "80% ",
// showLabel: 0,
// text: ['高', '低'],
// #FF6F69 #F6BA91 #FCE1CF #D5E8CA #A8CF8E #8CBB6E #6EAA47
showLabel: true,
textStyle: {
color: "#000",
},
pieces: [
{
gt: 75,
lte: 100,
label: "4",
color: "#f7358c",
// inRange: {
// color: ['red', 'black']
// }
},
{
gt: 50,
lte: 75,
label: "3",
color: "#fb9632",
// inRange: {
// color: ['red', 'black']
// }
},
{
gt: 25,
lte: 50,
label: "2",
color: "#08b2ff",
},
{
gte: 0,
lte: 25,
label: "1",
color: "#4d2ed2",
},
// , {
// value: 0,
// color: '#6EAA47'
// }
],
},
};
chart.setOption({ ...optios });