echarts5.0引入地图，背景渐变色，航线图，地图阴影

效果图如下，文章末尾附全部代码：

 

 参考：

1、航线图

Vue Echarts飞机航线图_Kinghiee的博客-CSDN博客

 2、地图阴影

 echarts中国地图实现阴影效果&自定义设置_K.P的博客-CSDN博客

版本：

"echarts": "^5.1.2"

步骤：

一、echarts5.0以后的版本，地图安装

由于echarts5.0以后的版本里，没有地图了，所以要么自行下载china.js，在项目里引入，要么使用echarts4.9。最近发现了第三个方法。

1、下载echarts4.9的依赖包

npm install echarts@4.9

2、打开依赖包文件夹，找到map文件夹，拷贝出来

 3、卸载echarts4.9

npm uninstall echarts@4.9

 4、安装echarts最新版，版本号可写可不写，不写默认下载最新版本

npm install echarts

5、找到echarts依赖包，把刚才拷贝出来的map文件夹，原路径放进去

6、在项目main.js中引用，就可以使用了

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

 二、地图航线图和地图阴影

参考上述两篇博文，在此不赘述。

文章末尾附全部代码。

三、地图背景渐变色

查询echarts官网的配置文档，areaColor用来设置背景色，但是只能设置每个省份的渐变色，不能设置整个中国地图的统一渐变色。如图：

 但是，areaColor可以设置背景图，所以我取了个巧：

1、css生成了渐变色网页，截图，如图：

