vue echarts 實現一個簡單的散點地圖，遷移效果

1.安裝echarts

npm install echarts --save

示例：

拷貝下來直接看效果：

<template>
  <div class="map-container">
    <div class="map" ref="mapChart"></div>
  </div>
</template>

<script>
// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// geo 用於繪製散點地圖
import 'echarts/lib/component/geo';
// 引入地圖js包
import 'echarts/map/js/china.js';
export default {
  data() {
    return {
      mapChart: null // 地圖實例
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 初始化地圖
      this.initMap();
    });
  },
  beforeDestroy() {
    // 實例銷燬前 清空實例
    this.mapChart = null;
    // 解綁屏幕監聽事件
    window.removeEventListener('resize', this.resize, false);
  },
  methods: {
    resize() {
      this.mapChart.resize();
    },
    initMap() {
      // 地圖實例
      this.mapChart = echarts.init(this.$refs.mapChart);
      // 初始配置地圖
      let mapOption = this.mapOption();
      this.mapChart.setOption(mapOption);
      // 綁定監聽事件 圖形屏幕自適應
      window.addEventListener('resize', this.resize, false);
    },
    mapOption() {
      // 地圖配置
      let option = {
        geo: {
          map: 'china', // js地圖包
          type: 'scatter', // 散點圖
          zoom: 1.16,
          // 地圖文本標籤設置
          label: {
            normal: {
              show: true, // 顯示市級名稱
              color: '#035167'
            },
            emphasis: {
              show: true
            }
          },
          // 地圖區域設置
          itemStyle: {
            normal: {
              color: 'lightskyblue', // 地圖背景色
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 0.5
            },
            emphasis: {
              areaColor: 'orangered', // 滑過高亮顏色
              borderColor: '#111'
            }
          }
        },
        series: [
          {
            name: '漣漪城市',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            symbol: 'circle', // 標記的圖形。
            symbolSize: 15, // 標記的大小。
            rippleEffect: {
              period: 4, // 動畫速度，值越小，動畫越快
              brushType: 'stroke' // 波紋的繪製方式
            },
            // 漣漪文字效果
            label: {
              normal: {
                show: true,
                // 提示內容
                formatter: params => {
                  return params.name;
                },
                position: 'top', // 提示方向
                color: '#fff'
              },
              emphasis: {
                show: true // 點
              }
            },
            itemStyle: {
              normal: {
                color: 'orangered'
              }
            },
            data: [
              {
                name: '南京', // 城市name
                value: [118.796252, 32.0739, 23] // 城市座標 前兩個經緯度 第三個value值
              },
              {
                name: '西藏',
                value: [91.11, 29.97]
              },
              {
                name: '廣西',
                value: [107.88, 22.863, 17]
              }
            ]
          },
          {
            type: 'lines', // 線數據
            zlevel: 1,
            effect: {
              show: true,
              period: 4, // 箭頭指向速度，值越小速度越快
              trailLength: 0.01, // 特效尾跡的長度。取從 0 到 1 的值，數值越大尾跡越長。
              symbol: 'arrow', // 特效圖形的標記。
              symbolSize: 5 // 特效標記的大小
            },
            lineStyle: {
              normal: {
                width: 1, // 尾跡線條寬度
                color: 'orangered', // 線顏色
                opacity: 0.6, // 尾跡線條透明度
                curveness: 0.2 // 邊的曲度，支持從 0 到 1 的值，值越大麴度越大。
              }
            },
            data: [
              {
                fromName: '南京', // 起點城市name
                toName: '廣西', // 終點城市name
                value: 2, // value值
                coords: [
                  [107.88, 22.863], // 起點城市座標
                  [118.796252, 32.0739] // 終點城市座標
                ]
              },
              {
                fromName: '南京',
                toName: '西藏',
                value: 10,
                coords: [
                  [118.796252, 32.0739],
                  [91.11, 29.97]
                ]
              },
              {
                fromName: '西藏',
                toName: '廣西',
                value: 10,
                coords: [
                  [91.11, 29.97],
                  [107.88, 22.863]
                ]
              }
            ]
          }
        ]
      };
      return option;
    }
  }
};
</script>

<style scoped>
.map-container {
  width: 800px;
  height: 600px;
  margin: 0 auto;
}
.map {
  width: 100%;
  height: 100%;
}
</style>

geo配置項，隱藏南海諸島

// 隱藏南海諸島
   regions: [
     {
       name: '南海諸島',
       value: 0,
       label: {
         normal: {
           show: false
         },
         emphasis: {
           show: false
         }
       },
       itemStyle: {
         normal: {
           opacity: 0,
             label: {
               show: false
             },
             emphasis: {
               show: false
             }
          }
       }
     }
  ]

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方，希望你在看到之後能夠在評論裏指出來，我會在看到之後儘快的回覆你。