vue中使用echart地图

获取湖南的地图数据

https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ
在这个网址上可以下载各个省份的地图json

实现的效果

在这个湖南省地图上面实现的效果：

1. 地图的展现
2. 地图根据数据展示不同的背景颜色
3. 地图涟漪效果的实现
4. 地图动态高亮展现数据

步骤

<div ref="mapEchart" class="echart"></div>

chartArr: null, //data中定义数据存地图

mounted() {//挂载到dom节点上，不然地图渲染不上去
    this.$nextTick(() => {
        this.drawLine(true)
        window.addEventListener('resize', this.placeholderPic)
        // this.handleEchartSelect()//地图高亮选择触发的方法
        this.handleEchartOver()//地图鼠标悬浮触发的方法
        this.handleEchartOut()//地图鼠标离开触发的方法
        this.handleHighOver()//地图自动高亮选择触发的方法
     })
  },

geoJson就是湖南json文件，在第一步网址下载

一些方法

自动触发方法：

this.chartArr.dispatchAction({//自动触发取消高亮
     type: 'downplay'
  })
this.chartArr.dispatchAction({//自动触发高亮
    type: 'highlight',
    // 可选，数据的 名称
   name: name
   }) 

<div class="fullScreen" @click="handleFullScreen">
    <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏` "placement="bottom">
        <i class="el-icon-rank"></i>
    </el-tooltip>
</div>
// 全屏事件
            handleFullScreen(){
                let element = document.documentElement;
                // 判断是否已经是全屏
                // 如果是全屏，退出
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    console.log('已还原！');
                } else {    // 否则，进入全屏
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                    console.log('已全屏！');
                }
                // 改变当前全屏状态
                this.fullscreen = !this.fullscreen;
            },

地图options

const geoCoordMap = {
    '张家界市': [110.779921,29.527401],
    '湘西土家族苗族自治州': [109.801895,29.448852],
    '永州市': [111.608019,26.434516],
    '岳阳市': [113.312855,29.27029],
    '怀化市': [109.97824,27.550082],
    '郴州市': [113.032067,25.793589],
    '邵阳市': [110.814645,26.925028],
    '娄底市': [111.308497,27.998136],
    '益阳市': [112.115042,28.470066],
    '常德市': [111.691347,29.040225],
    '衡阳市': [112.607693,26.900358],
    '湘潭市': [112.708495,27.72863],
    '株洲市': [113.60937,27.108153],
   '长沙市': [113.604906,28.30816],
}
let data = []
const convertData = function (data) {//data就是后端传过来的数据
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }
    }
    return res;
};

    series: [
        {
            name: '',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbol: 'pin',
            symbolSize: function(val, params) {
                // return params.data.szdcl;
                return 0.288 * params.data.value+ 25;
            },
            symbolOffset:  [0, '-40%'],
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                        fontWeight: 1000,
                    },
                    formatter (value){ return value.data.value },
                }
            },
            itemStyle: {
                normal: {
                    color: '#1c69b7', //标志颜色,
                    borderColor: '#214790',
                    shadowColor: '#05FAEF',
                    shadowBlur: 8,
                    borderWidth: 2,
                }
            },
            zlevel: 1,
        },
        {
            type: 'map',
            map: 'HN',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            animation: false,
            data: [],
        },
        //地图中闪烁的点
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val, params) {
                return (0.0998 * params.data) + 10;
            },
            encode: {
                value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'fill',
                scale: 3,
                period: 3,
            },
            hoverAnimation: true,
            position:  'bottom',
           color: '#8ebfcc',
           show: true
            },
            itemStyle: {
                color: '#05FAEF',
                shadowBlur: 10,
                shadowColor: '#05FAEF'
            },
            zlevel: 1
        }
    ]
}

在需求里面要求所有的子必须在地图里面，所以对经纬度和展示之类的也进行了一下操作。

总结

虽然先前使用过echart做图表，但是那时候并没有弄过地图，所以刚开始弄的时候一脸懵逼。一直在看官网的api。收获了挺多这段期间，至少对echarts有了更好的了解，虽然这段期间挺累的。