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 [email protected]

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

 3、卸载echarts4.9

npm uninstall [email protected]

 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', 
                }    
            }
        }
    }
]

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

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

 图二：地图背景渐变色

 

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

五、bug 

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

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