vue3使用echarts实现双x轴

代码:

Chart1!.setOption({
      title: {
        text: "就诊数据统计",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        formatter: function (params: any[]) {
          // 获取当前选中的是哪一行(就诊数量或就诊收入)
          const categoryName = params[0].name;

          // 只保留当前行相关的数据
          const filteredParams = params.filter((param) => {
            // 对于"就诊数量"行,只保留xAxisIndex为0的系列
            if (categoryName === "就诊数量" && param.seriesIndex < 3) {
              return true;
            }
            // 对于"就诊收入"行,只保留xAxisIndex为1的系列
            if (categoryName === "就诊收入" && param.seriesIndex >= 3) {
              return true;
            }
            return false;
          });

          // 如果没有数据,返回空
          if (filteredParams.length === 0) {
            return "";
          }

          // 构建提示文本
          let result = `${categoryName}<br/>`;
          let unit = categoryName === "就诊数量" ? "次" : "元";
          filteredParams.forEach((param) => {
            // 使用彩色标记和名称
            result += `${param.marker} ${param.seriesName}: ${param.value}${unit}<br/>`;
          });

          return result;
        },
      },
      legend: {
        left: "right",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "value",
          min: 0,
          minInterval: 100, // 最小单位为100次
          position: "bottom",
          axisLabel: {
            formatter: "{value}次",
          },
        },
        {
          type: "value",
          min: 0,
          minInterval: 100, // 最小单位为100元
          position: "top",
          axisLabel: {
            formatter: "{value}元",
          },
        },
      ],
      yAxis: {
        type: "category",
        data: ["就诊数量", "就诊收入"],
        axisPointer: {
          type: "shadow",
        },
      },
      series: [
        // 就诊数量系列 - 只使用下方X轴(xAxisIndex: 0)
        {
          name: "医生问诊",
          type: "bar",
          barWidth: 25,
          stack: "图表",
          label: {
            show: true,
            position: "inside",
          },
          xAxisIndex: 0,
          data: [doctorConsult, "-"], // 第一个位置是"就诊数量"行
          itemStyle: {
            color: "#52c41a", // 医生颜色
          },
        },
        {
          name: "治疗师咨询",
          type: "bar",
          stack: "图表",
          xAxisIndex: 0,
          label: {
            show: true,
            position: "inside",
          },
          data: [therapistConsult, "-"], // 第一个位置是"就诊数量"行
          itemStyle: {
            color: "#faad14", // 治疗师颜色
          },
        },
        {
          name: "护士咨询",
          type: "bar",
          stack: "图表",
          xAxisIndex: 0,
          label: {
            show: true,
            position: "inside",
          },
          data: [nurseConsult, "-"], // 第一个位置是"就诊数量"行
          itemStyle: {
            color: "#2ed1d1", // 护士颜色
          },
        },
        // 就诊收入系列 - 只使用上方X轴(xAxisIndex: 1)
        {
          name: "医生问诊",
          type: "bar",
          barWidth: 25,
          stack: "图表",
          xAxisIndex: 1,
          label: {
            show: true,
            position: "inside",
          },
          data: ["-", doctorAmount], // 第二个位置是"就诊收入"行
          itemStyle: {
            color: "#52c41a", // 医生颜色
          },
        },
        {
          name: "治疗师咨询",
          type: "bar",
          stack: "图表",
          xAxisIndex: 1,
          label: {
            show: true,
            position: "inside",
          },
          data: ["-", therapistAmount], // 第二个位置是"就诊收入"行
          itemStyle: {
            color: "#faad14", // 治疗师颜色
          },
        },
        {
          name: "护士咨询",
          type: "bar",
          stack: "图表",
          xAxisIndex: 1,
          label: {
            show: true,
            position: "inside",
          },
          data: ["-", nurseAmount], // 第二个位置是"就诊收入"行
          itemStyle: {
            color: "#2ed1d1", // 护士颜色
          },
        },
      ],
    });

ps: 注意series里面的stack都要写一样