cofortest-frontend/src/pages/Statistics/components/map/TotalMap.vue

<template>
  <div id="map-wrapper" style="width:100%; height: 100%;"/>
</template>

<script>
export default {
  name: 'TotalMap',
  data: function () {
    return {
      provinceCountDatas: [],
      provinces: [
        '北京市',
        '天津市',
        '河北省',
        '山西省',
        '内蒙古自治区',
        '辽宁省',
        '吉林省',
        '黑龙江省',
        '上海市',
        '江苏省',
        '浙江省',
        '安徽省',
        '福建省',
        '江西省',
        '山东省',
        '河南省',
        '湖北省',
        '湖南省',
        '广东省',
        '广西壮族自治区',
        '海南省',
        '重庆市',
        '四川省',
        '贵州省',
        '云南省',
        '西藏自治区',
        '陕西省',
        '甘肃省',
        '青海省',
        '宁夏回族自治区',
        '新疆自治区',
        '台湾省',
        '香港特别行政区',
        '澳门特别行政区'
      ]
    }
  },
  props: {
    provinceCounts: {
      type: Array
    }
  },
  watch: {
    provinceCounts (newVal, oldVal) {
      this.provinceCountDatas = []
      let provinceCountMap = {}
      newVal.forEach(provinceCountInfo => {
        let countInfo = {}
        countInfo['testerCount'] = provinceCountInfo.testerCount
        countInfo['companyCount'] = provinceCountInfo.companyCount
        countInfo['orgCount'] = provinceCountInfo.orgCount
        countInfo['projectCount'] = provinceCountInfo.projectCount
        countInfo['taskCount'] = provinceCountInfo.taskCount
        provinceCountMap[provinceCountInfo.name] = countInfo
      })
      this.provinces.forEach(province => {
        let countInfo = provinceCountMap[province]
        if (!countInfo) {
          countInfo = {'testerCount': 0, 'companyCount': 0, 'orgCount': 0, 'projectCount': 0, 'taskCount': 0}
        }
        this.provinceCountDatas.push({'name': this.changeProvinceName(province), 'value': countInfo})
      })
      this.initChart()
    }
  },
  mounted () {
    this.$nextTick(() => this.initChart())
  },
  methods: {
    changeProvinceName (provinceName) {
      if (provinceName.indexOf('内蒙古') != -1) {
        return '内蒙古'
      } else if (provinceName.indexOf('广西') != -1) {
        return '广西'
      } else if (provinceName.indexOf('西藏') != -1) {
        return '西藏'
      } else if (provinceName.indexOf('宁夏') != -1) {
        return '宁夏'
      } else if (provinceName.indexOf('新疆') != -1) {
        return '新疆'
      } else if (provinceName.indexOf('香港') != -1) {
        return '香港'
      } else if (provinceName.indexOf('澳门') != -1) {
        return '澳门'
      } else {
        return provinceName.substring(0, provinceName.length - 1)
      }
    },
    initChart () {
      // 基于准备好的dom，初始化echarts实例
      const chart = this.$echarts.init(document.getElementById('map-wrapper'))
      // 地图展现数据
      const series = [
        {
          type: 'map',
          map: 'china',
          label: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: '#dddddd'
            }
          },
          itemStyle: {
            // normal: {
            //   color: '#062031',
            //   borderWidth: 1.1,
            //   borderColor: '#43D0D6'
            // },
            emphasis: {
              areaColor: '#43D0D6'
            },
            areaColor: '#117a8b'
          },
          data: this.provinceCountDatas
        }
      ]
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: function (params, ticket, callback) {
            return params.name + '<br/>众测工人：' + params.data.value.testerCount + '<br/>注册公司：' + params.data.value.companyCount +
              '<br/>众测机构：' + params.data.value.orgCount + '<br/>项目发包：' + params.data.value.projectCount + '<br/>任务发包：' + params.data.value.taskCount
          },
          textStyle: {
            fontSize: 10
          }
        },
        series: series
      }
      chart.setOption(option)
      window.onresize = () => {
        // 这里使用箭头函数，避免this指向问题
        chart && chart.resize()
      }
    }
  }
}

</script>

<style scoped>

</style>