关于echarts渲染地图的一些注意点

前言

记录使用echarts画出UI设计图中的地图。

1、如何给地图最外边加一个边框？

因为暂时找不到更好的方法，我的解决方案是：渲染两个地图，并且将地图绝对定位，有边框的地图放在底部，我们需要展示无边框的放在上面，并且放在底部的地图放大一点。

geo: {
  show: true,
  map: 'map',
  zoom:1.2,        //放大缩小设置这个参数 
},

2、如果有的省市没有返回数据改怎么办？

这个时候没有数据的地图颜色是偏重的，和设计图不符，并且鼠标放上去没有任何数据，这样非常印象用户体验，这里的解决办法是：将地图的json文件和返回的数据遍历一遍，把不存在的数据重组一下数据结构，数据设置为0，和返回的数据放在一起。

let newArr = mapFeaturesArr.filter(function (item) {
   return realMapDataArr.every(function (item1) {
      return item != item1;
   })
});

3、如果要将地图每个模块的深浅渲染出来，需要设置最大值（经常忘记）

>let valueArr = []
>expectedData.forEach(function (item) {
   valueArr.push(item.value)
>})
>let maxValue = valueArr.sort((a,b)=>{
   return b-a;
>})[0];

visualMap: {
          show: true,
          min: 0,
          max: maxValue,   //这里设置最大值，这样会根据数据渲染颜色
          left: 56,
          top: 'bottom',
          bottom: 0,
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: false,
          textStyle: {
            color: '#fff',
            fontSize: '16px'
          },
          inRange: {
            color: ['#619BFF', '#002C9C'], // 最浅的颜色和最深的颜色
          }
        },

赏

谢谢你请我吃糖果