echarts地圖設置背景圖片及海岸線實例代碼

更新時間：2022年12月09日 15:40:02 作者：紫雪璇雨

公司的業(yè)務涉及到統(tǒng)計圖的有很多,最近一直echarts里面踩各種坑,下面這篇文章主要給大家介紹了關于echarts地圖設置背景圖片及海岸線的相關資料,需要的朋友可以參考下

1、地圖設置背景圖片

// data
domImg: require('@/assets/images/largescreen/nation/map_bg.png'),
 
// js 渲染地圖之前
var domImg = document.createElement("img");
domImg.style.height = domImg.height = domImg.width = domImg.style.width = "100px";
domImg.src = that.domImg;
 
// js 渲染地址時，在地圖配置項geo中itemStyle
normal: {
    areaColor: {
        type: "pattern",
        image: domImg, //配置圖片
        repeat: "repeat", //可選值repeat、no-repeat、repeat-x、repeat-y
    },
}

2、地圖外部多層輪廓線

首先來看單層加粗外邊框，其實很簡單。咱們看一下效果

// 在地圖配置項series中添加樣式，效果如下圖
itemStyle: {
       normal: {
           areaColor: '#3075b2',
           borderColor: '#4c99f9',
           borderWidth: 1
       },
       emphasis: {
           areaColor: '#01215c'
       }
}

// 在地圖的配置項geo中設置，效果如下圖
itemStyle: {
       normal: {
           areaColor: '#01215c',
           borderWidth: 5,//設置外層邊框
           borderColor:'#9ffcff',
       }
}

在地圖配置項series、geo中設置邊框，單獨設置就是上圖所示。一起設置如下圖，中間邊框細，外輪廓邊框粗的效果。

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

如果想要多層外輪廓，就是在geo設置多個對象。

// 通過偏移，縮放來實現(xiàn)多層外輪廓的效果
this.option.geo = [
          {
            // 主圖
            map: map,
            zlevel: 0,
            zoom: 1.2, //當前視角的縮放比例
            roam: false, //是否開啟平游或縮放
            center: undefined,
            show: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(141, 199, 255,1)",
                borderWidth: 1,
                areaColor: {
                  type: "pattern",
                  image: domImg, //配置圖片
                  repeat: "repeat", //可選值repeat、no-repeat、repeat-x、repeat-y
                },
              },
              emphasis: {
                areaColor: "#2d9eff", //懸浮區(qū)背景
                shadowColor: "rgba(20, 113, 255,1)",
                shadowOffsetX: -2,
                shadowOffsetY: 5,
                shadowBlur: 10,
              },
            },
          },
          //第一層投影
          {
            map: map,
            zlevel: -1,
            zoom: 1.22, //當前視角的縮放比例
            roam: false, //是否開啟平游或縮放
            center: undefined,
            show: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderJoin: "round",
                borderColor: "rgba(176,228,252,1)",
                borderWidth: 3,
                areaColor: "rgba(133,188,232,1)",
                shadowColor: "rgba(133,188,232,.7)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 25,
              },
              emphasis: {
                show: false,
              },
            },
          },
          // 第二層投影
          {
            map: map,
            zlevel: -2,
            zoom: 1.2, //當前視角的縮放比例
            roam: false, //是否開啟平游或縮放
            center: undefined,
            show: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderJoin: "round",
                areaColor: "rgba(30,49,105,1)",
                shadowColor: "rgba(30,49,105,1)",
                shadowOffsetX: -5,
                shadowOffsetY: 6,
              },
              emphasis: {
                show: false,
              },
            },
          },
}

3、地圖海岸線

在echarts中regions是對特定的區(qū)域配置樣式，opacity中0的時候不會繪制該圖形，所以根據(jù)regions配置項來清除一部分圖形。這樣一來，直接在一個map上是不能實現(xiàn)海岸線效果的。那就需要兩個div地圖來實現(xiàn)海岸線效果。一層map是頂層的，完整數(shù)據(jù)的地圖，一層是去掉海岸想相關數(shù)據(jù)的地圖層。

