echarts实现地图的多层级展示

const option: EChartsOption = {
  tooltip: {
    trigger: "item",
    showDelay: 0,
    transitionDuration: 0.2,
  },
  geo: [
    {
      map: "weinan",
      zlevel: 5,
      label: {
        show: true,
        color: "#eee",
      },
      itemStyle: {
        color: "#2075B8", // 背景
        borderColor: "#fff", // 边框颜色
      },
    },
    {
      map: "weinan",
      top: "11%",
      zlevel: 4,
      itemStyle: {
        color: "#3C5FA1", // 背景
        borderColor: "#3C5FA1", // 边框颜色
      },
    },
    {
      map: "weinan",
      top: "12%",
      zlevel: 3,
      itemStyle: {
        color: "#163F6C", // 背景
        borderColor: "#163F6C", // 边框颜色
      },
    },
    {
      map: "weinan",
      top: "13%",
      zlevel: 2,
      itemStyle: {
        color: "#31A0E6", // 背景
        borderColor: "#31A0E6", // 边框颜色
        shadowColor: "#fff", // 外部阴影
      },
    },
  ],
  series: [
    {
      name: "weinan",
      type: "map",
      map: "weinan",
      label: {
        show: true,
        color: "#FFF",
      },
      data: [
        // 这里需要注意的是，一些提供商的地区命名存在区别，比如 白水县 称作 白水、韩城市 称作 韩城
        { name: "韩城", value: 4822023 },
        { name: "白水", value: 38000000 },
        { name: "澄城", value: 6553255 },
        { name: "蒲城", value: 2949131 },
        { name: "合阳", value: 299131 },
        { name: "大荔", value: 2949131 },
        { name: "富平", value: 30000000 },
        { name: "临渭", value: 25000000 },
        { name: "华州", value: 294913 },
        { name: "华阴", value: 5500000 },
        { name: "潼关", value: 1949131 },
      ],
    },
  ],
};