xiaoshi_system/src/views/analyse/custom/components/Charts/Map/index2.vue

<template>
  <div style="position: relative">
    <div v-for="map in maps">
      <div style="position: absolute;right: 0;z-index: 100">
        <el-button icon="el-icon-camera-solid" size="mini" @click="handleScreenshot(map.name, map.name)">截图</el-button>
      </div>
      <el-tabs v-model="active[map.name]">
        <el-tab-pane :label="map.name" :name="map.name">
          <div :id="map.name" :style="{ width: width, height: height }"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { chartOption } from "@/views/analyse/custom/mixins";

export default {
  mixins: [chartOption],
  name: "CMap2",
  data() {
    return {
      maps: [],
      active: {}
    }
  },
  async mounted() {
    await Promise.all(this.selected.x.map(async (item) => {
      const { data } = await this.$api.getMapData({ path: `/map/${item}.json` })
      this.maps.push({
        name: item,
        map: data
      })
      this.$set(this.active, item, item)
      this.$echarts.registerMap(item, data)
    }))
    this.maps.map(item => {
      this.initChart(item.name, this.getOption(this.getDataCount(item.name), item.name))
    })
  },
  methods: {
    getOption(count, name) {
      let max = 1, x = Object.keys(count || {}), data = [], nameMap = {}
      for (let i = 0; i < x.length; i++) {
        data.push({
          name: x[i],
          value: count[x[i]]
        })
        if (count[x[i]] > max) {
          max = count[x[i]]
        }
      }
      return {
        visualMap: {
          min: 0,
          max: max,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          show: false,
        },
        series: [
          {
            name: '',
            type: 'map',
            map: name,
            roam: true,
            label: this.getDataLabel(),
            itemStyle: {
              borderWidth: 0
            },
            data: data,
            nameMap: nameMap
          }
        ]
      }
    },
  }
}
</script>