vue echarts 实现一个简单的散点地图，迁移效果

前言

最新的 echarts 5 版本，不再内置地图，要么自行下载 china.js，在项目里引入，要么使用echarts4.9

echart 官方文档 - 去除内置的-geojson

1.安装依赖

yarn add echarts@4.9 --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.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: 680px;
  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
        }
      }
    }
  }
]

效果图

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。