地图

<template>

  <div class="map" ref="chart"></div>

</template>

<script>

//引入中国地图的数据

import 'echarts/map/js/china'

//经纬度

import geoCoordMap from '../china'

 

export default {

  props: {

    mapData: Array

  },

  data() {

    return {

    }

  },

  watch: {

    mapData: {

      handler(data) {

        this.setData(data)

      },

      deep: true

    }

  },

  mounted() {

    this.init()

  },

  methods: {

    init() {

      this.$nextTick(() => {

        this.myEcharts = this.$echarts.init(this.$refs.chart)

        this.setData()

      })

    },

    convertData(data) {

      const res = []

      if (data) {

        const geoCoordMapData = geoCoordMap.geoCoordMap

        for (let i = 0; i < data.length; i++) {

          const geoCoord = geoCoordMapData[data[i].name]

          if (geoCoord) {

            res.push({

              name: data[i].name,

              value: geoCoord.concat(data[i].value),

              value1: data[i].value

            })

          }

        }

      }

      return res

    },

    // 配置

    setData(data) {

      this.myEcharts.setOption({

        title: {

          text: '线索分布统计',

          left: 'center',

          textStyle: {

            color: '#000'

          }

        },

        tooltip: {

          trigger: 'item'

        },

        geo: {

          map: 'china',

          center: [104.114129, 37.550339],

          zoom: 1.1,

          roam: false,

          itemStyle: {

            areaColor: '#004883cc',

            borderColor: '#009ed6',

            borderWidth: 1

          },

          emphasis: {

            itemStyle: {

              areaColor: '#ff9238'

            }

          }

        },

        series: [

          {

            name: '线索量',

            type: 'effectScatter',

            coordinateSystem: 'geo',

            data: this.convertData(data),

            symbolSize: 20,

            showEffectOn: 'emphasis',

            rippleEffect: {

              brushType: 'stroke'

            },

            hoverAnimation: true,

            label: {

              formatter: '{b}',

              position: 'right',

              show: true

            },

            itemStyle: {

              color: '#ffc89f',

              shadowBlur: 10,

              shadowColor: '#ffe9d9'

            },

            zlevel: 1,

            tooltip: {

              formatter (params) {

                return `<div style="windth:200px"><span>${params.seriesName}:</span><br/><span>${params.name}: ${params.value[2]}</span></div>`

              }

            }

          }

        ]

      })

    }

  }

}

</script>

<style lang="less" scoped>

  .map{

    width: 100%;

    height: 420px;

  }

</style>