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

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

推荐整理分享echarts5.0引入地图，背景渐变色，航线图，地图阴影(echarts引入地图)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:echarts引入json地图,echarts全局引入,引入echarts.js,echarts全局引入,引入echarts.js,echarts引入地图,引入echarts.js,echarts引入地图,内容如对您有帮助，希望把文章链接给更多的朋友！

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

 参考：

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报错如下：

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