ECharts实现地图涟漪效果

效果图如下：

  源码：

<div ref="chart"></div>

  // 引入地图数据
  import chinaMap from "../china.json"
  export default {
    data() {
      return {
        myChart: null,
        option: null,
        seriesData:[
          {
            "name": "北京",
            "value": [116.24, 39.55],
            "text": "测试点1"
          },
          {
            "name": "上海",
            "value": [121.47, 31.23],
            "text": "测试点2"
          },
          {
            "name": "厦门",
            "value": [118.1, 24.46],
            "text": "测试点3"
          },
          {
            "name": "重庆",
            "value": [106.33, 29.35],
            "text": "测试点4"
          },
          {
            "name": "丽江",
            "value": [100.25, 26.86],
            "text": "测试点5"
          }
        ]
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        this.option = {
          backgroundColor: 'transparent',
          tooltip: {
            show: true,
            triggerOn: 'click'
          },
          // 这个属性配置一定要有，要不然无法实现光圈效果
          geo: {
            show: true,
            map: 'china',
            zoom: 0.8, // 视角缩放比例
            roam: true, // 开启缩放和平移
            width: '80%',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: { // 地图背景
                areaColor: '#0061B2',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            }
          },
          series: [
            {
              name: '涟漪效果',
              type: 'effectScatter', // 动态散点图（涟漪特效）
              coordinateSystem: 'geo', // 坐标系为geo（地理坐标系）
              // 第一种写法
              // data: [
              //   // 这里放置你的数据点，每个数据点应包含经纬度和值
              //   [116.46, 39.92, 5], // 北京
              //   [121.47, 31.23, 10], // 上海
              //   [118.1, 24.46, 15], // 厦门
              //   [100.25, 26.86, 6], // 丽江
              //   [106.33, 29.35, 6], // 重庆
              // ],
              // 第二种写法
              data: this.seriesData,
              symbolSize: function (val) { // 动态设置散点大小的回调函数
                // return val[2] * 2;
                return 10;
              },
              // 这几个样式一定要加，加上才有那种光圈的效果
              showEffectOn: 'render', // 动画效果出现的时机 // emphasis
              rippleEffect: { // 波纹特性配置
                brushType: 'stroke', // fill
                color: '#3be8ff' // 涟漪颜色
              },
              hoverAnimation: true, // 鼠标悬停动画
              label: { // 气泡-文本标签
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  color: '#fff',
                  show: true
                }
              },
              symbol: 'circle', // 散点形状
              itemStyle: {
                normal: {
                  color: '#3be8ff', // 散点颜色
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        }
        //注册地图到echarts中  这里的 "china" 要与地图数据的option中的geo中的map对应
        echarts.registerMap("china", { geoJSON: chinaMap })
        this.myChart = echarts.init(this.$refs.chart)
        this.$nextTick(() => {
          this.myChart.setOption(this.option)
        })
        this.myChart.on('click', (e) => {
          console.log('点击', e)
        })
      },
   }
 }

缩小页面，使得地图改变大小：

      resize() {
        this.myChart.resize()
      }

在mounted添加：

window.addEventListener('resize', this.resize)

在destroyed添加：

window.removeEventListener('resize', this.resize)