vue + echarts 省份地图以及打包后地图加载不出来（比较详细）

最新推荐文章于 2024-09-10 18:30:47 发布

梁小茹

最新推荐文章于 2024-09-10 18:30:47 发布

阅读量4.8w

点赞数

分类专栏： vue 文章标签： echarts

本文链接：https://blog.csdn.net/weixin_46653486/article/details/119990236

版权

本文介绍了在Vue项目中使用Echarts创建省份地图遇到的问题及解决方案。包括全局和局部引入Echarts.min.js，如何导入特定省份的地图JSON文件，设置地图容器的宽高，以及在methods中调用地图的方法。特别指出，打包后地图加载失败，需检查static目录下config文件的动态加载配置。提供了一种可能的标注修改方法，供读者参考。

摘要由CSDN通过智能技术生成

刚开始地图怎么也出不来，经过解决，是因为echarts.min.js 引入位置

在index.html 中引入需要的js
版本按照自己需要的来
<script src="./static/plugins/echarts-5.1.2/echarts.common.min.js"></script>
<script src="./static/plugins/echarts.min.js"></script>    （必须引入，地图才能加载）

全局引入

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts

局部引入
我写的时候全局引入没有效果，在页面还是得引入，必须是 * 这样的

import * as vueEcharts from "echarts";

在自己的页面引入需要的省份js

const guangxiJson = require("@/utils/js/guangxi.json");

在该网站上下载需要的地图json（也可以百度搜都有的）
http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5

1.给一个盒子宽高必须给

<div class="map" id="mapBox" style="width:100%;height:100%;"></div>

2.在这里调用

mounted() {
    this.$nextTick(() => {
      vueEcharts.registerMap("guangxi", guangxiJson);
        this.guangxiMap();
    });
  },

3.methods （直接复制就好了，里面的标注位置可以自己修改，或者增加）
上面的标注我是根据这个改的
这是标注参照

guangxiMap() {
      // 获取经纬度数据
      const seriesList = [
        {
          // image: zaixian,
          data: [
            {
              value: [106.9, 27.7],
            },
            {
              value: [105.29, 27.32],
            },
            {
              value: [106.04, 27.03],
            },
            {
              value: [104.82, 26.58],
            },
          ],
        },
        {
          // image: shangxian,
          data: [
            {
              value: [107.43, 28.56],
            },
          ],
        },
        {
          // image: lixian,
          data: [
            {
              value: [107.5, 27.76],
            },
          ],
        },
      ];
      // 自定义图标
      const series = seriesList.map((v) => {
        return {
          type: "custom", //配置显示方式为用户自定义
          coordinateSystem: "geo",
          renderItem(params, api) {
            //具体实现自定义图标的方法
            return {
              type: "image",
              style: {
                image: v.image,
                x: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1],
                ])[0],
                y: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1],
                ])[1],
                width: "29",
                height: "35",
              },
            };
          },
          data: v.data,
        };
      });
      

      // 上面的标注坐标
      var gdGeoCoordMap = {
        "南宁烟厂": [108.320004, 22.82402],
        "柳州烟厂": [109.411703, 24.314617],
        "桂林市": [110.299121, 25.274215],
        "梧州市": [111.297604, 23.474803],
        "北海市": [109.119254, 21.473343],
        "防城港市": [108.345478, 21.614631],
        "钦州市": [108.624175, 21.967127],
        "贵港市": [109.602146, 23.0936],
        "玉林市": [110.154393, 22.63136],
        "百色市": [106.616285, 23.897742],
        "贺州市": [111.552056, 24.414141],
        "静兰烟厂": [109.455500, 25],
        "来宾市": [109.229772, 23.733766],
        "崇左市": [107.353926, 22.404108]

      };
      //**我上面只写了三个标注，如果需要其他的，在这里继续添加就好了，name必须和上面的一样**
      var data = [{
        name: "南宁烟厂",
        // value: 4,

    },
    {
        name: "柳州烟厂",
        value: 4617,
    },

    {
        name: "静兰烟厂",
        value: 5899,
    },
];
      var img = 'image://data:image/png;base64,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