网站建设定制开发echarts5.0引入地图，背景渐变色，航线图，地图阴影

网站建设定制开发效果图如下，网站建设定制开发文章末尾附全部代码：

 

 参考：

1、航线图

 2、地图阴影

 

版本：

"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中引用，网站建设定制开发就可以使用了

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

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

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

文章末尾附全部代码。

三、地图背景渐变色

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

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

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

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

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

图片引入

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

echarts配置项引入图片

  1. series:[
  2.     {
  3.         type: 'map',
  4.         map: 'china',
  5.         itemStyle:{
  6.             normal:{
  7.                 areaColor:{
  8.                     image:colorBg,//背景图
  9.                     // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
  10.                     repeat:'repeat-x', 
  11.                 }    
  12.             }
  13.         }
  14.     }
  15. ]

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

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

  1. <template>
  2.     <el-container>
  3.         <div class="myChart" ref="myChart" id="myChart"></div>
  4.     </el-container>
  5. </template>
  6. <script>
  7. import img from '@/assets/img/color-bg.png'
  8. export default {
  9.     name:'map-plane',
  10.     data(){
  11.         return {
  12.             SHData :[//这是两地的数据
  13.                 [{name:'上海',value:105},{name:'包头',value:105}],
  14.                 [{name:'包头',value:105},{name:'昆明',value:105}],
  15.                 [{name:'上海',value:105},{name:'广州',value:105}],
  16.                 [{name:'上海',value:105},{name:'郑州',value:105}],
  17.                 [{name:'上海',value:105},{name:'长春',value:105}],
  18.                 [{name:'上海',value:105},{name:'重庆',value:105}],
  19.                 [{name:'上海',value:105},{name:'长沙',value:105}],
  20.                 [{name:'上海',value:105},{name:'北京',value:105}],
  21.                 [{name:'上海',value:105},{name:'丹东',value:105}],
  22.                 [{name:'上海',value:105},{name:'大连',value:105}]
  23.             ],
  24.             geoCoordMap :{//地理坐标
  25.                 '上海': [121.4648,31.2891],
  26.                 '包头': [110.3467,41.4899],
  27.                 '广州': [113.5107,23.2196],
  28.                 '郑州': [113.4668,34.6234],
  29.                 '昆明': [102.9199,25.4663],
  30.                 '丹东': [124.541,40.4242],
  31.                 '北京': [116.4551,40.2539],
  32.                 '大连': [122.2229,39.4409],
  33.                 '重庆': [107.7539,30.1904],
  34.                 '长沙': [113.0823,28.2568],
  35.                 '长春': [125.8154,44.2584],
  36.             },
  37.             //飞机
  38.             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',
  39.             myChart:null
  40.         }
  41.     },
  42.     mounted(){
  43.         this.myChart = this.$echarts.init(this.$refs.myChart);
  44.         this.createLine(this.local());
  45.     },
  46.     methods:{
  47.         local(){
  48.             let series = [];
  49.             series.push({
  50.                 type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
  51.                 zlevel: 1,
  52.                 effect: {//线特效的配置
  53.                     show: true,
  54.                     period: 6,//特效动画的时间
  55.                     trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
  56.                     color: '#fff',
  57.                     symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
  58.                 },
  59.                 lineStyle: {
  60.                     color: '#46bee9',
  61.                     width: 0,
  62.                     curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大
  63.                 },
  64.                 data: this.convertData(this.SHData)//线数据集。
  65.             },{
  66.                 type: 'lines',
  67.                 zlevel: 2,
  68.                 symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
  69.                 symbolSize: 10,
  70.                 effect: {
  71.                     show: true,
  72.                     period: 6,
  73.                     trailLength: 0,
  74.                     symbol: this.planePath,
  75.                     symbolSize: 15
  76.                 },
  77.                 lineStyle: {
  78.                     color: '#46bee9',
  79.                     width: 1,
  80.                     opacity: 0.6,
  81.                     curveness: 0.2
  82.                 },
  83.                 data: this.convertData(this.SHData)
  84.             },{
  85.                 type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
  86.                 coordinateSystem: 'geo',//该系列使用的坐标系
  87.                 zlevel: 2,
  88.                 rippleEffect: {//涟漪特效相关配置
  89.                     brushType: 'stroke'
  90.                 },
  91.                 label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
  92.                     show: true,
  93.                     position: 'right',
  94.                     formatter: '{b}'
  95.                 },
  96.                 symbolSize: function (val) {//标记的大小
  97.                     return val[2] / 8;
  98.                 },
  99.                 itemStyle: {
  100.                     //圆点的颜色
  101.                     color:  '#46bee9'
  102.                 },
  103.                 data: this.SHData.map((dataItem)=> {
  104.                     return {
  105.                         name: dataItem[1].name,
  106.                         value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  107.                     };
  108.                 })
  109.             },{//真正的地图
  110.                 type: 'map',
  111.                 map: 'china',
  112.                 zoom:1.1,
  113.                 emphasis: { // 鼠标hover是否显示内容，可自己调节
  114.                     label:{
  115.                         show:true,
  116.                         color:'red',
  117.                     },
  118.                     itemStyle:{
  119.                         color:'#00114F',
  120.                         show: true,
  121.                         areaColor: 'yellowgreen',
  122.                     }
  123.                 },
  124.                 label: { // 地图标注
  125.                     show: false, // 是否显示对应地名
  126.                     //由于鼠标放在地图上时，省份字体颜色会有一个从默认色到红色的颜色跳动，所以即使normal时省份字体不显示，也设置为红色，视觉优化颜色跳动问题
  127.                     color:'red',
  128.                 },
  129.                 itemStyle:{
  130.                     borderColor: '#fff', // 省份边框颜色
  131.                     borderWidth: 0.5, // 省份边框宽度
  132.                     shadowColor:"#fff", // 省份边框阴影rgba(100,255,238,0.5)
  133.                     shadowBlur: 5, // 省份边框聚焦
  134.                     areaColor:{
  135.                         image: img,  // 背景图
  136.                         repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
  137.                     },
  138.                 },
  139.                 center: [105.194115019531, 35.582111640625], // 设置地图中心
  140.             });
  141.  
  142.             return series;
  143.         },
  144.         createLine(seriesData){
  145.             var img = new Image();
  146.             img.src = require('@/assets/img/color-bg.png');
  147.             this.myChart.setOption({
  148.                 geo: { // 这个是重点 —— 这里设置为地图的阴影
  149.                     map: 'china', // 表示中国地图
  150.                     roam: false, // 禁止拖拽
  151.                     label: { // 标志信息
  152.                         show: false, // 是否显示对应地名
  153.                     },
  154.                     zoom:1.1,
  155.                     center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
  156.                     silent: true, // 禁止hover效果
  157.                     itemStyle: {
  158.                         areaColor:'#7303c0',//地图阴影的颜色
  159.                         borderColor: 'transparent',
  160.                     },
  161.                     emphasis: {           
  162.                         show: false
  163.                     },
  164.                     //地图的阴影不显示南沙诸岛
  165.                     regions: [
  166.                         {
  167.                             name: "南海诸岛",
  168.                             itemStyle: {
  169.                             // 隐藏地图
  170.                             normal: {
  171.                                 opacity: 0, // 为 0 时不绘制该图形
  172.                             }
  173.                             },
  174.                             label: {
  175.                                 show: false // 隐藏文字
  176.                             }
  177.                         }
  178.                     ],
  179.                 },
  180.                 series: seriesData
  181.             })
  182.         },
  183.         convertData(data) {//坐标转换
  184.             var res = [];
  185.             for (var i = 0; i < data.length; i++) {
  186.                 var dataItem = data[i];
  187.                 var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
  188.                 var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
  189.                 if (fromCoord && toCoord) {
  190.                     res.push({
  191.                         fromName: dataItem[0].name,
  192.                         toName: dataItem[1].name,
  193.                         coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
  194.                     });
  195.                 }
  196.             }
  197.             return res;
  198.         },
  199.     }
  200. }
  201. </script>
  202. <style lang="less" scoped>
  203. .el-container{
  204.     width: 100%;
  205.     height:100%;
  206.     background-color: #404a59;
  207.     .myChart{
  208.         width:100%;
  209.         height:100%;
  210.     }
  211. }
  212. </style>

 图二：地图背景渐变色

 

  1. <template>
  2.     <el-container>
  3.         <div id="airLine"></div>
  4.     </el-container>
  5. </template>
  6. <script>
  7. import colorBg from '@/assets/img/color-bg.png'
  8. export default {
  9.     name:'map-plane',
  10.     data(){
  11.         return {
  12.             SHData :[//这是两地的数据
  13.                 [{name:'上海',value:105},{name:'包头',value:105}],
  14.                 [{name:'包头',value:105},{name:'昆明',value:105}],
  15.                 [{name:'上海',value:105},{name:'广州',value:105}],
  16.                 [{name:'上海',value:105},{name:'郑州',value:105}],
  17.                 [{name:'上海',value:105},{name:'长春',value:105}],
  18.                 [{name:'上海',value:105},{name:'重庆',value:105}],
  19.                 [{name:'上海',value:105},{name:'长沙',value:105}],
  20.                 [{name:'上海',value:105},{name:'北京',value:105}],
  21.                 [{name:'上海',value:105},{name:'丹东',value:105}],
  22.                 [{name:'上海',value:105},{name:'大连',value:105}]
  23.             ],
  24.             geoCoordMap :{//地理坐标
  25.                 '科克托别': [90.242240,46.405900],
  26.                 '上海': [121.4648,31.2891],
  27.                 '丹东': [124.541,40.4242],
  28.                 '包头': [110.3467,41.4899],
  29.                 '北京': [116.4551,40.2539],
  30.                 '大连': [122.2229,39.4409],
  31.                 '广州': [113.5107,23.2196],
  32.                 '重庆': [107.7539,30.1904],
  33.                 '郑州': [113.4668,34.6234],
  34.                 '长沙': [113.0823,28.2568],
  35.                 '长春': [125.8154,44.2584],
  36.                 '昆明': [102.9199,25.4663],
  37.             },
  38.             //飞机
  39.             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',
  40.         }
  41.     },
  42.     mounted(){
  43.         this.createLine(this.loca());
  44.     },
  45.     methods:{
  46.         loca(){
  47.             let series=[];
  48.             [['上海',this.SHData]].forEach((item, i) =>{
  49.                 series.push({
  50.                     type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
  51.                     zlevel: 1,
  52.                     effect: {//线特效的配置
  53.                         show: true,
  54.                         period: 6,//特效动画的时间
  55.                         trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
  56.                         color: '#fff',
  57.                         symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
  58.                     },
  59.                     lineStyle: {
  60.                         normal: {
  61.                             color: '#46bee9',
  62.                             width: 0,
  63.                             curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大
  64.                         }
  65.                     },
  66.                     data: this.convertData(item[1])//线数据集。
  67.                 },{
  68.                     type: 'lines',
  69.                     zlevel: 2,
  70.                     symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
  71.                     symbolSize: 10,
  72.                     effect: {
  73.                         show: true,
  74.                         period: 6,
  75.                         trailLength: 0,
  76.                         symbol: this.planePath,
  77.                         symbolSize: 15
  78.                     },
  79.                     lineStyle: {
  80.                         color: '#46bee9',
  81.                         width: 1,
  82.                         opacity: 0.6,
  83.                         curveness: 0.2
  84.                     },
  85.                     data: this.convertData(item[1])
  86.                 },{
  87.                     type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
  88.                     coordinateSystem: 'geo',//该系列使用的坐标系
  89.                     zlevel: 2,
  90.                     rippleEffect: {//涟漪特效相关配置
  91.                         brushType: 'stroke'
  92.                     },
  93.                     label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
  94.                         show: true,
  95.                         position: 'right',
  96.                         formatter: '{b}'
  97.                     },
  98.                     symbolSize: function (val) {//标记的大小
  99.                         return val[2] / 8;
  100.                     },
  101.                     itemStyle: {
  102.                         color:  '#46bee9'
  103.                     },
  104.                     data: item[1].map((dataItem)=> {
  105.                         return {
  106.                             name: dataItem[1].name,
  107.                             value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  108.                         };
  109.                     })
  110.                 });
  111.             });
  112.             return series;
  113.         },
  114.         createLine(seriesData){
  115.             let myChart = this.$echarts.init(document.getElementById('airLine'));
  116.             myChart.setOption({
  117.                 geo:{//地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
  118.                     map: 'china',//配置中国地图
  119.                     roam:true,//是否开启鼠标缩放和平移漫游
  120.                     itemStyle:{
  121.                         areaColor:{
  122.                             image: colorBg,  // 背景图
  123.                             repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
  124.                         },
  125.                         borderColor: '#fff',//设置各各省市边界颜色,
  126.                     },
  127.                     emphasis:{
  128.                         show: true,
  129.                         itemStyle: {
  130.                             areaColor: '#7acfd6',
  131.                         },
  132.                         label:{//文字颜色
  133.                             color:'#fff',
  134.                             fontSize:18
  135.                         }
  136.                     }
  137.                 },
  138.                 series: seriesData
  139.             })
  140.             
  141.             myChart.on('click', function (params) {
  142.                 // 控制台打印数据的名称
  143.                 console.log(params);
  144.             })
  145.         },
  146.         convertData(data) {//坐标转换
  147.             var res = [];
  148.             for (var i = 0; i < data.length; i++) {
  149.                 var dataItem = data[i];
  150.                 var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
  151.                 var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
  152.                 if (fromCoord && toCoord) {
  153.                     res.push({
  154.                         fromName: dataItem[0].name,
  155.                         toName: dataItem[1].name,
  156.                         coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
  157.                     });
  158.                 }
  159.             }
  160.             return res;
  161.         },
  162.     }
  163. }
  164. </script>
  165. <style lang="less" scoped>
  166. .el-container{
  167.     width: 100%;
  168.     height:100%;
  169.     background-color: #000;
  170.     #airLine{
  171.         width:100%;
  172.         height:100%;
  173.     }
  174. }
  175. </style>

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

  1. <template>
  2.     <el-container>
  3.         <div class="myChart" ref="myChart" id="myChart"></div>
  4.     </el-container>
  5. </template>
  6. <script>
  7. export default {
  8.     name:'map-plane',
  9.     data(){
  10.         return {
  11.             SHData :[//这是两地的数据
  12.                 [{name:'上海',value:105},{name:'包头',value:105}],
  13.                 [{name:'包头',value:105},{name:'昆明',value:105}],
  14.                 [{name:'上海',value:105},{name:'广州',value:105}],
  15.                 [{name:'上海',value:105},{name:'郑州',value:105}],
  16.                 [{name:'上海',value:105},{name:'长春',value:105}],
  17.                 [{name:'上海',value:105},{name:'重庆',value:105}],
  18.                 [{name:'上海',value:105},{name:'长沙',value:105}],
  19.                 [{name:'上海',value:105},{name:'北京',value:105}],
  20.                 [{name:'上海',value:105},{name:'丹东',value:105}],
  21.                 [{name:'上海',value:105},{name:'大连',value:105}]
  22.             ],
  23.             geoCoordMap :{//地理坐标
  24.                 '上海': [121.4648,31.2891],
  25.                 '包头': [110.3467,41.4899],
  26.                 '广州': [113.5107,23.2196],
  27.                 '郑州': [113.4668,34.6234],
  28.                 '昆明': [102.9199,25.4663],
  29.                 '丹东': [124.541,40.4242],
  30.                 '北京': [116.4551,40.2539],
  31.                 '大连': [122.2229,39.4409],
  32.                 '重庆': [107.7539,30.1904],
  33.                 '长沙': [113.0823,28.2568],
  34.                 '长春': [125.8154,44.2584],
  35.             },
  36.             //飞机
  37.             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',
  38.             myChart:null
  39.         }
  40.     },
  41.     mounted(){
  42.         this.myChart = this.$echarts.init(this.$refs.myChart);
  43.         this.createLine(this.local());
  44.     },
  45.     methods:{
  46.         local(){
  47.             var img = new Image();
  48.             img.src = require('@/assets/img/color-bg.png');
  49.             let series = [];
  50.             series.push({
  51.                 type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
  52.                 zlevel: 1,
  53.                 effect: {//线特效的配置
  54.                     show: true,
  55.                     period: 6,//特效动画的时间
  56.                     trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
  57.                     color: '#fff',
  58.                     symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
  59.                 },
  60.                 lineStyle: {
  61.                     color: '#46bee9',
  62.                     width: 0,
  63.                     curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大
  64.                 },
  65.                 data: this.convertData(this.SHData)//线数据集。
  66.             },{
  67.                 type: 'lines',
  68.                 zlevel: 2,
  69.                 symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
  70.                 symbolSize: 10,
  71.                 effect: {
  72.                     show: true,
  73.                     period: 6,
  74.                     trailLength: 0,
  75.                     symbol: this.planePath,
  76.                     symbolSize: 15
  77.                 },
  78.                 lineStyle: {
  79.                     color: '#46bee9',
  80.                     width: 1,
  81.                     opacity: 0.6,
  82.                     curveness: 0.2
  83.                 },
  84.                 data: this.convertData(this.SHData)
  85.             },{
  86.                 type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
  87.                 coordinateSystem: 'geo',//该系列使用的坐标系
  88.                 zlevel: 2,
  89.                 rippleEffect: {//涟漪特效相关配置
  90.                     brushType: 'stroke'
  91.                 },
  92.                 label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
  93.                     show: true,
  94.                     position: 'right',
  95.                     formatter: '{b}'
  96.                 },
  97.                 symbolSize: function (val) {//标记的大小
  98.                     return val[2] / 8;
  99.                 },
  100.                 itemStyle: {
  101.                     color:  '#46bee9'
  102.                 },
  103.                 data: this.SHData.map((dataItem)=> {
  104.                     return {
  105.                         name: dataItem[1].name,
  106.                         value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  107.                     };
  108.                 })
  109.             });
  110.  
  111.             series.push({//真正的地图
  112.                 type: 'map',
  113.                 map: 'china',
  114.                 zoom: 1.1,
  115.                 zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
  116.                 emphasis: { // 鼠标hover是否显示内容，可自己调节
  117.                     label:{
  118.                         show:true,
  119.                         color:'red',
  120.                     },
  121.                     itemStyle:{
  122.                         color:'#00114F',
  123.                         show: true,
  124.                         areaColor: 'yellowgreen',
  125.                     }
  126.                 },
  127.                 label: { // 地图标注
  128.                     show: false, // 是否显示对应地名
  129.                     //由于鼠标放在地图上时，省份字体颜色会有一个从默认色到红色的颜色跳动，所以即使normal时省份字体不显示，也设置为红色，视觉优化颜色跳动问题
  130.                     color:'red',
  131.                 },
  132.                 itemStyle:{
  133.                     borderColor: '#61727a', // 省份边框颜色
  134.                     borderWidth: 0.2, // 省份边框宽度
  135.                     shadowColor:"#fff", // 省份边框阴影rgba(100,255,238,0.5)
  136.                     shadowBlur: 5, // 省份边框聚焦
  137.                     areaColor:"#404a59",
  138.                 },
  139.                 center: [105.194115019531, 35.582111640625], // 设置地图中心
  140.             })
  141.             return series;
  142.         },
  143.         createLine(seriesData){
  144.             var img = new Image();
  145.             img.src = require('@/assets/img/color-bg.png');
  146.             this.myChart.setOption({
  147.                 geo: { // 这个是重点 —— 这里设置为地图的阴影
  148.                     map: 'china', // 表示中国地图
  149.                     roam: false, // 禁止拖拽
  150.                     label: { // 标志信息
  151.                         show: false, // 是否显示对应地名
  152.                     },
  153.                     silent: true, // 禁止hover效果
  154.                     zoom: 1.1, // 地图比例
  155.                     center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
  156.                     itemStyle: {
  157.                         //areaColor:'#7303c0',//地图阴影的颜色
  158.                         areaColor:{
  159.                             image: img,  // 背景图
  160.                             repeat: 'repeat-x', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
  161.                         },
  162.                         borderColor: '#61727a', // 省份边框颜色
  163.                         borderWidth: 0.2, // 省份边框宽度
  164.                         shadowColor:"#fff", // 省份边框阴影rgba(100,255,238,0.5)
  165.                         shadowBlur: 5, // 省份边框聚焦
  166.                     },
  167.                     emphasis: {           
  168.                         show: false
  169.                     },
  170.                     //地图的阴影不显示南沙诸岛
  171.                     regions: [
  172.                         {
  173.                             name: "南海诸岛",
  174.                             itemStyle: {
  175.                             // 隐藏地图
  176.                             normal: {
  177.                                 opacity: 0, // 为 0 时不绘制该图形
  178.                             }
  179.                             },
  180.                             label: {
  181.                                 show: false // 隐藏文字
  182.                             }
  183.                         }
  184.                     ],
  185.                 },
  186.                 series: seriesData
  187.             })
  188.         },
  189.         convertData(data) {//坐标转换
  190.             console.log(data)
  191.             var res = [];
  192.             for (var i = 0; i < data.length; i++) {
  193.                 var dataItem = data[i];
  194.                 var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
  195.                 var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
  196.                 if (fromCoord && toCoord) {
  197.                     res.push({
  198.                         fromName: dataItem[0].name,
  199.                         toName: dataItem[1].name,
  200.                         coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
  201.                     });
  202.                 }
  203.             }
  204.             return res;
  205.         },
  206.     }
  207. }
  208. </script>
  209. <style lang="less" scoped>
  210. .el-container{
  211.     width: 100%;
  212.     height:100%;
  213.     background-color: #404a59;
  214.     .myChart{
  215.         width:100%;
  216.         height:100%;
  217.     }
  218. }
  219. </style>

五、bug 

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

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发