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: '#389dff', 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>