以中国地图为例
先看效果
代码实现:
<div id="refChinaMap" :style="{ width: '75%', height: '100%' }"></div>
import * as echarts from "echarts";
import ChinaJSON from "./chinaMap.json";
const initChinaMap = (touristDomesticFromTop) => {
// 获取地图容器
const mapChart = document.getElementById("refChinaMap");
var mapChartInstance = echarts.init(mapChart);
// 注册地图
echarts.registerMap("china", ChinaJSON);
mapChartInstance.setOption({
layoutCenter: ["50%", "40%"], //位置
layoutSize: 420, //大小
// 游标
visualMap: {
orient: "horizontal",
type: "piecewise",
itemWidth: 30,
itemHeight: 7,
showLabel: false,
seriesIndex: [0],
min: 0,
max: 5000,
calculable: true,
splitNumber: 4,
itemGap: 0,
left: 70,
bottom: 10,
inRange: {
color: ["#88AFFD", "#508AFF", "#3164CB", "#1A3875"],
symbol: "rect",
},
// pieces: [
// { gt: 300, lte: 400, label: "0.75-1" },
// { gt: 200, lte: 300, label: "0.5-0.75" },
// { gt: 100, lte: 200, label: "0.25-0.5" },
// { gt: 0, lte: 100, label: "0-100" },
// ],
},
tooltip: {
trigger: "item",
axisPointer: {
type: "line",
snap: false,
},
showContent: true,
triggerOn: "mousemove",
confine: true,
backgroundColor: "rgba(0,0,0,0.6)",
padding: 15,
position: "left",
borderRadius: 6,
borderColor: "rgba(0,0,0,0.6)",
borderWidth: 1,
textStyle: {
color: "white",
fontStyle: "normal",
fontWeight: "normal",
},
formatter(params) {
console.log(params, "---params");
if (params && params.data && params.data.value) {
var htmlText = `<div> ${params.data.name}:<span style='background: linear-gradient(to right, #5EB5F6, #8BEDF7);-webkit-background-clip: text;color: transparent;font-weight: 600;'>${params.data.shu}</span></div > `;
return htmlText;
} else {
var htmlText = `${params.name}`;
return htmlText;
}
},
},
geo: {
map: "china",
roam: false, //开关可移动可放大
},
series: [
{
type: "map",
mapType: "china",
showLegendSymbol: false, //去掉指示点
itemStyle: {
normal: {
borderWidth: 1, //区域边框宽度
borderColor: "#3457c9", //区域边框颜色
areaColor: "#eaeffe", //区域颜色
label: {
show: false, //是否显示各省名称
textStyle: {
color: "#ff5500", //显示各省名称颜色
},
},
},
emphasis: {
areaColor: "#ef8d47", //区域颜色,鼠标悬停颜色
label: {
show: false, //鼠标悬浮时是否显示各省名称
textStyle: {
color: "#fdf1f6", //鼠标悬浮时显示各省名称的颜色
},
},
},
},
// data: chinaFormdata.value,
data: chinaFormdata.value,
},
],
});
};
json数据和后端联动的数据通过name匹配,所以name名要相同,通俗说,地名要相同。
为了地图的响应式,需要添加以下代码进行优化
const myDiv = document.getElementsByClassName("box-chartMap");
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
const newWidth = entry.contentRect.width;
resizeEcahrts();
resizeEcahrts2();
}
});
observer.observe(myDiv[0]);