import echarts from "echarts";
import getCityLists from "../../../json/shandong.json";
import { 接口} from "@/api/接口.js";
接口方法名().then(res => {
myChart.showLoading();
echarts.registerMap("shandong", getCityLists);
myChart.hideLoading();
let geoCoordMap = {
济南市: [117.121225, 36.66466],
菏泽市: [115.480656, 35.23375],
济宁市: [116.59, 35.38],
德州市: [116.39, 37.45],
聊城市: [115.97, 36.45],
泰安市: [117.13, 36.18],
临沂市: [118.35, 35.05],
淄博市: [118.05, 36.78],
枣庄市: [117.57, 34.86],
滨州市: [118.03, 37.36],
潍坊市: [119.1, 36.62],
东营市: [118.49, 37.46],
青岛市: [120.3, 36.62],
烟台市: [120.9, 37.32],
威海市: [122.1, 37.2],
日照市: [119.1, 35.62]
};
let data = [];
let dataitem = res.data.data;
dataitem.forEach(item => { //这里是渲染对象,转换成你需要的格式,但是name,value不可改动哦!!!!!!
let o = {
name: item.city,
value: 111, //value只是用于下方显示颜色用,随意设定数字
字段名:item.某某某
};
data.push(o);
});
let convertData = function(data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
提示框如需配置其他请获取定义 O 里相应的字段名即可
});
}
}
return res;
};
let option = {
legend: {
show: false
},
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: "#000",
decoration: "none"
},
formatter: function(params) {
let tipHtml = "";
tipHtml =
'<div>" +
字符串拼接你需要的样式div
"</div>";
return tipHtml;
}
},
visualMap: {
show: false,
x: "left",
y: "center",
seriesIndex: [1],
textStyle: {
color: "#fff"
},
inRange: {
color: ["#009ef4"] // 你地图需要的配色设置,这里只做统一配色
}
},
geo: {
map: "shandong",
zoom: 1.2,
left: "25%",
itemStyle: {
//地图区域的多边形 图形样式
color: "#fff",
normal: {
borderWidth: 1,
borderColor: "rgba(37,124,169)",
// shadowColor: "#e8e8e8",
shadowOffsetY: 15,
shadowOffsetX: 8
}
}
},
series: [
{
name: "",
type: "effectScatter",
left: "25%",
coordinateSystem: "geo",
data: convertData(data),
zoom: 1.2,
symbolSize: 20,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
formatter: "{b}",
position: "bottom",
color: "#fff",
show: true
}
},
itemStyle: {
normal: {
color: "#10f9ff",
shadowBlur: 0,
shadowColor: "#05C3F9"
}
},
zlevel: 1
},
{
type: "map",
mapType: "shandong",
left: "25%",
zoom: 1.2,
roam: false, //是否开启鼠标缩放和平移漫游
showLegendSymbol: false,
label: {
show: false
},
itemStyle: {
//地图区域的多边形 图形样式
normal: {
borderWidth: 1,
borderColor: "#28729f",
areaColor: "#29b4b7"
},
emphasis: {
//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label: {
show: false,
textStyle: {
color: "transparent"
}
},
borderColor: "#28729f",
areaColor: "#9ea9f7"
}
},
data: data
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
});