Vue Echart中国地图，支持触摸提示框

提示：直接运行此index即可

---

<template>
    <div id="china_map_box">
        <div id="china_map" ></div>
    </div>
</template>

<script>
import echarts from "echarts";
import 'echarts/map/js/china.js'
export default {
    name: "CrmTripMap",
    data() {
        return {
            //echart 配制option
            options: {
                tooltip: {
                    triggerOn: "mousemove",   //mousemove、click
                    padding:1,
                    borderWidth:1,
                    borderColor:'#409eff',
                    backgroundColor:'rgba(255,255,255,0.7)',
                    textStyle:{
                        color:'#000000',
                        fontSize:12
                    },
                    formatter: function(e, t, n) {
                        let data = e.data;
                        let context = `
               <div>
                   <p><b style="font-size:15px;"</b> 出差城市:${data.name}</p>
                   <p class="tooltip_style"><span class="tooltip_left">工程师：</span><span class="tooltip_right">${data.username}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">人数：</span><span class="tooltip_right">${data.value}</span></p>
               </div>
            `
                        return context;
                    }
                },
                visualMap: {
                    show:true,
                    left: 0,
                    bottom: 400,
                    showLabel:true,
                    pieces: [

                        {
                            gte: -100,
                            lt: 0,
                            label: "未到出差地",
                            color: "red"
                        },
                        {
                            gte: 0,
                            lt:100,
                            label: "已到出差地",
                            color: "green",
                        }
                    ]
                },
                geo: {
                    map: "china",
                    scaleLimit: {
                        min: 1,
                        max: 1.5
                    },
                    zoom: 1,
                    top: 0,
                    label: {
                        normal: {
                            show:true,
                            fontSize: "15",
                            color: "black"
                        }
                    },
                    itemStyle: {
                        normal: {
                            //shadowBlur: 50,
                            //shadowColor: 'rgba(0, 0, 0, 0.2)',
                            borderColor: "rgba(0, 0, 0, 0.2)"
                        },
                        emphasis: {
                            areaColor: "#f2d5ad",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    }
                },
                series: [
                    {
                        name: "突发事件",
                        type: "map",
                        geoIndex: 0,
                        data:[]
                    }
                ]
            },
            //echart data
            dataList: [
                {
                    name: "北京",
                    value: -5,
                    username: "周杰伦,林俊杰",
                },
                {
                    name: "天津",
                    value: 5,
                    username: "王力宏，罗志祥",
                },
                {
                    name: "上海",
                    value: 10
                },
                {
                    name: "重庆",
                    value: 20
                },
                {
                    name: "河北",
                    value: 30
                },
                {
                    name: "河南",
                    value: 40
                },
                {
                    name: "云南",
                    value: 50
                },
                {
                    name: "辽宁",
                    value: 19
                },
                {
                    name: "黑龙江",
                    value: 10
                },
                {
                    name: "湖南",
                    value: 20
                },
                {
                    name: "安徽",
                    value: 60
                },
                {
                    name: "山东",
                    value: 39
                },
                {
                    name: "新疆",
                    value: 4
                },
                {
                    name: "江苏",
                    value: 31
                },
                {
                    name: "浙江",
                    value: 30
                },
                {
                    name: "江西",
                    value: 36
                },
                {
                    name: "湖北",
                    value: 52
                },
                {
                    name: "广西",
                    value: 33
                },
                {
                    name: "甘肃",
                    value: 7
                },
                {
                    name: "山西",
                    value: 5
                },
                {
                    name: "内蒙古",
                    value: 10
                },
                {
                    name: "陕西",
                    value: 22
                },
                {
                    name: "吉林",
                    value: 4
                },
                {
                    name: "福建",
                    value: 18
                },
                {
                    name: "贵州",
                    value: 5
                },
                {
                    name: "广东",
                    value: 98
                },
                {
                    name: "青海",
                    value: 1
                },
                {
                    name: "西藏",
                    value: 0
                },
                {
                    name: "四川",
                    value: 44
                },
                {
                    name: "宁夏",
                    value: 4
                },
                {
                    name: "海南",
                    value: 22
                },
                {
                    name: "台湾",
                    value: 3
                },
                 {
                    name: "香港",
                    value: 5
                },
                {
                    name: "澳门",
                    value: 10
                }
            ]
        };
    },
    methods: {
        //初始化中国地图
        initEchartMap() {
            let mapDiv = document.getElementById('china_map');
            let myChart = echarts.init(mapDiv);
            myChart.setOption(this.options);
            myChart.resize({width: 1200,height:580});
        },
        //修改echart配制
        setEchartOption(){
            this.options.series[0]['data'] = this.dataList;
        }
    },
    created() {
        this.setEchartOption();
    },
    mounted() {
        this.$nextTick(()=>{
            this.initEchartMap();
        })

    }
};
</script>

<style scoped>
#china_map_box {
    height: 100%;
    position: relative;
}
#china_map_box #china_map{
    height: 100%;
}

</style>