vue项目百度地图+echarts的涟漪水波效果

先看效果

<template>
      <div class="content">
        <div
          id="allmap"
          class="map"
          ref="map"
        ></div>
      </div>
</template>


<script>
import echarts from "echarts";
import "echarts/extension/bmap/bmap";
export default {
  data() {
    return {
      chart: echarts.ECharts,
      bmap: {},
      mapZoom: 6,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.chart = echarts.init(this.$refs.map);
      this.chart.setOption({
        bmap: {
          center: [116.43244,39.911172],
          zoom: 16,
          roam: true
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: [{ name: "111", value: [116.43244,39.911172] }],
            symbolSize: [20, 20],
            showEffectOn: "render",
            rippleEffect: {
              period: 2, // 涟漪特效的动画周期
              scale: 5, // 涟漪特效动画中波纹的最大缩放比例
              brushType: "fill" // 涟漪特效的波纹绘制方式
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                show: false,
                fontSize: 16,
                color: "#222222",
                fontWeight: "bolder",
                lineHeight: 40,
                position: ["200%", "200%"],
                distance: 20,
                align: "center",
                backgroundColor: "#FFFFFF",
                borderRadius: 5,
                padding: 20,
                shadowColor: "rgba(0,0,0,0.16)",
                shadowBlur: 6,
                shadowOffsetX: 0,
                shadowOffsetY: 3,
                width: 200
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#d3463e"
              },
              emphasis: {
                color: "red"
              }
            },
            zlevel: 1
          }
        ]
      });
      // 获取百度地图实例，使用百度地图自带的控件
      this.bmap = this.chart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      this.bmap.setMinZoom(6); // 设置地图最小缩放比例
      this.bmap.setMaxZoom(24); // 设置地图最大缩放比例
      const _this = this;
      // 监听地图比例缩放， 可以根据缩放等级控制某些图标的显示
      this.bmap.addEventListener("zoomend", function() {
        _this.mapZoom = _this.bmap.getZoom();
      });
    },
  }
};
</script>


<style lang="less" scoped>
.content {
  width: 100%;
  margin-top: 8px;
  height: calc(100% - 38px);
  float: right;
  .map {
    width: 100%;
    height: 100%;
    float: left;
  }
}
</style>