// 首先把一部分圖形隱藏
regionsOption:[
    {
      name: "北京市",
      itemStyle: {
        // 隱藏地圖
        normal: {
          opacity: 0, // 為 0 時不繪制該圖形
        }
      },
      label: {
        show: false // 隱藏文字
      }
    },
    
    ......
 
    {
      name: "南海諸島",
      itemStyle: {
        // 隱藏地圖
        normal: {
          opacity: 0, // 為 0 時不繪制該圖形
        }
      },
      label: {
        show: false // 隱藏文字
      }
    },
  ]

完整的地圖數(shù)據(jù)我是從DataV.GeoAtlas下載的。

對某些省份圖形的隱藏之后，發(fā)現(xiàn)，遼寧、廣西在海岸線中只占一部分，就不能根據(jù)隱藏圖形來實現(xiàn)了。但是可以修改地圖繪制的經(jīng)緯度，把遼寧、廣西的一部分經(jīng)緯度繪制去掉就可以得到下圖效果。下載海岸線除去遼寧廣西部分經(jīng)緯度json數(shù)據(jù)

4、地圖中高亮顯示有數(shù)據(jù)的城市

數(shù)據(jù)高亮顯示，在地圖配置項series中data中設置itemStyle.areaColor。還可以加scatter，effectScatter都可以，根據(jù)需求來定。

// series-map.data.itemStyle地圖數(shù)據(jù)高亮顯示
var data = [
    { name: '天津', value: 4075, itemStyle: {areaColor: '#faa'} },
    { name: '湖北', value: 500, itemStyle: {areaColor: '#faa'} }
];
 
 
// series-effectScatter帶有漣漪特效動畫的散點（氣泡）圖
// this.convertData() 的數(shù)據(jù)格式：根據(jù)獲取地圖的數(shù)據(jù)，篩選出和data對應的數(shù)據(jù)，格式：[{name: 'name', value: 'value'}]
{
          type: "effectScatter",
          coordinateSystem: "geo",
          data: this.convertData(),
          // geoIndex:1,
          symbolSize: function (val) {
            return 10;
          },
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "",
              position: "top",
              show: true,
              color: "#fff",
              fontSize: 10,
              fontWeight: 800,
            },
          },
          itemStyle: {
            normal: {
              color: "#fdfbcc",
              shadowBlur: 10,
              shadowColor: "#fdfbcc",
            },
          },
          zlevel: 1,
        },

5、滾動高亮輪播

根據(jù)dispatchAction來設置地圖的配置項，和定時器相結合來實現(xiàn)滾動高亮顯示

// 設置鼠標移入移出地圖以及點擊地圖
mounted() {
    this.$nextTick(() => {
      this.initEcharts();
      let that = this;
      this.chart.on("click", this.echartsMapClick);
      this.chart.on("mouseover", this.echartsMapMouseover);
      this.chart.on("mouseout", this.echartsMapMouseout);
    })
}
 
 
    // 地圖鼠標移入事件
    echartsMapMouseover() {
      clearInterval(this.tooltipAutoplay);
    },
    // 地圖鼠標移出事件
    echartsMapMouseout() {
      this.setTooltipAutoplay();
    },
    // 動態(tài)顯示tooltip
    setTooltipAutoplay() {
      clearInterval(this.tooltipAutoplay);
      var index = 0; //播放所在下標
      var itemIndexList = new Array(this.mapDataList.length); //固定數(shù)組長度為3
      for (var i = 0; i < itemIndexList.length; i++) {
        itemIndexList[i] = i;
      }
      this.tooltipAutoplay = setInterval(() => {
        this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: itemIndexList,
        });
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.tooltipAutoplayIndex,
        });
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.tooltipAutoplayIndex,
        });
        this.tooltipAutoplayIndex++;
        if (this.tooltipAutoplayIndex >= this.mapDataList.length) {
          this.tooltipAutoplayIndex = 0;
          this.setTooltipAutoplay();
        }
      }, 6666);
    },