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

╰半夏微凉° 2023-10-05 10:44 19阅读 0赞

1.预期效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70][]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200928095900329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_16,color_FFFFFF,t_70