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.datamaps = 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 = nullmaps.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: index === 0 ? gzData.features.length - 1 : index - 1});index = item.dataIndexmapActive()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 = nullmaps.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: index});});// 鼠标划出重新定时器开始maps.on('mouseout', () => {mapActive();});
}