echarts实现svg地图

最新推荐文章于 2025-06-20 09:00:03 发布

卷毛崽

最新推荐文章于 2025-06-20 09:00:03 发布

阅读量1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端 VUE 文章标签： echarts javascript ecmascript

本文链接：https://blog.youkuaiyun.com/qq_42221321/article/details/122623060

本文介绍了如何使用ECharts结合SVG来实现地图的绘制。首先通过阿里云数据可视化平台下载SVG地图文件，然后手动为SVG区域添加name属性。接着在HTML中创建用于ECharts渲染的div，并在JavaScript部分使用echarts.init初始化图表，通过echarts.registerMap注册SVG地图。通过匹配name属性，可以正确显示地图的各个区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

链接

阿里云数据可视化平台

介绍

之前写了另一个echarts实现地图的，可以移步这里

这次是用的echarts+svg实现的，参考了echarts的这两个案例
庖丁解牛
 内脏数据

代码

废话不多说，直接上代码

<template>
  <div>
    <h1>深圳罗湖区--svg地图</h1>
    <div id="main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

import $ from "jquery";
import szmap from "../../node_modules/echarts/map/szmap.svg";
export default {
   
   
  data() {
   
   
    return {
   
   };
  },
  methods: {
   
   
    getmap() {
   
   
      var chartDom = document.getElemen