【前端实践系列之十四】Echarts地图圆形背景及阴影实现

这是我参与更文挑战的第21天，活动详情查看： 更文挑战 !

👽 概论

本次实践主要讲Echarts开发中的一个属性和一种思路。一个属性很简单，就是backgroundColor属性，一种思路指的的是跳出定式思维、巧妙搭配乍看不相干的属性来完成需求。

👽 附：前置代码

<template>
  <div id="app" :style="{ width: '400px', height: '400px' }"></div>
</template>

<script>
import mapJson from './assets/mapJson.json';
export default {
  name: 'App',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const echartDom = document.querySelector('#app');
      const echartIns = echarts.init(echartDom);

      echarts.registerMap('地图', mapJson);

      // 指定图表的配置项和数据
      const option = {
        series: [
          {
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            type: 'map',
            map: '地图',
            itemStyle: {
              areaColor: 'rgb(73,136,251)',
            },
          },
        ],
      };

      echartIns.setOption(option);
    },
  },
};
</script>

👽 backgroundColor属性

echarts中的 backgroundColor 属性是用来给图表添加背景颜色的。直接添加颜色非常简单，只需在option中写入backgoundColor:'#fff22f'即可。

这样地图后的一整块背景都会变成黄色，那如果是想实现上图中黄色圆形拼接蓝色背景的效果呢？

有些伙伴可能会说，直接添加一张类似的背景图片即可。没毛病，backgroundColor 属性的确支持传入图片，具体格式为：

backgoundColor:{   
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

但这样其实有点大材小用，backgroundColor 属性还支持渐变色彩，径向渐变其实可以轻松解决这个问题。

  backgroundColor: {
    type: 'radial',
    x: 0.5,//圆心x位于x轴50%处
    y: 0.5,//圆心y位于y轴50%处
    r: 0.5,//背景半径
    colorStops: [
       {
         offset: 0,
         color: '#fff22f', // 0% 处的颜色
       },
       {
         offset: 0.8,
         color: '#fff22f', // 80% 处的颜色
       },
       {
         offset: 0.8,
         color: 'rgb(35, 93, 204)', // 80% 处的颜色
       },
       {
         offset: 1,
         color: 'rgb(35, 93, 204)', // 100% 处的颜色
       },
    ],
    global: false, 
  },

👽 阴影实现

上图的效果还是略微显得单调，那就来实现个阴影效果吧。说起阴影，阴影不就是shadow吗？那设置shadow 相关的属性就可以了，好，直接撸代码。

        series: [
          {
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            type: 'map',
            map: '地图',
            itemStyle: {
              areaColor: 'rgb(73,136,251)',
              shadowColor: 'rgb(0,35,86)',//阴影颜色
              shadowBlur: 5,//阴影模糊距离
            },
          },
        ],

诶？不是想要的效果。仔细看 shadow 相关的属性是写在itemStyle内的，这个阴影相当于也是在给每个itemStyle配置。

此路不通，怎么办呢？这时我们便需要跳出既定思维，阴影的实现并不只能从阴影本身出发考虑。可以这么想，如果有两张大小相同的地图，一张颜色较深的稍微错位铺在下方不也能实现类似效果吗？

        geo: {
          layoutCenter: ['52%', '52%'], //阴影地图位置稍错开一点
          layoutSize: '100%',
          map: '地图',
          itemStyle: {
            areaColor: 'rgb(0,35,86)', //颜色加深
            borderColor: 'rgb(0,35,86)', //边界线颜色与区域色保持一致，以免出戏
          },
          silent: true, //静默处理，不响应鼠标等事件，让它安安心心做个背景
        },
        series: [
          {
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            type: 'map',
            map: '地图',
            itemStyle: {
              areaColor: 'rgb(73,136,251)',
            },
          },
        ],

👽 结语

虽说是介绍了两个点，其实都是共通的：大家一起把思维开阔起来！