使用 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);

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

相关推荐
haaaaaaarry35 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木3 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts