Echarts + 中国地图+事件报警撒点

1、需要引入Echarts和China.js

整个地图是给予Echarts构建，所以必须引入，至于china.js，则是中国地图的geoJson数据，并在该js中注册相关的地图，大致代码如下：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('china', {"type":"FeatureCollection",....})

关于相关china.js共享：
https://github.com/apache/incubator-echarts/blob/master/map/js/china.js
https://www.houduniot.com/static/script/china.js

2、具体组件代码

<template>
    <div class="">
        <div class="alarm-map" id="alarmMapContainer"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            optionMap: { //地图组件的option
                tooltip: {},
                geo: {},
                series: {}
            }, 
            eventData:[ //事件报警信息
                {
                    name: "海门",
                    phone: '13523232323', //电话好码
                    time: '2019-01-23  12:03:41',
                    value: [121.15, 31.89], //经纬度
                    eventName: '烟感报警'  //事件报警
                },
                {
                    name: "鄂尔多斯",
                    phone: '13523232323',
                    time: '2019-08-08  23:09:21',
                    value: [109.781327,39.608266],
                    eventName: '烟感报警'
                },
                {
                    name: "齐齐哈尔",
                    phone: '13523232323',
                    time: '2018-12-12  03:09:24',
                    value: [123.97,47.33],
                    eventName: '烟感报警'
                },
            ],
        }
    },
    created() {
        this.initOption();
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap(){
            this.$set(this.optionMap.series[0],'data',this.eventData);
            var myChart = echarts.init(document.getElementById('alarmMapContainer'));

            //使用制定的配置项和数据显示图表
            myChart.setOption(this.optionMap);
        },
        initOption(){
            this.optionMap = {  
                backgroundColor: '#0F1938',  
                tooltip : {  
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params);
                        let data = params.data;
                        // return '<p style="color: red;">'+params.name+'</p>' + ' <br/>45654645: \n 34 <br/>' + params.value[2];
                        return '<div style="position: relative;">'+
                                    '<div class="bg" style="width: 192px;height: 140px;opacity: 0.9;background: #010513;border-radius: 4px;border: none; position: absolute;top: 0px;left: 0px;z-index: 101;"></div>'+
                                    '<div style="position: absolute;top: 0px;left: 0px;z-index: 110;padding-left: 12px;">'+
                                        '<p style="font-family: MicrosoftYaHei;font-size: 14px;color: #FFFFFF;height: 48px;line-height: 48px;">事件动态</p>'+
                                        '<p style="font-size: 12px;color: #AEC2F7;height: 24px;line-height: 24px;">'+
                                            data.name+
                                        '</p>'+
                                        '<p style="font-size: 12px;color: #EB9503;height: 24px;line-height: 24px;">'+
                                            data.eventName+
                                        '</p>'+
                                        '<p style="font-size: 12px;color: #AEC2F7;height: 24px;line-height: 24px;">'+
                                            data.time+
                                        '</p>'+
                                    '</div>'+
                                '</div>'
                    },
                    backgroundColor: 'transparent',
                    borderColor: 'transparent',
                    borderWidth: 0,
                    borderRadius: 4,
                },  
                geo: {
                    map: 'china',
                    label: {
                        normal: {  
                            show: true,  //省份名称  
                            color: '#fff'
                        },  
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#4575FF',
                            
                        },
                        emphasis: {
                            areaColor: '#4575FF'
                        }
                    }
                },
                series: [{
                    name: '事件动态',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [],
                    symbolSize: 12,
                }]  
            };  
        }
    },
    beforeDestroy() {
        
    },
}
</script>
<style lang="scss" scoped>
.alarm-map{
    width: 56vw;
    height: 62vh;
}
.bg{
    width: 192px;
    height: 140px;
    opacity: 0.4;
    background: #010513;
    border-radius: 4px;
    border: none; 
    position: relative;
}
</style>

3、具体效果