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

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,
          },
        ],
      })
    },