echart

/exp/map/echart/

配置项：https://echarts.apache.org/zh/option.html#series-map

document.addEventListener("DOMContentLoaded", () => {
  const mapDom = document.getElementById("map");

  if (!mapDom) {
    return;
  }

  const echartInstance = echarts.init(mapDom);

  echartInstance.showLoading();

  // 获取 Geo Json 数据
  getGeojsonFeature((geoJson) => {
    // console.log( "cq > ", JSON.stringify( geoJson.features.map((i) => ({ name: i.properties.name, value: 0 })) ) );

    // 注意这里是 echarts ！！！
    // 不是 echartInstance，不是实例！！！
    echarts.registerMap("cq", geoJson);

    echartInstance.setOption({
      series: [
        {
          type: "map",
          map: "cq", // 上面注册的地图
          roam: true,
          aspectScale: 1,
          label: {
            show: true,
          },
          data: customData,
        },
      ],
    });

    echartInstance.hideLoading();
  });

  echartInstance.on("click", function (params) {
    // params.data 与 上面的 customData 对应
  });
});

请求数据

function getGeojsonFeature(callback: (geoJson: any) => void) {
  const xhr = new XMLHttpRequest();
  xhr.open(
    "GET",
    // "../../assets/geojson/cqqiaolian/chongqing-center.json",
    "../../assets/geojson/cqqiaolian/chongqing.json",
    true
  );
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const geojson = JSON.parse(xhr.responseText);

      callback(geojson);
    }
  };

  xhr.send();
}

customData 节选

const customData = [{ name: "万州区", value: 5004638 }];

统战地图记录

function getLabelConfig() {
  const mobile = isMobile();
  if (mobile) {
    // 移动端：使用 rich 文本样式，为"璧山"设置更小的字体
    return {
      show: true,
      textBorderColor: "rgba(255, 255, 255, 1)",
      textBorderWidth: 2,
      formatter: (params: { name: string }) => {
        // 为"璧山"设置更小的字体
        if (params.name === "璧山") {
          const text = params.name.split("");
          return text.map((c) => `{bishan|${c}}`).join("\n");
        }
        return params.name;
      },
      rich: {
        bishan: {
          fontSize: 12, // 移动端整体字体更小
          textBorderColor: "rgba(255, 255, 255, 1)",
          textBorderWidth: 2,
        },
      },
    };
  } else {
    // PC端：保持原有配置
    return {
      show: true,
      textBorderColor: "rgba(255, 255, 255, 1)",
      textBorderWidth: 2,
    };
  }
}

document.addEventListener("DOMContentLoaded", () => {
  console.log("init map");
  const mapDom = document.getElementById("county-map-container");

  if (!mapDom) {
    return console.error("地图的 DOM 节点 #county-map-container");
  }

  const echartInstance = echarts.init(mapDom);

  echartInstance.showLoading();

  // 获取 Geo Json 数据
  getGeojsonFeature((geoJson) => {
    // console.log( "cq > ", JSON.stringify( geoJson.features.map((i) => ({ name: i.properties.name, value: 0 })) ) );

    // 注意这里是 echarts ！！！
    // 不是 echartInstance，不是实例！！！
    echarts.registerMap("cq", geoJson);

    echartInstance.setOption({
      series: [
        {
          type: "map",
          map: "cq", // 上面注册的地图

          layoutCenter: ["50%", "50%"], // 地图中心在容器中心
          aspectScale: 0.85, // 保持地图真实的长宽比，防止拉伸（重庆地图南北较长）
          layoutSize: "95%",

          label: getLabelConfig(),

          itemStyle: {
            areaColor: "#F4A762", // 区域填充色（默认颜色）
            borderColor: "#E4DBD3", // 边界线颜色
            borderWidth: 2, // 边界线宽度
            borderType: "solid", // 边界线类型（solid/dashed/dotted）
          },
          emphasis: {
            itemStyle: {
              areaColor: "#F58725", // hover 时的区域颜色
            },
          },
          select: {
            itemStyle: {
              areaColor: "#F4A762", // 点击选中时颜色保持不变
            },
          },

          data: getMapCustomData(),
        },
      ],
    });

    echartInstance.hideLoading();
  });

  echartInstance.on("click", function (params) {
    // params.data 与 上面的 customData 对应
    console.log(">>> ", params);

    if (!params.data) return;

    const { fullname } = params.data as any;

    // ...
  });

  let lastMobileState = isMobile();

  window.addEventListener("resize", () => {
    echartInstance.resize();
    // 窗口大小改变时，重新设置标签配置以适应新的设备类型
    const currentMobile = isMobile();
    if (currentMobile !== lastMobileState) {
      lastMobileState = currentMobile;
      echartInstance.setOption({
        series: [{ label: getLabelConfig() }],
      });
    }
  });
});