vue echarts 地图 点击事件

<template>
  <div class="accountOwn">
    <div
      class="echartsMap"
      ref="myEchart"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="#28467c"
    ></div>
  </div>
</template>

<script>
import 'echarts/map/js/china.js'
import { api } from '@/api/outside-accoutOwn'
export default {
  data() {
    return {
      chart: null,
      icons: 'icon-map',
      message: '配资客户省份分布',
      seriesData: [],
      allNum: '',
      loading: false
    }
  },
  mounted() {
    this.loading = true
    api
      .getAccountList()
      .then((res) => {
        this.seriesData = res.map((item) => {
          return {
            name: item.province,
            value: Math.ceil(Math.random() * 1000)
          }
        })

        this.seriesData.shift()
        const arr = this.seriesData.map((n) => {
          return n.value
        })
        this.allNum = Math.max(...arr)
        this.seriesData = this.seriesData
          .filter((n) => {
            return n.name
          })
          .map((item) => {
            return {
              name: item.name.slice(0, 2),
              value: item.value
            }
          })
        this.chinaConfigure(this.seriesData, this.allNum)
        this.loading = false
      })
      .catch((err) => {
        this.loading = false
        this.$message({
          message: '服务器异常',
          type: 'error'
        })
      })
  },
  methods: {
    chinaConfigure(seriesData, allNum) {
      let myChart = this.$echarts.init(this.$refs.myEchart) //这里是为了获得容器所在位置
      window.onresize = myChart.resize
      myChart.setOption({
        // 进行相关配置
        backgroundColor: '#28467c',
        visualMap: {
          //显示左下角视觉映射
          min: 0,
          max: allNum,
          left: 'left',
          text: ['高', '低'],
          textStyle: {
            color: '#fff'
          },
          calculable: true,
          color: ['#ff0000', '#ff6800', '#e7f632', '#9cd7ce', '#8fd7fe']
        },
        geo: {
          map: 'china', // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: '#000'
              }
            }
          },
          // 每一块区域的颜色 边框设置
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              areaColor: '#fff',
              borderColor: '#919191'
            },
            emphasis: {
              areaColor: '#fff',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        // 悬浮框
        tooltip: {
          trigger: 'item',
          formatter: function (a) {
            if (a.data) {
              return a.data.name + '\n' + a.data.value
            } else {
              return a.name + '\n' + 0
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          {
            name: '分布情况', // 浮动框的标题
            type: 'map',
            geoIndex: 0,
            data: seriesData
          }
        ]
      })
      // 地图点击每一块区域事件
      myChart.on('click', function (params) {
        console.log(params)
        //逻辑控制
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.accountOwn {
  width: 49%;
  height: 100%;
  background: #28467c;
  border-radius: 20px;
  .echartsMap {
    width: 96%;
    height: 90%;
    margin: -15px auto 0;
    overflow: hidden;
  }
}
</style>