以中国地图为例
先看效果
代码实现：
<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]);
)
