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

<template>
  <div id="map-wrapper" style="width:100%;height: 650px" v-if="!taskInfo.length"/>
  <div v-else style="margin: auto">暂无数据生成分布图</div>
</template>

<script>
import { geoCoordMap } from './map-data'

export default {
  name: 'StaffDistributionMap',
  props: ['taskInfo'],
  watch: {
    taskInfo (newVal, oldVal) {
      let targetProvince = newVal.companyProvince
      targetProvince = this.changeProvinceName(targetProvince)
      // 初始化起点数据
      const provinceCountMap = new Map()
      newVal.testers.forEach(tester => {
        let provinceName = tester.province
        provinceName = this.changeProvinceName(provinceName)
        if (provinceName) {
          let val = provinceCountMap.get(provinceName) || 0
          val++
          provinceCountMap.set(provinceName, val)
        }
      })
      // 初始化飞线数据
      const fromDatas = []
      provinceCountMap.forEach((v, k) => {
        fromDatas.push({name: k, value: v})
      })
      // 基于准备好的dom，初始化echarts实例
      const chart = this.$echarts.init(document.getElementById('map-wrapper'))
      // 地图展现数据
      const series = []

      const convertData1 = function (data) {
        const res = []
        for (let i = 0; i < data.length; i++) {
          const dataItem = data[i]
          let fromCityName = dataItem[0].name
          let toCityName = dataItem[1].name
          const fromCoord = geoCoordMap[fromCityName]
          const toCoord = geoCoordMap[toCityName]
          if (fromCoord && toCoord) {
            res.push({
              fromName: fromCityName, toName: toCityName, coords: [fromCoord, toCoord]
            })
          }
        }
        return res
      }

      const convertData2 = function (data) {
        const res = []
        for (var i = 0; i < data.length; i++) {
          let cityName = data.name
          const geoCoord = geoCoordMap[cityName]
          if (geoCoord) {
            res.push({
              name: cityName,
              value: geoCoord.concat(data.value)
            })
          }
        }
        return res
      }

      const getMapDataAction = function () {
        fromDatas.map((fromData, index) => {
          let myData = [[{name: fromData.name, value: fromData.value}, {name: targetProvince}]]
          series.push({
            name: targetProvince,
            type: 'scatter',
            zlevel: 20,
            color: '#f00',
            coordinateSystem: 'geo',
            symbolSize: 10,
            itemStyle: {
              normal: { color: '#f00' }
            }
          },
          {
            type: 'lines',
            zlevel: 15,
            effect: {
              show: true, period: 4, trailLength: 0, symbol: 'arrow', symbolSize: 7
            },
            lineStyle: {
              normal: { width: 1.2, opacity: 0.6, curveness: 0.2, color: '#F19000' }
            },
            data: convertData1(myData)
          },
          // 出发点
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 15,
            rippleEffect: {
              period: 4, brushType: 'stroke', scale: 4
            },
            symbol: 'circle',
            symbolSize: function (val) {
              return 4 + val[2] / 10
            },
            itemStyle: {
              normal: { show: false }
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.value) {
                  return params.name + ' : ' + params.value
                } else {
                  return params.name
                }
              }
            },
            data: [{
              name: fromData.name, value: fromData.value
            }]
          },
            /* 到达点 */
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              period: 4, brushType: 'stroke', scale: 4
            },
            zlevel: 15,
            label: {
              normal: {
                show: false
              }
            },
            symbol: 'circle',
            symbolSize: 15,
            itemStyle: {
              normal: {
                color: '#F19000'
              }
            },
            tooltip: {
              show: true
            },
            data: myData.map(function (dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[0].name] ? geoCoordMap[dataItem[0].name].concat([dataItem[1].name]) : '',
                tooltip: {
                  formatter: dataItem[0].name + '--' + dataItem[1].name + '：' + dataItem[0].value
                }
              }
            })
          })
          // })
        })

        const option = {
          title: {
            text: '众测工人分布图',
            padding: 20
          },
          backgroundColor: 'white',
          color: ['#e68b55'],
          tooltip: {
            trigger: 'item',
            show: false
          },
          legend: {
            show: true,
            orient: 'horizontal',
            left: '27%',
            top: '5%',
            data: ['高线'],
            textStyle: {
              color: '#ffffff'
            },
            icon: 'circle'
          },
          geo: {
            map: 'china',
            zlevel: 10,
            layoutCenter: ['50%', '50%'],
            roam: false, // 是否允许缩放
            layoutSize: '100%',
            zoom: 1.26,
            label: {
              normal: {
                show: true, // 地图上的省份名称是否显示
                textStyle: {
                  fontSize: 12,
                  color: '#43D0D6'
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#062031',
                borderWidth: 1.1,
                borderColor: '#43D0D6'
              },
              emphasis: {
                areaColor: '#43D0D6'
              }
            }
          },
          series: series
        }
        chart.setOption(option)
        console.log(1, series)
      }
      getMapDataAction()
      window.onresize = () => {
        // 这里使用箭头函数，避免this指向问题
        chart && chart.resize()
      }
    }
  },
  methods: {
    changeProvinceName (provinceName) {
      if (provinceName && provinceName.endsWith('省')) {
        provinceName = provinceName.substr(0, provinceName.length - 1)
      } else if (provinceName && provinceName.endsWith('市')) {
        provinceName = provinceName.substr(0, provinceName.length - 1)
      } else if (provinceName === '西藏自治区') {
        provinceName = '西藏'
      } else if (provinceName === '广西壮族自治区') {
        provinceName = '广西'
      } else if (provinceName === '内蒙古自治区') {
        provinceName = '内蒙古'
      } else if (provinceName === '宁夏回族自治区') {
        provinceName = '宁夏'
      } else if (provinceName === '新疆维吾尔自治区' || provinceName === '新疆自治区') {
        provinceName = '新疆'
      } else if (provinceName === '香港特别行政区') {
        provinceName = '香港'
      } else if (provinceName === '澳门地区') {
        provinceName = '澳门'
      }
      return provinceName
    }
  }
}

</script>

<style scoped>

</style>