vue2 echarts中国地图、在地图上标注经纬度及标注点

1、 npm 安装 echarts4.9(全局引入不支持5.0)

2、 main.js中全局引入echarts:

3、在页面中导入地图的 json 文件(可以使用echarts的文件,也可以使用本地的 json 文件)

4、在页面中使用

javascript 复制代码
<template>
  <div id="app">
    <div id="echart_china" ref="echart_china"></div>
  </div>
</template>
<script>
import chinamap from "echarts/map/json/china.json";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    // 1. 创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例
    this.myChart = this.$echarts.init(this.$refs.echart_china);
    this.init();
  },
  methods: {
    /*
      显示中国地图
    */
    init() {
      // 2. 注册可用的地图,只在 geo 组件或者map图表类型中使用
      this.$echarts.registerMap("china", chinamap); //用导入的json文件注册一个name:china的地图组件
      // 3. 设置图表 option
      var option = {
        geo: {
          type: "map",
          map: "china", //使用 registerMap 注册的地图名称
        },
      };
      console.log("option1:", option);
      // 只显示一个地图的时候,用option,option2都可以。如果要在地图上加散点图,用 option 
      var option2 = {
        series: [
          {
            type: "map",
            map: "china", //使用 registerMap 注册的地图名称
          },
        ],
      };
      console.log("option2:", option2);
      // 4. 显示地图
      this.myChart.setOption(option); // 用 option 和 option2 效果一样
    },
  },
};
</script>
<style scoped>
#echart_china {
  width: 100%;
  height: 500px;
  background-color: #f1f3f4;
}
</style>

名字引用关系如图:

实现效果如下:

5、在地图上显示散点图(在geo地理坐标系中显示散点图)

javascript 复制代码
<template>
  <div id="app">
    <div id="echart_china" ref="echart_china"></div>
  </div>
</template>
<script>
import chinamap from "echarts/map/json/china.json";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    // 1. 创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例
    this.myChart = this.$echarts.init(this.$refs.echart_china);
    this.showScatterInGeo();
  },
  methods: {
    /*
      geo:地理坐标系组件( https://echarts.apache.org/zh/option.html#geo)
      地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图
    */
    showScatterInGeo() {
      // 2. 注册可用的地图,只在 geo 组件或者map图表类型中使用
      this.$echarts.registerMap("china", chinamap); //用导入的json文件注册一个name:china的地图组件
      // 3. 设置图表 option
      var option = {
        geo: {
          type: "map",
          map: "china",
          label: {
            // label 设置文本标签的显示格式,去掉不影响显示地图
            normal: {
              color: "#000000",
              show: true, //显示省份名称
            },
          },
        },
        series: [
          {
            name: "在地图中显示散点图",
            type: "scatter",
            coordinateSystem: "geo", //设置坐标系为 geo
            data: [
              //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}]
              { name: "北京", value: [116.41995, 40.18994] },
              { name: "郑州", value: [113.665412, 34.757975] },
              { name: "天津", value: [117.205126, 39.034933] },
              { name: "昆明", value: [102.81844, 24.906231] },
              { name: "广州", value: [113.26453, 23.155008] },
            ],
          },
        ],
      };
      // 4. myChart.setOption
      this.myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
#echart_china {
  width: 100%;
  height: 500px;
  background-color: #f1f3f4;
}
</style>
相关推荐
程序视点2 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile2 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年2 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神2 小时前
coze娱乐ai换脸
前端
GIS之路2 小时前
GeoTools 开发合集(全)
前端
咖啡の猫2 小时前
Shell脚本-嵌套循环应用案例
前端·chrome
一点一木2 小时前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
萌萌哒草头将军3 小时前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
布列瑟农的星空3 小时前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
山有木兮木有枝_3 小时前
node文章生成器
javascript·node.js