echarts曲線 上有個(gè)時(shí)間段，需要左右個(gè)顯示一個(gè)標(biāo)題開始時(shí)間-結(jié)束時(shí)間，ai回答是可以加兩個(gè)標(biāo)題，嘗試了2個(gè)小時(shí)，最后發(fā)現(xiàn)，根本加不上，不管怎么寫都只會(huì)顯示出來第一個(gè)，然后又去看了看文檔，發(fā)現(xiàn)一個(gè)陰影區(qū)域只能加一個(gè)標(biāo)題。最后腦子里忽然閃過一個(gè)想法，既然一個(gè)陰影只能加一個(gè)標(biāo)題，那么兩個(gè)陰影不就能顯示兩個(gè)了？把透明度調(diào)低，兩個(gè)重疊在一起，一個(gè)標(biāo)題左邊一個(gè)標(biāo)題放右邊，最后得到的效果就是一個(gè)陰影帶左右兩個(gè)標(biāo)題。并且隨著曲線的縮放，陰影和標(biāo)題也會(huì)跟著移動(dòng)。

企業(yè)微信截圖_20241119151945.png

企業(yè)微信截圖_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: "響應(yīng)開始時(shí)間",
                position: "insideTopLeft",
                color: "#fff", // 文字顏色
                fontSize: 15, // 字體大小
                backgroundColor: "rgba(255, 255, 255, 0.03)", // 背景顏色
                borderRadius: 10, // 圓角
                padding: [5, 10], // 內(nèi)邊距
                borderColor: "rgba(1, 214, 210, .6)", // 邊框顏色
                borderWidth: 0.5, // 邊框?qū)挾?                borderType: "solid", // 邊框類型，可選值：'solid'（實(shí)線）、'dashed'（虛線）、'dotted'（點(diǎn)線）
                offset: [-76, 0], // 增加偏移量
              },
            },
            {
              xAxis: data.timeList[1],
            },
          ],
          [
            {
              // name: "響應(yīng)結(jié)束時(shí)間",
              xAxis: data.timeList[0],
              label: {
                show: true,
                formatter: "響應(yīng)結(jié)束時(shí)間",
                position: "insideTopRight",
                color: "#fff", // 文字顏色
                fontSize: 15, // 字體大小
                backgroundColor: "rgba(255, 255, 255, 0.03)", // 背景顏色
                borderRadius: 10, // 圓角
                padding: [5, 10], // 內(nèi)邊距
                borderColor: "rgba(1, 214, 210, .6)", // 邊框顏色
                borderWidth: 0.5, // 邊框?qū)挾?                borderType: "solid", // 邊框類型，可選值：'solid'（實(shí)線）、'dashed'（虛線）、'dotted'（點(diǎn)線）
                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,
    },
  ],