echarts map （echarts地图）使用总结

项目中最近使用了echarts的地图组件，这里做个总结(以温州市的地图为例)。

效果如下：

使用要点：

1.获得地图的数据

在阿里云的数据可视化平台可以得到

2.地图的绘制方法
eharts的官网可以查询到，type为map

3.轮播
轮播可以通过实例的 dispatchAction方法来控制各种事件的发生

4.选中后的富文本效果
echarts支持的 emphasis.label.formatter 不支持书写html，但是支持富文本的书写，可以定义背景图片，上图中的效果就是使用了24张背景图片（默认12张，选中后12张），具体代码见下文。

5.地图的立体效果
引入echarts的geo组件，再配上不同的颜色和一定的高度，就会有立体的效果

代码：

axios.get("/温州市.json").then((res) => {
    echarts.registerMap("温州市", res.data);
    gzData = res.data
    maps = echarts.init(mapEcharts.value);
    mapActive()
    let option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,0)",
      },
    series: [
        {
          type: "map",
          map: "温州市",
          data: mapData.value,
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%",
          tooltip: {
            // 显示的窗口
            trigger: "item",
            formatter: function (item) {
              var tipHtml = "";
              return tipHtml;
            },
            position: function(){},
            borderWidth: 0,
          },
          itemStyle: { // 地图样式
			borderColor: 'rgba(0, 178, 255, 1)',
			borderWidth: 2,
			// areaColor:'rgba(0, 137, 208, 0.32)',
			areaColor: new echarts.graphic.LinearGradient(0,1,0,0,[{ offset:0, color:"rgba(0, 137, 208, 0.32)"},{ offset: 1, color:"rgba(0, 66, 164, 0.32)"}],false),
			shadowColor: 'RGBA(7, 59, 115, .1)',
			shadowOffsetX: -2,
			shadowOffsetY: 2,
			shadowBlur: 10
		},
        emphasis: { // 鼠标移入动态的时候显示的默认样式
			itemStyle: {
				areaColor: 'rgba(255, 191, 0, 0.52)',
				borderColor: 'rgba(255, 180, 0, 1)',
				borderWidth: 2
			},
		label: { // 文字
			show: true,
			color: '#fff',
			fontSize: 18,
            fontWeight: 600,
            formatter: (item) => {
               let html = `{${map[item.data.name].name}|}`
               return html
            },
            rich: setEmphasis(),
		},
	},
     label: {
        show: true,
         color: '#fff',
         fontSize: 16,
         fontWeight: 600,
         formatter: (item) => {
           let html = `{${map[item.data.name].name}|}`
            return html
        },
        rich: setRich(),
      }
    },
   ],
   geo: {
      map: '温州市',
    //   projection: {
    //     project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
    //     unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
    // },
       type: 'map',
       layoutCenter: ['50%', '50%'],
       layoutSize: '150%',
       zoom: 0.65,
       //  aspectScale: 1,
       roam: false,
       label: {
         show: true,
         color: '#fff'
       },
       itemStyle: {
         normal: {
           areaColor: 'rgba(0,100,219, 1)',
           shadowColor: 'rgba(142, 201, 255, 1)',
           shadowOffsetX: -5,
           shadowOffsetY: 12
         }
       },
      emphasis: { // 鼠标移入动态的时候显示的默认样式
		itemStyle: {
			areaColor: '#019359',
			// borderColor: '#404a59',
			borderWidth: 1
		},
		label: { // 文字
			show: true,
			color: '#fff',
			fontSize: 18,
            fontWeight: 600
		},
	},
   }
 };

    maps.off('click')

    maps.on('click', (item) => {
      clearInterval(Number(mTime));
		  mTime = null
		  maps.dispatchAction({
		  	type: 'downplay',
		  	seriesIndex: 0,
		  	dataIndex: index === 0 ? gzData.features.length - 1 : index - 1
		  });
      index = item.dataIndex
      mapActive()
      highlight()
    })

    maps.setOption(option);
    highlight()
    window.addEventListener("resize", function () {
      maps.resize(); // 页面大小变化后Echa	rts也更改大小
    });
  });

下面是工具函数

const map = {
  苍南县: { name: 'a' },
  洞头区: { name: 'b' },
  乐清市: { name: 'c' },
  龙港市: { name: 'd' },
  瓯海区: { name: 'e' },
  永嘉县: { name: 'f' },
  龙湾区: { name: 'g' },
  瑞安市: { name: 'h' },
  文成县: { name: 'i' },
  鹿城区: { name: 'j' },
  平阳县: { name: 'k' },
  泰顺县: { name: 'l' }
}

const setRich = () => {
  let rich = {}
  for (let key in map) {
    let item = {
      backgroundColor: {
        image: `/img/mapLabelBlue/${key}.png`,
      },
      width: 81,
      height: 76
    }
    rich[map[key].name] = item
  }
  return rich
}

const setEmphasis = () => {
  let rich = {}
  for (let key in map) {
    let item = {
      backgroundColor: {
        image: `/img/mapLabelRed/${key}.png`,
      },
      width: 81,
      height: 76
    }
    rich[map[key].name] = item
  }
  return rich
}

const mapActive = () => {
  if(mTime){
    clearInterval(Number(mTime));
			mTime = null
  }
  mTime = setInterval(highlight, 30000);
}

const highlight = () => {
  const dataLength = gzData.features.length;
  // 清除之前的高亮
	maps.dispatchAction({
		type: 'downplay',
		seriesIndex: 0,
		dataIndex: index === 0 ? dataLength - 1 : index - 1
	});
	// 当前下标高亮
	maps.dispatchAction({
		type: 'highlight',
		seriesIndex: 0,
		dataIndex: index
	});
	maps.dispatchAction({
		type: 'unselect',
		seriesIndex: 0,
		dataIndex: index
	});
	maps.dispatchAction({
		type: 'showTip',
		seriesIndex: 0,
		dataIndex: index,
    position: function(a,b){
    }
	});

  emit('carouselEvent', mapData.value[index])

    index++;
	if (index >= dataLength) {
		index = 0;
	}
}

const mouseEvents = () => {
	// 鼠标划入
	maps.on('mouseover', () => {
		// 停止定时器，清除之前的高亮
		clearInterval(Number(mTime));
		mTime = null
		maps.dispatchAction({
			type: 'downplay',
			seriesIndex: 0,
			dataIndex: index
		});
	});
	// 鼠标划出重新定时器开始
	maps.on('mouseout', () => {
		mapActive();
	});
}