echarts 地图层叠、外阴影、外边框、多层阴影样式
主要是应用geo这个属性:
export const baseOption = ({ areaStr, scatterDara, zoom = 1.6, layoutSize = '80%', aspectScale = 0.8, layoutCenterOne = 55, layoutCenterTwo = 70 }) => { const hideArr = [{ name: "南海诸岛", itemStyle: { // 隐藏地图 normal: { opacity: 0, // 为 0 时不绘制该图形 } }, label: { show: false // 隐藏文字 } }, { name: "南海诸岛", itemStyle: { // 隐藏地图 normal: { opacity: 0, // 为 0 时不绘制该图形 } }, label: { show: false // 隐藏文字 } } ] const commonGeo = { map: areaStr, roam: false, label: { show: false }, layoutSize, aspectScale, silent: true, zoom, regions: hideArr } return { geo: [{ ...commonGeo, layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo}%`], itemStyle: { normal: { areaColor: '#2AF3FF', shadowColor: '#2AF3FF', shadowBlur: 20 }, emphasis: { show: false } } }, { ...commonGeo, zlevel: 1, layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo - 0.5}%`], itemStyle: { normal: { areaColor: '#00DFFF', borderColor: '#2AF3FF', }, emphasis: { show: false } } }, { ...commonGeo, zlevel: 2, layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo - 1.5}%`], itemStyle: { normal: { borderColor: '#00DFFF', borderWidth: 2, }, emphasis: { show: false } } } ], series: [{ type: 'scatter', coordinateSystem: 'geo', symbolSize: 30, symbol: 'circle', zlevel: 4, itemStyle: { normal: { color: '#0505FB' } }, label: { normal: { show: true, lineHeight: 12, align: 'center', formatter(row) { return `{a|${row.name}\n${row.value[2]}}` }, rich: { a: { color: '#fff', fontSize: 6 } } } }, data: scatterDara }, { ...commonGeo, type: 'map', zlevel: 3, layoutCenter: [`${layoutCenterOne}%`, `${layoutCenterTwo - 1.5}%`], emphasis: { label: { show: false } }, label: { normal: { show: false, color: '#fff' } }, itemStyle: { normal: { areaColor: '#00256D', borderColor: '#006AB6', // 省份边框颜色 borderWidth: 0.5 // 省份边框宽度 } }, data: [] } ] } }
记录进步!!!