background-image: linear-gradient(#a7d34c, #fffcdc);

2、将渐变色图片设置为地图背景图

图片引入

import colorBg from '@/assets/img/color-bg.png'

echarts配置项引入图片

series:[
    {
        type: 'map',
        map: 'china',
        itemStyle:{
            normal:{
                areaColor:{
                    image:colorBg,//背景图
                    // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    repeat:'repeat-x', 
                }    
            }
        }
    }
]

 四、结合参考博文，以下为所有代码

图一：地图背景渐变色，地图阴影

<template>
    <el-container>
        <div class="myChart" ref="myChart" id="myChart"></div>
    </el-container>
</template>
<script>
import img from '@/assets/img/color-bg.png'
export default {
    name:'map-plane',
    data(){
        return {
            SHData :[//这是两地的数据
                [{name:'上海',value:105},{name:'包头',value:105}],
                [{name:'包头',value:105},{name:'昆明',value:105}],
                [{name:'上海',value:105},{name:'广州',value:105}],
                [{name:'上海',value:105},{name:'郑州',value:105}],
                [{name:'上海',value:105},{name:'长春',value:105}],
                [{name:'上海',value:105},{name:'重庆',value:105}],
                [{name:'上海',value:105},{name:'长沙',value:105}],
                [{name:'上海',value:105},{name:'北京',value:105}],
                [{name:'上海',value:105},{name:'丹东',value:105}],
                [{name:'上海',value:105},{name:'大连',value:105}]
            ],
            geoCoordMap :{//地理坐标
                '上海': [121.4648,31.2891],
                '包头': [110.3467,41.4899],
                '广州': [113.5107,23.2196],
                '郑州': [113.4668,34.6234],
                '昆明': [102.9199,25.4663],
                '丹东': [124.541,40.4242],
                '北京': [116.4551,40.2539],
                '大连': [122.2229,39.4409],
                '重庆': [107.7539,30.1904],
                '长沙': [113.0823,28.2568],
                '长春': [125.8154,44.2584],
            },
            //飞机
            planePath : 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
            myChart:null
        }
    },
    mounted(){
        this.myChart = this.$echarts.init(this.$refs.myChart);
        this.createLine(this.local());
    },
    methods:{
        local(){
            let series = [];
            series.push({
                type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
                zlevel: 1,
                effect: {//线特效的配置
                    show: true,
                    period: 6,//特效动画的时间
                    trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
                    color: '#fff',
                    symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
                },
                lineStyle: {
                    color: '#46bee9',
                    width: 0,
                    curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大
                },
                data: this.convertData(this.SHData)//线数据集。
            },{
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: this.planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    color: '#46bee9',
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                },
                data: this.convertData(this.SHData)
            },{
                type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                coordinateSystem: 'geo',//该系列使用的坐标系
                zlevel: 2,
                rippleEffect: {//涟漪特效相关配置
                    brushType: 'stroke'
                },
                label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                },
                symbolSize: function (val) {//标记的大小
                    return val[2] / 8;
                },
                itemStyle: {
                    //圆点的颜色
                    color:  '#46bee9'
                },
                data: this.SHData.map((dataItem)=> {
                    return {
                        name: dataItem[1].name,
                        value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            },{//真正的地图
                type: 'map',
                map: 'china',
                zoom:1.1,
                emphasis: { // 鼠标hover是否显示内容，可自己调节
                    label:{
                        show:true,
                        color:'red',
                    },
                    itemStyle:{
                        color:'#00114F',
                        show: true,
                        areaColor: 'yellowgreen',
                    }
                },
                label: { // 地图标注
                    show: false, // 是否显示对应地名
                    //由于鼠标放在地图上时，省份字体颜色会有一个从默认色到红色的颜色跳动，所以即使normal时省份字体不显示，也设置为红色，视觉优化颜色跳动问题
                    color:'red',
                },
                itemStyle:{
                    borderColor: '#fff', // 省份边框颜色
                    borderWidth: 0.5, // 省份边框宽度
                    shadowColor:"#fff", // 省份边框阴影rgba(100,255,238,0.5)
                    shadowBlur: 5, // 省份边框聚焦
                    areaColor:{
                        image: img,  // 背景图
                        repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    },
                },
                center: [105.194115019531, 35.582111640625], // 设置地图中心
            });

            return series;
        },
        createLine(seriesData){
            var img = new Image();
            img.src = require('@/assets/img/color-bg.png');
            this.myChart.setOption({
                geo: { // 这个是重点 —— 这里设置为地图的阴影
                    map: 'china', // 表示中国地图
                    roam: false, // 禁止拖拽
                    label: { // 标志信息
                        show: false, // 是否显示对应地名
                    },
                    zoom:1.1,
                    center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
                    silent: true, // 禁止hover效果
                    itemStyle: {
                        areaColor:'#7303c0',//地图阴影的颜色
                        borderColor: 'transparent',
                    },
                    emphasis: {           
                        show: false
                    },
                    //地图的阴影不显示南沙诸岛
                    regions: [
                        {
                            name: "南海诸岛",
                            itemStyle: {
                            // 隐藏地图
                            normal: {
                                opacity: 0, // 为 0 时不绘制该图形
                            }
                            },
                            label: {
                                show: false // 隐藏文字
                            }
                        }
                    ],
                },
                series: seriesData
            })
        },
        convertData(data) {//坐标转换
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
                var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
                    });
                }
            }
            return res;
        },
    }
}
</script>
<style lang="less" scoped>
.el-container{
    width: 100%;
    height:100%;
    background-color: #404a59;
    .myChart{
        width:100%;
        height:100%;
    }
}
</style>

 图二：地图背景渐变色

 

<template>
    <el-container>
        <div id="airLine"></div>
    </el-container>
