项目中常用echarts属性集合——地图_echarts.getmap

1.引入map.json(示例地图为浙江省)
import mapData from ‘…/…/assets/map.json’
json文件可到此处下载
2.

 getMap() {
      //获取地图
      let char = this.$echarts.init(document.querySelector('#map'))
       let geoCoordMap = {//地图上散点坐标
        杭州市: [119.300576, 29.999999],
        宁波市: [121.549792, 29.868388],
        温州市: [120.672111, 28.199575],
        嘉兴市: [120.750865, 30.762653],
        湖州市: [119.902398, 30.867198],
        绍兴市: [120.582112, 29.997117],
        金华市: [119.949506, 29.289644],
        衢州市: [118.87263, 29.059999],
        舟山市: [122.106863, 30.016028],
        台州市: [121.070599, 28.961378],
        丽水市: [119.440000, 28.359993],
      }
      this.$echarts.registerMap('zhejiang', mapData)//注册地图
       let convertData = function (data) {
        let res = []
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              visualMap: false,
            })
          }
        }
        return res
      }
      char.setOption({
        grid: {
          left: '0%',
          top: '0%',
          right: '19',
          bottom: '0%',
          containLabel: true,
        },
         tooltip: {
            trigger: 'item',
            formatter: function (params) {//加了这个点击图标的时候就不会出现图标的坐标，而是和点击地图一样的内容
              if(typeof(params.value)[2] == "undefined"){
              	return params.name + ' : ' + params.value +'(台)';
              }else{
              	return params.name + ' : ' + params.value[2] +'(台)';
              }
            }
        },
        geo: {
          map: 'zhejiang',//这个名字要与自己注册的名字相对应
         
          roam: false,//false就无法将上层地图拖拽与缩放
          // 定义样式
          itemStyle: {
            // 普通状态下的样式
            borderWidth: 5,
            borderColor: '#fff',
            normal: {
              areaColor: '#ABCDEF99',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: '#777',
              //   borderWidth: 50,
              borderColor: '#fff',
            },
            // 高亮状态下的样式,默认黄色
            emphasis: {
              // areaColor: '#2a333d'
            },
          },
          label: {//地图上字的颜色
            normal: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
            },
            emphasis: {
              textStyle: {
                color: '#fff',
              },
            },
          },
        },
        dataRange: {
          // 图例
          x: 'left',
          y: 'bottom',
          splitList: [
            { start: 100 },//>=100
            { end: 100 },//80-100
            { end: 80 },//60-80
            { end: 60 },//40-60
            { end: 40 },//20-40
            { end: 20 },//<20
          ],
          color: ['#ff5722', '#ff693a', '#ff7c53', '#ff9675', '#ffb29a'],//图例的颜色
        },
        series: [
          {
            name: 'pm2.5', // series名称
            type: 'scatter', // series图表类型 散点图 
            symbol: 'image://'+ require('./img/water.png'),//这里散点图标为自定义的图片 默认‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’ 
            symbolSize: '12',
            coordinateSystem: 'geo', // series坐标系类型
            data: convertData(data), // series数据内容
             
            // 控制显示文本
            // series样式
            itemStyle: {
              normal: {
                color: '#fff',
                background: '#fff',
              },
            },
            markPoint: {
              itemStyle: {
                color: '#fff',
                background: '#fff',
              },
            },
          },
          {//这个一定要加 如果不加 那么图例的颜色对应的是散点图的颜色
            type: 'map',
            mapType: 'zhejiang',
            roam: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                  },
                },
                borderColor: '#fff', // 绘制的每一个轮廓的边框颜色
                borderWidth: 2,
              },
              emphasis: { label: { show: true } },
            },
            data: data,
          },
        ],
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146