Echarts实现——中国地图

Echarts实现——中国地图
如下图：

使用Echarts进行地图绘制展示的时候，需要china.json；
举例在vue的项目中可以通过cnpm install echarts --save安装Echarts依赖；
引入：import china from ‘echarts/map/json/china.json’；
剩下的不多说了，直接上代码：

<template>
    <div class="leftCard">
        <div id="chinaMap" ref="chinaMap"></div>
    </div>
</template>

<script>
import china from 'echarts/map/json/china.json'
export default {
    name:'leftCard',
    data(){
        return{
            myChart:null,
            dataList: [
                { name: "南海诸岛",  value: 100,  eventTotal:100,  specialImportant:10,  import:10,  compare:10, common:40,  specail:20 },
                { name: "北京", value: 540 },
                { name: "天津", value: 130 },
                { name: "上海", value: 400},
                { name: "重庆",  value: 750},
                { name: "河北", value: 130},
                { name: "河南", value: 830},
                { name: "云南", value: 110 },
                { name: "辽宁",  value: 19 },
                { name: "黑龙江",  value: 150},
                { name: "湖南", value: 690 },
                { name: "安徽", value: 60 },
                { name: "山东", value: 39 },
                { name: "新疆", value: 452 },
                { name: "江苏", value: 31 },
                { name: "浙江", value: 104 },
                { name: "江西", value: 36 },
                { name: "湖北", value: 52},
                { name: "广西", value: 33 },
                { name: "甘肃", value: 73 },
                { name: "山西", value: 54 },
                { name: "内蒙古", value: 778},
                { name: "陕西", value: 22},
                { name: "吉林",value: 44 },
                { name: "福建",value: 18},
                { name: "贵州", value: 54},
                { name: "广东", value: 98},
                { name: "青海",value: 13},
                { name: "西藏", value: 0},
                { name: "四川", value: 44},
                { name: "宁夏", value: 42},
                { name: "海南", value: 22 },
                { name: "台湾", value: 23},
                { name: "香港",value: 25},
                { name: "澳门",value: 555}
            ]
        }
    },
    created(){},
    mounted(){
        this.$nextTick(() =>{
            this.initEchartMap();
        })
    },
    methods:{
        // 初始化地图
        initEchartMap(){
            this.$ECharts.registerMap('china', china) //这个特别重要
            this.myChart = this.$ECharts.init(this.$refs.chinaMap, null, {renderer:'svg'});
            this.myChart.off('click');
            //echart 配制option  
            var options= {
                    tooltip: {
                        triggerOn: "mousemove",   //mousemove、click
                        padding:8,
                        borderWidth:1,
                        borderColor:'#409eff',
                        backgroundColor:'rgba(255,255,255,0.7)',
                        textStyle:{
                            color:'#000000',
                            fontSize:13
                        },
                        formatter: function(e, t, n) {
                            let data = e.data;
                            let context = `
                            <div>
                                <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</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: 26,
                        bottom: 40,
                        showLabel:true,
                        pieces: [
                            {
                                gte: 1000,
                                label: ">= 1000",
                                color: "#5475f5"
                            },
                            {
                                gte: 700,
                                lt: 999,
                                label: "700 - 999",
                                color: "#e6ac53"
                            },
                            {
                                gte: 500,
                                lt: 699,
                                label: "500 - 699",
                                color: "#9feaa5"
                            },
                            {
                                gte: 100,
                                lt:499,
                                label: "100 - 499",
                                color: "#85daef"
                            },
                            {
                                gte: 10,
                                lt: 99,
                                label: "10 - 99",
                                color: "#74e2ca"
                            },
                            {
                                lt:10,
                                label:'<10',
                                color: "#9fb5ea"
                            }
                        ]
                    },
                    geo: {
                        map: "china",
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1,
                        top: 120,
                        layoutSize: "100%", //保持地图宽高比
                        label: {
                            normal: {
                                show:true,
                                fontSize: "14",
                                color: "rgba(0,0,0,0.7)"
                            },
                            emphasis: {
								show: false,
								textStyle: {
									color: "#F3F3F3"
								}
							}
                        },
                        itemStyle: {
                            normal: {
                                //shadowBlur: 50,
                                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                                borderColor: "rgba(0, 0, 0, 0.2)",
                                areaColor: '#1955a4',
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [
                        {
                            name: "成果预览",
                            type: "map",
                            geoIndex: 0,
                            data: this.dataList
                        }
                    ]
            }
            this.myChart.clear();
            this.myChart.setOption(options);
            this.myChart.resize();
            //地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数		   据；
            this.myChart.on('click', function(params) {
                console.log(params)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.leftCard{
    width: 100%;
    height: 100%;
    #chinaMap{
        width: 100%;
        height: 100vh;
    }
}
</style>

避坑：china.js 需要要进行引入；安装echarts中在5.0的版本以下的就可以获取到china.json文件（会出现地图不展示的bug问题）；
然后调用这个方法   this.$ECharts.registerMap('china', china)；
以上为个人在vue项目中的开发实战，欢迎大家来借鉴；记得收藏加关注哦；