</template>
<script>
import colorBg from '@/assets/img/color-bg.png'
export default {
    name:'map-plane',
    data(){
        return {
            SHData :[//这是两地的数据
                [{name:'上海',value:105},{name:'包头',value:105}],
                [{name:'包头',value:105},{name:'昆明',value:105}],
                [{name:'上海',value:105},{name:'广州',value:105}],
                [{name:'上海',value:105},{name:'郑州',value:105}],
                [{name:'上海',value:105},{name:'长春',value:105}],
                [{name:'上海',value:105},{name:'重庆',value:105}],
                [{name:'上海',value:105},{name:'长沙',value:105}],
                [{name:'上海',value:105},{name:'北京',value:105}],
                [{name:'上海',value:105},{name:'丹东',value:105}],
                [{name:'上海',value:105},{name:'大连',value:105}]
            ],
            geoCoordMap :{//地理坐标
                '科克托别': [90.242240,46.405900],
                '上海': [121.4648,31.2891],
                '丹东': [124.541,40.4242],
                '包头': [110.3467,41.4899],
                '北京': [116.4551,40.2539],
                '大连': [122.2229,39.4409],
                '广州': [113.5107,23.2196],
                '重庆': [107.7539,30.1904],
                '郑州': [113.4668,34.6234],
                '长沙': [113.0823,28.2568],
                '长春': [125.8154,44.2584],
                '昆明': [102.9199,25.4663],
            },
            //飞机
            planePath : 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
        }
    },
    mounted(){
        this.createLine(this.loca());
    },
    methods:{
        loca(){
            let series=[];
            [['上海',this.SHData]].forEach((item, i) =>{
                series.push({
                    type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
                    zlevel: 1,
                    effect: {//线特效的配置
                        show: true,
                        period: 6,//特效动画的时间
                        trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
                        color: '#fff',
                        symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
                    },
                    lineStyle: {
                        normal: {
                            color: '#46bee9',
                            width: 0,
                            curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大
                        }
                    },
                    data: this.convertData(item[1])//线数据集。
                },{
                    type: 'lines',
                    zlevel: 2,
                    symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
                    symbolSize: 10,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: this.planePath,
                        symbolSize: 15
                    },
                    lineStyle: {
                        color: '#46bee9',
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    },
                    data: this.convertData(item[1])
                },{
                    type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                    coordinateSystem: 'geo',//该系列使用的坐标系
                    zlevel: 2,
                    rippleEffect: {//涟漪特效相关配置
                        brushType: 'stroke'
                    },
                    label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    },
                    symbolSize: function (val) {//标记的大小
                        return val[2] / 8;
                    },
                    itemStyle: {
                        color:  '#46bee9'
                    },
                    data: item[1].map((dataItem)=> {
                        return {
                            name: dataItem[1].name,
                            value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                        };
                    })
                });
            });
            return series;
        },
        createLine(seriesData){
            let myChart = this.$echarts.init(document.getElementById('airLine'));
            myChart.setOption({
                geo:{//地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
                    map: 'china',//配置中国地图
                    roam:true,//是否开启鼠标缩放和平移漫游
                    itemStyle:{
                        areaColor:{
                            image: colorBg,  // 背景图
                            repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                        },
                        borderColor: '#fff',//设置各各省市边界颜色,
                    },
                    emphasis:{
                        show: true,
                        itemStyle: {
                            areaColor: '#7acfd6',
                        },
                        label:{//文字颜色
                            color:'#fff',
                            fontSize:18
                        }
                    }
                },
                series: seriesData
            })
            
            myChart.on('click', function (params) {
                // 控制台打印数据的名称
                console.log(params);
            })
        },
        convertData(data) {//坐标转换
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
                var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
                    });
                }
            }
            return res;
        },
    }
}
</script>
<style lang="less" scoped>
.el-container{
    width: 100%;
    height:100%;
    background-color: #000;
    #airLine{
        width:100%;
        height:100%;
    }
}
</style>

图三：地图阴影渐变色 ，地图外边框加粗

<template>
    <el-container>
        <div class="myChart" ref="myChart" id="myChart"></div>
    </el-container>
