定制设计echarts 地图设置背景图片、海岸线

目录

1、定制设计地图设置背景图片

  1. // data
  2. domImg: require('@/assets/images/largescreen/nation/map_bg.png'),
  3.  
  4. // js 定制设计渲染地图之前
  5. var domImg = document.createElement("img");
  6. domImg.style.height = domImg.height = domImg.width = domImg.style.width = "100px";
  7. domImg.src = that.domImg;
  8.  
  9. // js 定制设计渲染地址时，定制设计定制设计在地图配置项geo中itemStyle
  10. normal: {
  11.     areaColor: {
  12.         type: "pattern",
  13.         image: domImg, //配置图片
  14.         repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
  15.     },
  16. }

2、定制设计地图外部多层轮廓线

定制设计首先来看单层加粗外边框，定制设计其实很简单。定制设计咱们看一下效果

  1. // 在地图配置项series中添加样式，效果如下图
  2. itemStyle: {
  3.        normal: {
  4.            areaColor: '#3075b2',
  5.            borderColor: '#4c99f9',
  6.            borderWidth: 1
  7.        },
  8.        emphasis: {
  9.            areaColor: '#01215c'
  10.        }
  11. }

  1. // 在地图的配置项geo中设置，效果如下图
  2. itemStyle: {
  3.        normal: {
  4.            areaColor: '#01215c',
  5.            borderWidth: 5,//设置外层边框
  6.            borderColor:'#9ffcff',
  7.        }
  8. }

 在地图配置项series、中设置边框，单独设置就是上图所示。一起设置如下图，中间边框细，外轮廓边框粗的效果。

外轮廓加投影就是在 geo中添加 shadowColor设置，以及偏移shadowOffsetX、shadowOffsetY、shadowBlur。

如果想要多层外轮廓，就是在geo设置多个对象。

  1. // 通过偏移，缩放来实现多层外轮廓的效果
  2. this.option.geo = [
  3.           {
  4.             // 主图
  5.             map: map,
  6.             zlevel: 0,
  7.             zoom: 1.2, //当前视角的缩放比例
  8.             roam: false, //是否开启平游或缩放
  9.             center: undefined,
  10.             show: true,
  11.             label: {
  12.               normal: {
  13.                 show: false,
  14.               },
  15.               emphasis: {
  16.                 show: false,
  17.               },
  18.             },
  19.             itemStyle: {
  20.               normal: {
  21.                 borderColor: "rgba(141, 199, 255,1)",
  22.                 borderWidth: 1,
  23.                 areaColor: {
  24.                   type: "pattern",
  25.                   image: domImg, //配置图片
  26.                   repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
  27.                 },
  28.               },
  29.               emphasis: {
  30.                 areaColor: "#2d9eff", //悬浮区背景
  31.                 shadowColor: "rgba(20, 113, 255,1)",
  32.                 shadowOffsetX: -2,
  33.                 shadowOffsetY: 5,
  34.                 shadowBlur: 10,
  35.               },
  36.             },
  37.           },
  38.           //第一层投影
  39.           {
  40.             map: map,
  41.             zlevel: -1,
  42.             zoom: 1.22, //当前视角的缩放比例
  43.             roam: false, //是否开启平游或缩放
  44.             center: undefined,
  45.             show: true,
  46.             label: {
  47.               normal: {
  48.                 show: false,
  49.               },
  50.               emphasis: {
  51.                 show: false,
  52.               },
  53.             },
  54.             itemStyle: {
  55.               normal: {
  56.                 borderJoin: "round",
  57.                 borderColor: "rgba(176,228,252,1)",
  58.                 borderWidth: 3,
  59.                 areaColor: "rgba(133,188,232,1)",
  60.                 shadowColor: "rgba(133,188,232,.7)",
  61.                 shadowOffsetX: 0,
  62.                 shadowOffsetY: 0,
  63.                 shadowBlur: 25,
  64.               },
  65.               emphasis: {
  66.                 show: false,
  67.               },
  68.             },
  69.           },
  70.           // 第二层投影
  71.           {
  72.             map: map,
  73.             zlevel: -2,
  74.             zoom: 1.2, //当前视角的缩放比例
  75.             roam: false, //是否开启平游或缩放
  76.             center: undefined,
  77.             show: true,
  78.             label: {
  79.               normal: {
  80.                 show: false,
  81.               },
  82.               emphasis: {
  83.                 show: false,
  84.               },
  85.             },
  86.             itemStyle: {
  87.               normal: {
  88.                 borderJoin: "round",
  89.                 areaColor: "rgba(30,49,105,1)",
  90.                 shadowColor: "rgba(30,49,105,1)",
  91.                 shadowOffsetX: -5,
  92.                 shadowOffsetY: 6,
  93.               },
  94.               emphasis: {
  95.                 show: false,
  96.               },
  97.             },
  98.           },
  99. }

3、地图海岸线

