// 引入地圖
echarts.registerMap("zjksxq", sxqJson);
// 添加陰影
for (let index = 0; index < 20; index++) {
  geoList.push({
    map: "zjksxq",
    zoom: 1,
    zLevel: 0,
    roam: false, // 禁止拖拽
    silent: true,
    label: {
      show: false,
    },
    itemStyle: {
      areaColor: "#07183F",
      shadowColor: "#8B9AB2",
      shadowOffsetY: index * 1.5,
      shadowOffsetX: 0,
    },
  });
}
// 配置
const zjksxqOption = {
  geo: [...geoList],
  series: [
    {
      type: "map",
      mapType: "zjksxq",
      visualMap: {
        show: false,
      },
      label: {
        show: true,
        normal: {
          show: true, //顯示省份標簽
          textStyle: {
            color: "#000",
          }, //省份標簽字體顏色
        },
      },
      emphasis: {
        label: {
          color: "#fff",
        },
        itemStyle: {
          borderWidth: 0,
          shadowColor: "rgba(22, 87, 200, 0.5)",
          shadowBlur: 5,
          shadowOffsetY: 5,
          borderColor: "rgba(255,255,255,1)",
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#779ddf", // 0% 處的顏色
              },
              {
                offset: 1,
                color: "#1657C8", // 100% 處的顏色
              },
            ],
            global: false, // 缺省為 false
          },
        },
      },
      select: {
        label: {
          color: "#fff",
        },
        itemStyle: {
          borderWidth: 0,
          shadowColor: "rgba(22, 87, 200, 0.5)",
          shadowBlur: 20,
          shadowOffsetY: 20,
          borderColor: "rgba(255,255,255,1)",
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#779ddf", // 0% 處的顏色
              },
              {
                offset: 1,
                color: "#1657C8", // 100% 處的顏色
              },
            ],
            global: false, // 缺省為 false
          },
        },
      },
      aspectScale: 0.75,
      zoom: 1,
      itemStyle: {
        normal: {
          borderWidth: 0, //區(qū)域邊框寬度
          borderColor: "#009fe8", //區(qū)域邊框顏色
        },
      },
      data: [
        {
          name: "橋東區(qū)",
          selected: true,
          value: 1,
          areaCode: "130702000000",
        },
        {
          name: "橋西區(qū)",
          selected: false,
          value: 2,
          areaCode: "130703000000",
        },
        {
          name: "宣化區(qū)",
          selected: false,
          value: 3,
          areaCode: "130705000000",
        },
        {
          name: "下花園區(qū)",
          selected: false,
          value: 4,
          areaCode: "130706000000",
        },
        {
          name: "萬全區(qū)",
          selected: false,
          value: 5,
          areaCode: "130708000000",
        },
        {
          name: "崇禮區(qū)",
          selected: false,
          value: 6,
          areaCode: "130709000000",
        },
      ],
    },
  ],
  dataRange: {
    show: false,
    splitList: [
      { start: 1, end: 1, label: "橋東區(qū)", color: "#F0F6FD" },
      { start: 2, end: 2, label: "橋西區(qū)", color: "#F0F6FD" },
      { start: 3, end: 3, label: "宣化區(qū)", color: "#F0F6FD" },
      { start: 4, end: 4, label: "下花園區(qū)", color: "#F0F6FD" },
      { start: 5, end: 5, label: "萬全區(qū)", color: "#F0F6FD" },
      { start: 6, end: 6, label: "崇禮區(qū)", color: "#F0F6FD" },
    ],
  }, //各省地圖顏色；start：值域開始值；end：值域結束值；label：圖例名稱；color：自定義顏色值；
};

效果圖

image.png