</template>
<script>
export default {
    name:'map-plane',
    data(){
        return {
            SHData :[//这是两地的数据
                [{name:'上海',value:105},{name:'包头',value:105}],
                [{name:'包头',value:105},{name:'昆明',value:105}],
                [{name:'上海',value:105},{name:'广州',value:105}],
                [{name:'上海',value:105},{name:'郑州',value:105}],
                [{name:'上海',value:105},{name:'长春',value:105}],
                [{name:'上海',value:105},{name:'重庆',value:105}],
                [{name:'上海',value:105},{name:'长沙',value:105}],
                [{name:'上海',value:105},{name:'北京',value:105}],
                [{name:'上海',value:105},{name:'丹东',value:105}],
                [{name:'上海',value:105},{name:'大连',value:105}]
            ],
            geoCoordMap :{//地理坐标
                '上海': [121.4648,31.2891],
                '包头': [110.3467,41.4899],
                '广州': [113.5107,23.2196],
                '郑州': [113.4668,34.6234],
                '昆明': [102.9199,25.4663],
                '丹东': [124.541,40.4242],
                '北京': [116.4551,40.2539],
                '大连': [122.2229,39.4409],
                '重庆': [107.7539,30.1904],
                '长沙': [113.0823,28.2568],
                '长春': [125.8154,44.2584],
            },
            //飞机
            planePath : 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
            myChart:null
        }
    },
    mounted(){
        this.myChart = this.$echarts.init(this.$refs.myChart);
        this.createLine(this.local());
    },
    methods:{
        local(){
            var img = new Image();
            img.src = require('@/assets/img/color-bg.png');
            let series = [];
            series.push({
                type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
                zlevel: 1,
                effect: {//线特效的配置
                    show: true,
                    period: 6,//特效动画的时间
                    trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
                    color: '#fff',
                    symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
                },
                lineStyle: {
                    color: '#46bee9',
                    width: 0,
                    curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大
                },
                data: this.convertData(this.SHData)//线数据集。
            },{
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: this.planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    color: '#46bee9',
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                },
                data: this.convertData(this.SHData)
            },{
                type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                coordinateSystem: 'geo',//该系列使用的坐标系
                zlevel: 2,
                rippleEffect: {//涟漪特效相关配置
                    brushType: 'stroke'
                },
                label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                },
                symbolSize: function (val) {//标记的大小
                    return val[2] / 8;
                },
                itemStyle: {
                    color:  '#46bee9'
                },
                data: this.SHData.map((dataItem)=> {
                    return {
                        name: dataItem[1].name,
                        value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });

            series.push({//真正的地图
                type: 'map',
                map: 'china',
                zoom: 1.1,
                zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
                emphasis: { // 鼠标hover是否显示内容，可自己调节
                    label:{
                        show:true,
                        color:'red',
                    },
                    itemStyle:{
                        color:'#00114F',
                        show: true,
                        areaColor: 'yellowgreen',
                    }
                },
                label: { // 地图标注
                    show: false, // 是否显示对应地名
                    //由于鼠标放在地图上时，省份字体颜色会有一个从默认色到红色的颜色跳动，所以即使normal时省份字体不显示，也设置为红色，视觉优化颜色跳动问题
                    color:'red',
                },
                itemStyle:{
                    borderColor: '#61727a', // 省份边框颜色
                    borderWidth: 0.2, // 省份边框宽度
                    shadowColor:"#fff", // 省份边框阴影rgba(100,255,238,0.5)
                    shadowBlur: 5, // 省份边框聚焦
                    areaColor:"#404a59",
                },
                center: [105.194115019531, 35.582111640625], // 设置地图中心
            })
            return series;
        },
        createLine(seriesData){
            var img = new Image();
            img.src = require('@/assets/img/color-bg.png');
            this.myChart.setOption({
                geo: { // 这个是重点 —— 这里设置为地图的阴影
                    map: 'china', // 表示中国地图
                    roam: false, // 禁止拖拽
                    label: { // 标志信息
                        show: false, // 是否显示对应地名
                    },
                    silent: true, // 禁止hover效果
                    zoom: 1.1, // 地图比例
                    center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
                    itemStyle: {
                        //areaColor:'#7303c0',//地图阴影的颜色
                        areaColor:{
                            image: img,  // 背景图
                            repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                        },
                        borderColor: '#61727a', // 省份边框颜色
                        borderWidth: 0.2, // 省份边框宽度
                        shadowColor:"#fff", // 省份边框阴影rgba(100,255,238,0.5)
                        shadowBlur: 5, // 省份边框聚焦
                    },
                    emphasis: {           
                        show: false
                    },
                    //地图的阴影不显示南沙诸岛
                    regions: [
                        {
                            name: "南海诸岛",
                            itemStyle: {
                            // 隐藏地图
                            normal: {
                                opacity: 0, // 为 0 时不绘制该图形
                            }
                            },
                            label: {
                                show: false // 隐藏文字
                            }
                        }
                    ],
                },
                series: seriesData
            })
        },
        convertData(data) {//坐标转换
            console.log(data)
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
                var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
                    });
                }
            }
            return res;
        },
    }
}
</script>
<style lang="less" scoped>
.el-container{
    width: 100%;
    height:100%;
    background-color: #404a59;
    .myChart{
        width:100%;
        height:100%;
    }
}
</style>

五、bug 

目前几种地图显示正常，不影响使用。但浏览器console报错如下：

暂时无头绪，蹲一个大神解决办法。也许是版本问题。