echarts 地图 3d 效果

// 引入地图
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, //区域边框宽度
          borderColor: "#009fe8", //区域边框颜色
        },
      },
      data: [
        {
          name: "桥东区",
          selected: true,
          value: 1,
          areaCode: "130702000000",
        },
        {
          name: "桥西区",
          selected: false,
          value: 2,
          areaCode: "130703000000",
        },
        {
          name: "宣化区",
          selected: false,
          value: 3,
          areaCode: "130705000000",
        },
        {
          name: "下花园区",
          selected: false,
          value: 4,
          areaCode: "130706000000",
        },
        {
          name: "万全区",
          selected: false,
          value: 5,
          areaCode: "130708000000",
        },
        {
          name: "崇礼区",
          selected: false,
          value: 6,
          areaCode: "130709000000",
        },
      ],
    },
  ],
  dataRange: {
    show: false,
    splitList: [
      { start: 1, end: 1, label: "桥东区", color: "#F0F6FD" },
      { start: 2, end: 2, label: "桥西区", color: "#F0F6FD" },
      { start: 3, end: 3, label: "宣化区", color: "#F0F6FD" },
      { start: 4, end: 4, label: "下花园区", color: "#F0F6FD" },
      { start: 5, end: 5, label: "万全区", color: "#F0F6FD" },
      { start: 6, end: 6, label: "崇礼区", color: "#F0F6FD" },
    ],
  }, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；
};

效果图