在echarts中使用geojson地图

以中国地图为例

先看效果

代码实现：

<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]);复制