vue中使用ECharts实现中国地图配置详解

首先echarts4.90版本以上移除了中国地图依赖包有两种办法解决：

1.下载echarts4.90版本

npm install echarts@4.9.0

如果项目中已经安装了echarts的最新版本，又不方便卸载

可以将打开下载了4.90版本的vue项目中的node_modules找到里面的map包，移动到echarts最新版本的同样位置目录下

再vue项目的main.js中做如下配置

import * as echarts from 'echarts'
import china from 'echarts/map/json/china.json' //导入china包
echarts.registerMap('china', china) 
Vue.prototype.$echarts = echarts

2.也可以进入以下链接拿到中国地图的JSON文件引入项目中进行使用

DataV.GeoAtlas地理小工具系列

如上配置好后就可以进行地图的绘制

基础配置

<template>
<div class="china" ref="china"></div>
</template>

import * as echarts from 'echarts'
<style lang="scss" scoped>
.china {
    width: calc(100% - 40px);
    height: 600px;
    margin: 20px;
}

</style>

方法（在 mounted()里面调用此方法，用ecahrts的map实现）：

echarts需要的数组结构[{name:‘北京’，‘value’}]

 let myChart = echarts.init(this.$refs.china)
            let option;
            var data = this.list
            option = {
                tooltip: {
                    trigger: 'item'
                },
                //左侧小导航图标
                visualMap: {
                    show: true,
                    x: 'left',
                    y: 'center',
                    splitList: [
                        { start: 1, end: 500 }, { start: 500, end: 1000 },
                        { start: 1000, end: 1500 }, { start: 1500, end: 2000 },
                        { start: 2000, end: 2500 }, { start: 2500, },
                    ],
                    color: [
                        '#ffb43d',
                        '#5475f5',
                        '#85daef',
                        '#9feaa5',
                        '#74e2ca',
                        '#0074bc'],// e6ac53 '#9fb5ea'
                    textStyle: {
                        color: '#black'
                    }
                },
                geo: {
                    map: 'china',
                    aspectScale: 0.75,
                    layoutCenter: ["50%", "51.5%"], //地图位置
                    layoutSize: '118%',
                    roam: false, //关闭缩放
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 0.5,
                            color: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 1500,
                                x2: 2500,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: '#009DA1' // 0% 处的颜色

                                }, {
                                    offset: 1,
                                    color: '#005B9E' // 50% 处的颜色

                                }],
                                global: true // 缺省为 false

                            },
                            opacity: 0.5,
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    },
                    regions: [{
                        name: '南海诸岛',
                        itemStyle: {
                            areaColor: 'rgba(0, 10, 52, 1)',
                            borderColor: 'rgba(0, 10, 52, 1)'
                        },
                        emphasis: {
                            areaColor: 'rgba(0, 10, 52, 1)',
                            borderColor: 'rgba(0, 10, 52, 1)'
                        }
                    }],
                    z: 2
                },
                series: [{
                    name: '',
                    type: 'map',
                    map: 'china',
                    label: {
                        show: true,
                        color: 'black',
                        fontSize: 14
                    },
                    aspectScale: 0.75,
                    layoutCenter: ["50%", "50%"], //地图位置
                    layoutSize: '118%',
                    roam: false, //关闭缩放
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 0.6)',
                            borderWidth: 0.8,
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 1200,
                                x2: 1000,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: '#009DA1' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#005B9E' // 50% 处的颜色
                                }],
                                global: true // 缺省为 false
                            },
                        },
                        emphasis: {
                            areaColor: 'rgba(147, 235, 248, 0)'
                        }
                    },
                    zlevel: 1,
                    data: data
                }],
            };
            //地图点击事件,根据点击某个省份计算出这个省份的数据
            myChart.on('click', (params) => {
                console.log(params);
               
            });
            myChart.setOption(option);

效果图：

附带甘肃地图(用JSON数据+echarts的方法实现):

方法(ecahrts需要的数据结构需和上面一样，而且要把市州的名字对上，差字少字就出不来):

     <template>
<div class="GanSu" ref="GanSu"></div>
     < /template>
<script>
  import GanShu from '@/utils/gansu_mini.json'
</script>
            let myChart = echarts.init(this.$refs.GanSu)
            let option;
            let uploadedDataURL = GanShu; //这个是JSON数据
            let datamap = this.Ganshu //后端返回的数据 
            getGanshu(uploadedDataURL)
            function getGanshu(uploadedDataURL) {
                echarts.registerMap('my', uploadedDataURL);
                option = {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#000',
                            decoration: 'none',
                        },
                        formatter: function (params) {
                            // console.log(params, 'params')
                            var tipHtml = '';
                            tipHtml = `<div class="ui-map-img">
                           <div class='ui-maptxt'>${params.name}</div>
                           <div class='ui-mapNum'>人数:${params.value}</div>
                           </div> `
                            return tipHtml;
                        },
                    },
                    grid: {
                        left: '0', // 与容器左侧的距离
                        right: '0', // 与容器右侧的距离
                        top: '0', // 与容器顶部的距离
                        bottom: '0', // 与容器底部的距离
                    },
                    geo: {
                        map: 'my',
                        aspectScale: 0.85,
                        layoutCenter: ["50%", "50%"], //地图位置
                        layoutSize: '108%',
                        itemStyle: {
                            normal: {
                                shadowColor: '#276fce',
                                shadowOffsetX: 0,
                                shadowOffsetY: 15,
                                opacity: 0.3,
                            },
                        },
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: 'my',
                            aspectScale: 0.85,
                            layoutCenter: ["50%", "50%"], //地图位置
                            layoutSize: '108%',
                            zoom: 1, //当前视角的缩放比例
                            // roam: true, //是否开启平游或缩放
                            scaleLimit: { //滚轮缩放的极限控制
                                min: 1,
                                max: 2
                            },
                            select: {//这个就是鼠标点击后，地图想要展示的配置
                                disabled: false,//可以被选中
                                itemStyle: {//相关配置项很多，可以参考echarts官网
                                    color: '#fff',
                                    areaColor: "#5D98C9"//选中
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                emphasis: {
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            data: datamap,
                            itemStyle: {
                                normal: {
                                    areaColor: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.9,
                                        colorStops: [{
                                         offset: 0,
                                         color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
                                        }],
                                    },
                                    borderColor: 'RGBA(52, 140, 250, 1)',
                                    borderWidth: 2,
                                    shadowColor: '#092f8f', //外发光
                                    shadowBlur: 20,

                                },
                                emphasis: {
                                    areaColor: '#0c274b',
                                    label: {
                                        color: '#fff'

                                    },
                                },

                            }
                        }
                    ]
                };
            }
            //点击事件,根据点击某个省份计算出这个省份的数据
            myChart.on('click', (params) => {
                console.log(params.name);

            });
            myChart.setOption(option);

 效果图:

以上echarts图表均为echarts图表集 网站里的模板引进自己项目进行使用的，大家可以去此网站找到适合自己项目的图表。