echarts地图简易demo实现（详细）

最新推荐文章于 2026-01-23 00:20:22 发布

原创最新推荐文章于 2026-01-23 00:20:22 发布 · 983 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本文介绍了如何在Vue项目中下载并使用ECharts库，引入地图json数据，如Hebei.json，展示省级行政区划的数据，并详细展示了地图配置和页面代码实现。

最终效果：

1、下载echarts，进行引入

2、引入对应的地图json文件 https://hxkj.vip/demo/echartsMap/，我用的是这个平台，也可以使用

https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

以第一个为例，打开链接，选择省市，对数据进行下载

3、页面具体代码

<template>
  <div ref="charts" class="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
import Hebei from "./Hebei.json";
export default {
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
        const option = {
        backgroundColor: "#020933",
        // 提示浮窗样式
        tooltip: {
          show: false,
          trigger: "item",
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100,
        },
        // 地图配置
        geo: {
          map: "mapTest",
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },

          itemStyle: {
            normal: {
              borderColor: "#2ab8ff",
              borderWidth: 1.5,
              areaColor: "#12235c",
            },
            emphasis: {
              areaColor: "#2ab8ff",
              borderWidth: 0,
            },
          },
        },
      };
      //注意，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("mapTest", Hebei);
      charts.setOption(option);
    },
  },
};
</script>
<style scoped>
.echarts{
 width: 1032px;
  height: 846px;
}
</style>

标签

#swift #开发语言 #ios