Echart地图颜色3d（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.92 、打开依赖包文件夹 ，找到map文件夹 ，拷贝出来
3 、卸载echarts4.9
npm uninstall echarts@4.94 、安装echarts最新版 ，版本号可写可不写 ，不写默认下载最新版本
npm install echarts5 、找到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.pngecharts配置项引入图片
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报错如下：
暂时无头绪 ，蹲一个大神解决办法 。也许是版本问题 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！