feat: echarts 地图组件阴影实现

src/services/echarts.ts

@@ -6225,6 +6225,7 @@ export const charts = [
               tooltip: {},
               geo: {
                 map: 'hubei',
+                show: true,
                 zoom: 1.2,
                 scaleLimit:{
                   min: 1.2,
@@ -6241,32 +6242,87 @@ export const charts = [
                 // 地图区域的样式设置
                 itemStyle: {
                   normal: {
-                    areaColor: {
-                      x: 0,
-                      y: 0,
-                      x2: 0,
-                      y2: 1,
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: '#001d66a0',
-                        },
-                        {
-                          offset: 1,
-                          color: '#061E3Da0',
-                        },
-                      ],
-                    },
-                    borderColor: 'rgba(26,82,231, 1)',
-                    borderWidth: 1,
+                    areaColor: 'rgba(0, 15, 40, 0.5)',
+                    shadowColor: '#050E33',
+                    shadowBlur: 0,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 10,
+                    borderColor: 'rgba(0, 0, 0, 0.7)',
+                    borderWidth: 0.5,
                   },
                   emphasis: {
-                    areaColor: '#1677ff80',
-                    borderColor: '#1677ff',
+                    areaColor: '#2AB8FF',
+                    borderWidth: 1,
+                    color: 'green',
+                    label: {
+                      show: false,
+                    },
                   },
                 },
               },
               series: [
+                {
+                  type: 'map',
+                  roam: false,
+                  layoutSize: '100%',
+                  label: {
+                    normal: {
+                      show: false,
+                      textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                      },
+                    },
+                    emphasis: {
+                      textStyle: {
+                        color: '#fff',
+                      },
+                    },
+                  },
+                  itemStyle: {
+                    normal: {
+                      borderColor: '#4583ff',
+                      // borderColor:'rgba(26,82,231, 1)',
+                      borderWidth: 1,
+                      areaColor:'#0A1D66',
+                      // areaColor: 'rgba(7, 52, 126, 0.3)',
+                      shadowColor: '#050E3399',
+                      shadowBlur: 0,
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 1,
+                    },
+                    emphasis: {
+                      areaColor: '#112E8C',
+                      borderColor: '#96C0FF',
+                      borderWidth: 1,
+                      shadowColor: 'rgba(0, 255, 255, 0.7)',
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 1,
+                      label: {
+                        show: true,
+                        fontSize: 12
+                      },
+                    },
+                  },
+                  select:{
+                    itemStyle:{
+                      areaColor:'#1F45B3',
+                      color:'#fff'
+                    },
+                    label:{
+                      show:true,
+                      color:'#fff',
+                      fontSize: 12
+                    },
+                  },
+                  zoom: 1.2,
+                  scaleLimit:{
+                    min: 1.2,
+                    max: 1.2
+                  },
+                  map: 'hubei',
+                },
                 {
                   name: '涟漪',
                   tooltip: {
@@ -6388,6 +6444,11 @@ export const charts = [
                 label: 'echarts配置',
                 type: 'code',
               },
+              {
+                label:'阴影',
+                type:'switch',
+                key: 'echarts.option.geo.show',
+              }
             ],
           },
         },
@@ -6408,6 +6469,7 @@ export const charts = [
               tooltip: {},
               geo: {
                 map: 'china',
+                show: true,
                 zoom: 1.6,
                 scaleLimit:{
                   min: 1.6,
@@ -6432,17 +6494,88 @@ export const charts = [
                 // 地图区域的样式设置
                 itemStyle: {
                   normal: {
-                    borderColor: 'rgba(26,82,231, 1)',
-                    borderWidth: 1,
-                    areaColor: 'rgba(7, 52, 126, 0.3)',
+                    areaColor: 'rgba(0, 15, 40, 0.5)',
+                    shadowColor: '#050E33',
+                    shadowBlur: 0,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 10,
+                    borderColor: 'rgba(0, 0, 0, 0.7)',
+                    borderWidth: 0.5,
                   },
                   emphasis: {
-                    areaColor: '#1677ff80',
-                    borderColor: '#1677ff',
+                    areaColor: '#2AB8FF',
+                    borderWidth: 1,
+                    color: 'green',
+                    label: {
+                      show: false,
+                    },
                   },
                 },
               },
               series: [
+                {
+                  type: 'map',
+                  roam: false,
+                  center: [105, 35],
+                  layoutSize: '100%',
+                  label: {
+                    normal: {
+                      show: false,
+                      textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                      },
+                    },
+                    emphasis: {
+                      textStyle: {
+                        color: '#fff',
+                      },
+                    },
+                  },
+                  itemStyle: {
+                    normal: {
+                      borderColor: '#4583ff',
+                      // borderColor:'rgba(26,82,231, 1)',
+                      borderWidth: 1,
+                      areaColor:'#0A1D66',
+                      // areaColor: 'rgba(7, 52, 126, 0.3)',
+                      shadowColor: '#050E3399',
+                      shadowBlur: 0,
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 1,
+                    },
+                    emphasis: {
+                      areaColor: '#112E8C',
+                      borderColor: '#96C0FF',
+                      borderWidth: 1,
+                      shadowColor: 'rgba(0, 255, 255, 0.7)',
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 1,
+                      label: {
+                        show: true,
+                        fontSize: 12
+                      },
+                    },
+                  },
+                  select:{
+                    itemStyle:{
+                      areaColor:'#1F45B3',
+                      color:'#fff'
+                    },
+                    label:{
+                      show:true,
+                      color:'#fff',
+                      fontSize: 12
+                    },
+                  },
+                  zoom: 1.6,
+                  scaleLimit:{
+                    min: 1.6,
+                    max: 1.6
+                  },
+                  map: 'china',
+                },
                 {
                   name: '涟漪散点',
                   tooltip: {
@@ -6702,6 +6835,11 @@ export const charts = [
                 label: 'echarts配置',
                 type: 'code',
               },
+              {
+                label:'阴影',
+                type:'switch',
+                key: 'echarts.option.geo.show',
+              }
             ],
           },
         },