在echarts中regions是对特定的区域配置样式，opacity中0的时候不会绘制该图形，所以根据regions配置项来清除一部分图形。这样一来，直接在一个map上是不能实现海岸线效果的。那就需要两个div地图来实现海岸线效果。一层map是顶层的，完整数据的地图，一层是去掉海岸想相关数据的地图层。

  1. // 首先把一部分图形隐藏
  2. regionsOption:[
  3.     {
  4.       name: "北京市",
  5.       itemStyle: {
  6.         // 隐藏地图
  7.         normal: {
  8.           opacity: 0, // 为 0 时不绘制该图形
  9.         }
  10.       },
  11.       label: {
  12.         show: false // 隐藏文字
  13.       }
  14.     },
  15.     
  16.     ......
  17.  
  18.     {
  19.       name: "南海诸岛",
  20.       itemStyle: {
  21.         // 隐藏地图
  22.         normal: {
  23.           opacity: 0, // 为 0 时不绘制该图形
  24.         }
  25.       },
  26.       label: {
  27.         show: false // 隐藏文字
  28.       }
  29.     },
  30.   ]

完整的地图数据我是从下载的。

对某些省份图形的隐藏之后，发现，辽宁、广西在海岸线中只占一部分，就不能根据隐藏图形来实现了。但是可以修改地图绘制的，把辽宁、广西的一部分经纬度绘制去掉就可以得到下图效果。

4、地图中高亮显示有数据的城市

数据高亮显示，在地图配置项series中data中设置itemStyle.areaColor。还可以加scatter，effectScatter都可以，根据需求来定。

  1. // series-map.data.itemStyle地图数据高亮显示
  2. var data = [
  3.     { name: '天津', value: 4075, itemStyle: {areaColor: '#faa'} },
  4.     { name: '湖北', value: 500, itemStyle: {areaColor: '#faa'} }
  5. ];
  6.  
  7.  
  8. // series-effectScatter带有涟漪特效动画的散点（气泡）图
  9. // this.convertData() 的数据格式：根据获取地图的数据，筛选出和data对应的数据，格式：[{name: 'name', value: 'value'}]
  10. {
  11.           type: "effectScatter",
  12.           coordinateSystem: "geo",
  13.           data: this.convertData(),
  14.           // geoIndex:1,
  15.           symbolSize: function (val) {
  16.             return 10;
  17.           },
  18.           showEffectOn: "render",
  19.           rippleEffect: {
  20.             brushType: "stroke",
  21.           },
  22.           hoverAnimation: true,
  23.           label: {
  24.             normal: {
  25.               formatter: "{b}",
  26.               position: "top",
  27.               show: true,
  28.               color: "#fff",
  29.               fontSize: 10,
  30.               fontWeight: 800,
  31.             },
  32.           },
  33.           itemStyle: {
  34.             normal: {
  35.               color: "#fdfbcc",
  36.               shadowBlur: 10,
  37.               shadowColor: "#fdfbcc",
  38.             },
  39.           },
  40.           zlevel: 1,
  41.         },

5、滚动高亮轮播

根据dispatchAction来设置地图的配置项，和定时器相结合来实现滚动高亮显示

  1. // 设置鼠标移入移出地图以及点击地图
  2. mounted() {
  3.     this.$nextTick(() => {
  4.       this.initEcharts();
  5.       let that = this;
  6.       this.chart.on("click", this.echartsMapClick);
  7.       this.chart.on("mouseover", this.echartsMapMouseover);
  8.       this.chart.on("mouseout", this.echartsMapMouseout);
  9.     })
  10. }
  11.  
  12.  
  13.     // 地图鼠标移入事件
  14.     echartsMapMouseover() {
  15.       clearInterval(this.tooltipAutoplay);
  16.     },
  17.     // 地图鼠标移出事件
  18.     echartsMapMouseout() {
  19.       this.setTooltipAutoplay();
  20.     },
  21.     // 动态显示tooltip
  22.     setTooltipAutoplay() {
  23.       clearInterval(this.tooltipAutoplay);
  24.       var index = 0; //播放所在下标
  25.       var itemIndexList = new Array(this.mapDataList.length); //固定数组长度为3
  26.       for (var i = 0; i < itemIndexList.length; i++) {
  27.         itemIndexList[i] = i;
  28.       }
  29.       this.tooltipAutoplay = setInterval(() => {
  30.         this.chart.dispatchAction({
  31.           type: "downplay",
  32.           seriesIndex: 0,
  33.           dataIndex: itemIndexList,
  34.         });
  35.         this.chart.dispatchAction({
  36.           type: "showTip",
  37.           seriesIndex: 0,
  38.           dataIndex: this.tooltipAutoplayIndex,
  39.         });
  40.         this.chart.dispatchAction({
  41.           type: "highlight",
  42.           seriesIndex: 0,
  43.           dataIndex: this.tooltipAutoplayIndex,
  44.         });
  45.         this.tooltipAutoplayIndex++;
  46.         if (this.tooltipAutoplayIndex >= this.mapDataList.length) {
  47.           this.tooltipAutoplayIndex = 0;
  48.           this.setTooltipAutoplay();
  49.         }
  50.       }, 6666);
  51.     },

有不同意见的小伙伴，欢迎指出

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