使用 ECharts 创建连云港市的地图可视化图表

1. ‌初始化图表实例‌

csharp 复制代码

let mapChart = echarts.init(
  document.getElementById("LianYunGangMapContainer"),
  null,
  { renderer: "canvas", useDirtyRect: false }
);

‌作用 ‌：初始化一个 ECharts 实例，绑定到 ID 为 LianYunGangMapContainer 的 DOM 元素。
‌参数‌：
- renderer: "canvas"：强制使用 Canvas 渲染（默认可能根据数据量自动选择 Canvas/SVG）。
- useDirtyRect: false：禁用脏矩形渲染优化（确保兼容性或解决特定渲染问题）。

2. ‌注册自定义地图数据‌

arduino 复制代码

echarts.registerMap("连云港市", geoJson);

‌作用‌：将自定义的 GeoJSON 数据注册为名为"连云港市"的地图，后续可通过此名称引用。
‌注意 ‌：geoJson 需包含有效的行政区划边界数据（如多边形的经纬度坐标）。

3. ‌配置图表选项‌

go 复制代码

const option = {
  geo: {
    map: "连云港市", // 使用注册的地图名称
    type: "map", // 声明为地图类型
    roam: true, // 允许鼠标缩放和拖拽地图
    label: {
      show: true, // 不显示地区名称标签
      color: "#333",
    },
    itemStyle: {
      areaColor: "white", // 区域默认填充色（白色）
      borderColor: "#2979ff", // 边框颜色（深蓝色）
      borderWidth: 2, // 边框宽度
    },
    emphasis: { // 高亮状态样式（鼠标悬停或选中时）
      itemStyle: {
        areaColor: "#a4d1ff", // 浅蓝色
      },
      label: {
        color: "#000", // 高亮时标签颜色（但 show: false 导致标签不显示）
      },
    },
  },
};

‌关键配置‌：
- roam: true：用户可通过鼠标拖拽移动地图，滚轮缩放。
- label.show: true：显示地区名称标签，若需隐藏需改为 false。
- emphasis：定义鼠标交互时的样式，当前配置高亮时无变化（可调整 areaColor 以突出）。

4. ‌应用配置并渲染‌

ini 复制代码

mapChart.setOption(option);

‌作用 ‌：将配置项 option 应用到图表实例，触发地图渲染。

‌完整示例‌

javascript 复制代码

  //连云港市geo数据下载 https://geo.datav.aliyun.com/areas_v3/bound/320700_full.json
  //下载完后引入
  import geoJson from "./320700_full.json";
  echarts.registerMap("连云港市", geoJson); //注册为名为"连云港市"的地图，后续可通过此名称引用
  
  let mapChart = echarts.init(
    document.getElementById("LianYunQuMapContainer"),
    null,
    { renderer: "canvas", useDirtyRect: false }, // 明确指定渲染器
  );
  
  const option = {
    geo: {
      map: "连云港市", // 与注册的名称一致
      type: "map",
      roam: true, // 允许缩放拖动
      label: {
        show: true, // 显示区域名称
        color: "#333",
      },
      itemStyle: {
        areaColor: "white", // 区域颜色
        borderColor: "#2979ff", // 边框颜色
        borderWidth: 2,
      },
      emphasis: {
        // 高亮样式
        itemStyle: {
          areaColor: "#a4d1ff",
        },
        label: {
          color: "#000",
        },
      },
    },
  };
  mapChart.setOption(option);

这段代码会创建一个可交互的连云港市地图，并允许通过数据驱动区域颜色变化。