echarts 绘制地图 区分外边界线与内边界线

echarts  中并没有封装对 地图  区分内外边界线的样式，只有统一的边界样式，所以我们换个思路，绘制2个图层，在底层图层中设置边界线的样式【该边界线为外边界线】，在上层图层中设置边界线的样式【该边界线为内边界线】这样就可以满足

【原理：上层的图层会覆盖底层的图层，所以地图的内边界线只会显示上层图层的边界线样式】

【样式必须满足条件：1、外边界必须比内边界线要粗并且内边界线要够细（内边界线borderWidth最好为0.5），否则也会被上层边界线覆盖或者外边界线展示效果有2条；2、并且上层区域背景色必须跟内边界线颜色接近或者外边界线颜色与内边界线一致 ，否则外边界线展示效果有2条】

实例demo:

 <template>
  <div ref="worldMap" style="width: 1920px; height: 1080px; border: 1px solid #ddd"></div>
</template>
<script>
import * as echarts from 'echarts'
import china  from '@/assets/china.js'
export default {
  data() {
    return {}
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
        var worldChart = this.$echarts.init(this.$refs.worldMap)

        let option = {
        tooltip: {
          show: false,
        },
        geo: {
          map: 'china',
          roam: false, // 一定要关闭拖拽
          // center: [105, 36], // 调整地图中心位置
          boxDepth: 90, //地图倾斜度
          regionHeight: 8, //地图高度
          viewControl: {
            distance: 150, //地图视角 控制初始大小
            rotateSensitivity: 0, //禁止旋转
            zoomSensitivity: 0, //禁止缩放
          },
          label: {
            normal: {
              show: false, //关闭省份/国家名展示
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: '#0d0059',
              borderColor: 'pink',
              borderWidth: 5, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: '#01012a',
            },
            emphasis: {
              areaColor: '#184cff',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          // silent: true //不响应和触发鼠标事件（包括hover高亮）
        },
        series: [
          {
            type: 'map',
            map: 'china',
            boxDepth: 90, //地图倾斜度
            regionHeight: 8, //地图高度
            viewControl: {
              distance: 150, //地图视角 控制初始大小
              rotateSensitivity: 0, //禁止旋转
              zoomSensitivity: 0, //禁止缩放
            },
            roam: false,
            // center: [105, 36],
            // geoIndex: 1,//上面的geo是一个关于geo的数组，那么这里通过geoIndex来设置该数组的角标来定义底层的图层采用的是哪个geo
 　　　　　　 // aspectScale: 0.75, //长宽比

            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                // show: false
              },
              emphasis: {
                textStyle: {
                  color: 'white',
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#0d0059',
                borderColor: '#389dff',
                borderWidth: 0.5,
              },
              emphasis: {
                color: 'green',
                areaColor: '#17008d',
                borderWidth: 0,
              },
            },
            // silent: true //不响应和触发鼠标事件(包括hover高亮)
          },
        ],
      }
      worldChart.setOption(option)

    },
  },
}
</script>

标签：绘制地图,边界线,地图,borderWidth,false,图层,echarts
来源： https://www.cnblogs.com/YiFeng-Liu/p/15239316.html