echarts 实现地图增加阴影及城市间线条

1.预期效果

 

2.边框使用到的属性

{
    shadowColor: `#337495`, // 阴影颜色
    shadowOffsetX: 8, // 阴影偏移
    shadowOffsetY: 20, // 阴影偏移
    borderColor: `#fff`, // 边框颜色
    borderWidth: 10, // 边框宽度
    shadowBlur: 1 // 边框阴影
}

3. 线条使用属性

lineStyle: {
  normal: {
   color: {
    type: `linear`,
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: `orange` // 0% 处的颜色
    }, {
      offset: 1, color: `rgba(255, 255, 255, 0.1)` // 100% 处的颜色
    }],
      globalCoord: false // 缺省为 false
    },
      width: 4
      // curveness: 0.2 配置曲线
    }
}

注意事项：

如果地图只设置外边框的时候可以在series中用type = 'map' 的组件设置边框颜色将内部的覆盖掉

话不多说,总代码

<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import '../../node_modules/echarts/map/js/china.js'
  // 线条颜色
  export default {
    name: `home`,
    mounted () {
      this.$nextTick(() => {
        const option = {
          geo: {
            map: `china`,
            center: [105.194115019531, 35.582111640625],
            aspectScale: 0.75, //长宽比
            zoom: 1.1,
            roam: false,
            itemStyle: {
              normal: {
                areaColor: `#10359b`,
                shadowColor: `#337495`,
                shadowOffsetX: 8,
                shadowOffsetY: 20,
                borderColor: `#fff`,
                borderWidth: 10,
                shadowBlur: 1
              },
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          },
          series: [
            {
              type: `map`,
              map: `china`,
              center: [105.194115019531, 35.582111640625],
              zoom: 1.1,
              geoIndex: 1,
              aspectScale: 0.75, //长宽比
              roam: false,
              effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: `#fff`,
                symbolSize: 3
              },
              lineStyle: {
                normal: {
                  color: `#ff0`,
                  width: 0,
                  curveness: 0.2
                }
              },
              data: [],
              emphasis: {
                label: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: `#10359b`,
                  borderColor: `#10119b`,
                  borderWidth: 1
                }
              }
            },
            {
              type: `lines`,
              smooth: false,
              coordinateSystem: `geo`,
              effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: `#fff`,
                symbolSize: 4
              },
              lineStyle: {
                normal: {
                    color: {
                      type: `linear`,
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: `orange` // 0% 处的颜色
                      }, {
                          offset: 1, color: `rgba(255, 255, 255, 0.1)` // 100% 处的颜色
                      }],
                      globalCoord: false // 缺省为 false
                    },
                    width: 4
                    // curveness: 0.2 配置曲线
                }
              },
              data: [
                {
                  fromName: `北京`,
                  toName: `包头`,
                  numValue: 30,
                  coords: [[101.4038, 36.8207], [109.642836, 19.327065]]
                },
                {
                  fromName: `北京`,
                  toName: `包头`,
                  numValue: 30,
                  coords: [[88.375561, 46.723249], [109.642836, 19.327065]]
                },
                {
                  fromName: `北京`,
                  toName: `包头`,
                  numValue: 30,
                  coords: [[124.213495, 51.9124], [109.642836, 19.327065]]
                },
                {
                  fromName: `北京`,
                  toName: `包头`,
                  numValue: 30,
                  coords: [[83.224318, 32.088892], [109.642836, 19.327065]]
                }
              ]
            }
          ]
        }
        const mapChart_ = echarts.init(document.getElementById(`map`))
        mapChart_.setOption(option)
      })
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
.home{
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #ddd;
  #map{
    height: 100%;
    width: 100%;
  }
}

</style>