vue中 基于echart地图功能 省级地图下钻和返回、发射线、水波涟漪等功能展示

效果图展示-包含水波涟漪、发射线功能效果图

点击地市、区县下钻功能

vue项目中main.js

import echarts from 'echarts'
import anhui from '../static/commonJs/anHui.json'
window.anhuiData = anhui
echarts.registerMap('anhui',anhui)
Vue.prototype.$echarts = echarts;

页面代码

<template>
  <div class="orioc-chart-wraper">
     <div class="chart" :id="id" ref="chartEle"></div>
     <div class="fanhui" @click="returnMenu" v-if="mapLevel === 2">
          返回至省级地图
     </div>
    <div class="fanhui" @click="returnMenu" v-if="mapLevel === 3">
      返回至市级地图
    </div>
  </div>
</template>

<script>
  import eventBus from '@/components/event/event-bus'
  import cityMapData from './anhuiMap'
export default {
  name: 'index',
  props: {
      LableData: Array
  },
  data() {
      return {
        mapJson: cityMapData.mapJson, // 获取市、区县数据
        id: 'anhiMap',
        option: null,
        echartsObj: null,
        beginMap: 'anhui',
        defaultmapName: '安徽省', // 默认地图名
        mapLevel: 1, // 地图所在层级水平 1为省级 2为市级 3为区县级

        oldName: '', // 变更地图之前地图名
        oldSeriesName: '安徽省', // 变更地图之前地图名

        nowName: '', // 当前城市名
        nowEName: '', // 当前城市名-拼音
        nowCityJson: '', // 当前城市json
        nowSeriesName: '安徽省', // 当前地图名

        colors: [
          '#41E0E9',
          '#1259E5',
          '#FF6C70',
          '#FF2482',
          '#FFA506',
          '#FD8308'
        ],
        geoCoordMap: [],
        centerPoint: {
          name: '', // 合肥
          value: [117.383042, 31.66119]
        }
      }
    },
  mounted() {
      var that = this
      this.geoCoordMap = [
        {
          name: '淮南市',
          value: [116.77, 32.286],
          status: 1
        },
        {
          name: '安庆市',
          value: [116.47, 30.626],
          status: 2
        },
        {
          name: '池州市',
          value: [117.47, 30.486],
          status: 3
        },
        {
          name: '六安市',
          value: [116.51, 31.73],
          status: 3
        },
        {
          name: '蚌埠市',
          value: [117.18, 32.99],
          status: 3
        },
        {
          name: '宣城市',
          value: [118.75, 30.93],
          status: 3
        },
        {
          name: '宿州市',
          value: [117.52, 33.71],
          status: 3
        }
      ]
      this.$nextTick(() => {
        that.echartsObj = that.$echarts.init(document.getElementById(that.id))
        that.setOption(that.beginMap, that.defaultmapName)
  })
      eventBus.$on('onResize', target => {
        that.echartsObj && that.echartsObj.resize()
  })
  },
  methods: {
      setOption(nowMapData, mapName) {
        const that = this
        this.option = {
          title: {
            text: ''
          },
          geo: {
          // 如果在vue里effectScatter没生效，一定要看一下有没有引入geo插件
            map: nowMapData,
            aspectScale: 1.2, // 长宽比
            zoom: 1.1,
            roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启
            show: true, // 是否展示立体感地图，默认展示
            itemStyle: {
              normal: {
                shadowColor: '#013370',
                shadowOffsetX: 0,
                shadowOffsetY: 25
              },
              emphasis: {
                areaColor: '#00E2ED',
                borderWidth: 0
              }
            }
          },
          series: that.setSeries(nowMapData, mapName)

        }
        this.echartsObj.off('click') // 防止echarts点击事件多次执行问题！
        this.echartsObj.setOption(this.option, true)
        this.echartsObj.on('click', function(params) {
          that.changeCityMap(params)
        })
      },
      setSeries(nowMapData, mapName) {
        const series = [
          {
            name: mapName,
            type: 'map',
            zoom: '1.1',
            aspectScale: 1.2, // 长宽比
            roam: false,
            map: nowMapData, // 自定义扩展图表类型
            hoverAnim