echarts绘制地图区分外边界线与内边界线
echarts  中并没有封装对地图区分内外边界线的样式，只有统⼀的边界样式，所以我们换个思路，绘制2个图层，在底层图层中设置边界线的样式【该边界线为外边界线】，在上层图层中设置边界线的样式【该边界线为内边界线】这样就可以满⾜
【原理：上层的图层会覆盖底层的图层，所以地图的内边界线只会显⽰上层图层的边界线样式】
【样式必须满⾜条件：1、外边界必须⽐内边界线要粗并且内边界线要够细（内边界线borderWidth最好为0.5），否则也会被上层边界线覆盖或者外边界线展⽰效果有2条；2、并且上层区域背景⾊必须跟内边界线颜⾊接近或者外边界线颜⾊与内边界线⼀致，否则外边界线展⽰效果有2条】
实例demo:
<template>
<div ref="worldMap" ></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,
setoption
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>