vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標注坐標散點圖的操作代碼

更新時間：2024年05月16日 09:04:25 作者：sunshine233

這篇文章主要介紹了vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標注坐標散點圖,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

1、 npm 安裝 echarts4.9（全局引入不支持5.0）
2、 main.js中全局引入echarts：
3、在頁面中導入地圖的 json 文件（可以使用echarts的文件，也可以使用本地的 json 文件）
4、在頁面中使用
5、在中國地圖上顯示散點圖（在geo地理坐標系中顯示散點圖）

1、 npm 安裝 echarts4.9（全局引入不支持5.0）

npm install echarts@4.9.0

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

//main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在頁面中導入地圖的 json 文件（可以使用echarts的文件，也可以使用本地的 json 文件）

import chinamap from "echarts/map/json/china.json";
//兩個導入效果一樣
// import chinamap from '../assets/map/china.json';

4、在頁面中使用

<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. 創(chuàng)建一個 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>

名字引用關系如圖：

實現(xiàn)效果如下：

5、在中國地圖上顯示散點圖（在geo地理坐標系中顯示散點圖）

<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. 創(chuàng)建一個 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>

效果如下：