2024-11-19echarts阴影区域怎么添加左右两个标题？

echarts曲线 上有个时间段，需要左右个显示一个标题开始时间-结束时间，ai回答是可以加两个标题，尝试了2个小时，最后发现，根本加不上，不管怎么写都只会显示出来第一个，然后又去看了看文档，发现一个阴影区域只能加一个标题。最后脑子里忽然闪过一个想法，既然一个阴影只能加一个标题，那么两个阴影不就能显示两个了？把透明度调低，两个重叠在一起，一个标题左边一个标题放右边，最后得到的效果就是一个阴影带左右两个标题。并且随着曲线的缩放，阴影和标题也会跟着移动。

企业微信截图_20241119151945.png 企业微信截图_20241119152019.png

  series: [
    {
      name: legendArr.value[0],
      type: "line",
      smooth: true,
      data: baseLoadList,
      markArea: {
        silent: true,
        itemStyle: {
          color: "rgba(254, 254, 254, 0.1)",
        },
        data: [
          [
            {
              xAxis: data.timeList[0],
              label: {
                show: true,
                formatter: "响应开始时间",
                position: "insideTopLeft",
                color: "#fff", // 文字颜色
                fontSize: 15, // 字体大小
                backgroundColor: "rgba(255, 255, 255, 0.03)", // 背景颜色
                borderRadius: 10, // 圆角
                padding: [5, 10], // 内边距
                borderColor: "rgba(1, 214, 210, .6)", // 边框颜色
                borderWidth: 0.5, // 边框宽度
                borderType: "solid", // 边框类型，可选值：'solid'（实线）、'dashed'（虚线）、'dotted'（点线）
                offset: [-76, 0], // 增加偏移量
              },
            },
            {
              xAxis: data.timeList[1],
            },
          ],
          [
            {
              // name: "响应结束时间",
              xAxis: data.timeList[0],
              label: {
                show: true,
                formatter: "响应结束时间",
                position: "insideTopRight",
                color: "#fff", // 文字颜色
                fontSize: 15, // 字体大小
                backgroundColor: "rgba(255, 255, 255, 0.03)", // 背景颜色
                borderRadius: 10, // 圆角
                padding: [5, 10], // 内边距
                borderColor: "rgba(1, 214, 210, .6)", // 边框颜色
                borderWidth: 0.5, // 边框宽度
                borderType: "solid", // 边框类型，可选值：'solid'（实线）、'dashed'（虚线）、'dotted'（点线）
                offset: [76, 0], // 增加偏移量
              },
            },
            {
              xAxis: data.timeList[1],
            },
          ],
        ],
      },
    },
    {
      name: legendArr.value[1],
      type: "line",
      smooth: true,
      data: realLoadList,
    },
    {
      name: legendArr.value[2],
      type: "line",
      smooth: true,
      data: baseLoadAvgList,
    },
    {
      name: legendArr.value[3],
      type: "line",
      smooth: true,
      data: realLoadAvgList,
    },
  ],