echarts map地图

<template>
<div id="map" ref="map" style="width: 100%;height: 780px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
methods:{
   mapmooudel(num=1) {
   let mydata=[{
        name: "39284\n杭州市",
        value: [119.468907, 29.9003106, 39284, "1~4名"],
        city: '杭州市',
        num: '39284'
    },
    {
        name: "2445\n台州市",
        value: [121.008, 28.90222, 2445, "1~4名"],
        city: '台州市',
        num: '2445'
    },
    {
        name: "22142\n温州市",
        value: [120.4444, 27.9, 22142, "1~4名"],
        city: '温州市',
        num: '22142'
    },
    {
        name: "2445\n舟山市",
        value: [122.1377, 30.05805, 2445, "1~4名"],
        city: '舟山市',
        num: '2445'
    },
    {
        name: "11916\n嘉兴市",
        value: [120.7561, 30.63832, 11916, "5~8名"],
        city: '嘉兴市',
        num: '11916'
    },
    {
        name: "13325\n湖州市",
        value: [119.8678, 30.74452, 13325, "5~8名"],
        city: '湖州市',
        num: '13325'
    },
    {
        name: "17081\n绍兴市",
        value: [120.6354, 29.73544, 17081, "5~8名"],
        city: '绍兴市',
        num: '17081'
    },
    {
        name: "28034\n金华市",
        value: [119.9509, 29.1183, 28034, "5~8名"],
        city: '金华市',
        num: '28034'
    },
    {
        name: "12876\n丽水市",
        value: [119.5106, 28.19943, 12876, "9~11名"],
        city: '丽水市',
        num: '12876'
    },
    {
        name: "13189\n衢州市",
        value: [118.57263, 28.93455, 13189, "9~11名"],
        city: '衢州市',
        num: '13189'
    },
    {
        name: "18906\n宁波市",
        value: [121.4619, 29.73276, 18906, "9~11名"],
        city: '宁波市',
        num: '18906'
    }
]
      let color = num === 0?'#08f0e7':'#ffc700'
      let map = echarts.init(this.$refs.map)
      let option = {
        timeline: {
          show: false
        },
        baseOption: {
          geo: {
            map: '浙江',
            aspectScale: 1,
            zoom: 1.5,
            left: '21%',
            right: '19%',
            z: 15,
            label: {
              emphasis: {
                show: false
              }
            },
            type: 'map',
            mapType: '浙江',
            itemStyle: {
              normal: {
                borderColor: 'rgba(25, 148, 255, 0.9)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(25, 148, 255, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(25, 148, 255, 0.6)'
                    }
                  ],
                  globalCoord: false
                },
                shadowColor: 'rgba(5, 27, 74, 0.9)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 6
              },
              emphasis: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(56, 155, 183, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(56, 155, 183,1)'
                    }
                  ],
                  globalCoord: false
                },
                borderWidth: 0
              }
            }
          }
        },
        options: [
          {
            backgroundColor: '',
            title: [
              {
                show: false
              }
            ],
            xAxis: {
              show: false
            },
            yAxis: {
              show: false
            },
            series: [
              {
                name: 'light',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: mydata,
                zlevel: 3,
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    fontSize: '20',
                    distance:20,
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color:color,
                    fontWeight: 'bold'
                  }
                },
                symbolSize: function() {
                  return 20
                }
              },
              {
                type: 'map',
                map: '浙江',
                geoIndex: 0,
                aspectScale: 1,
                showLegendSymbol: false,
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: '#031525',
                    borderColor: '#FFFFFF'
                  },
                  emphasis: {
                    areaColor: '#2B91B7'
                  }
                },
                animation: false,
                data: [mydata]
              },
              {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: mydata
                  .sort(function(a, b) {
                    return b.num - a.num
                  })
                  .slice(0, 4),
                symbolSize: 40,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {},
                itemStyle: {
                  normal: {
                    color:color,
                    shadowBlur: 0,
                    shadowColor: color
                  }
                },
                zlevel: 1
              }
            ]
          }
        ]
      }
      map.setOption(option)
    },
},
  mounted() {
    this.mapmooudel(0)
  },
}
</script>