如何在 apache echarts 中正確格式化多個矩形圖形？

Question

我無法找出使用 Apache Echarts 將靜態形狀添加到圖表背景的最佳方法。 我有一個具有多個線系列的圖表，我想提供透明的背景形狀，以便查看者能夠看到數據如何隨着時間的推移落入各種閾值。

我已經想出了如何將形狀添加到圖表中，但是我遇到了兩件事：

1. 強制形狀正確填充到圖形/網格區域的邊緣，並在那里切斷。
2. 為形狀指定確切的閾值（據我所知，目前它基於像素。我希望能夠根據 y 軸值降低閾值。

https://imgur.com/a/gJK91r0

我對如何實現這一目標有點茫然。 下面列出的是我用來生成此圖的代碼。 這是我使用的 apache 上的編輯器的鏈接，代碼也應該在那里。

https://echarts.apache.org/examples/en/editor.html?c=line-simple&lang=ts&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2juisRgJu_LD-VABmYHQAjAAMAKS80Uas2omyqRmh6GCgRABsKUWwAEbAYCUAtuUpISThjCDaEPRi0e4entR04cAKIJkDMfF5tAUTA9m5yenzHrX1wE2wFVXFpduV0ej0Xf4CHFTQvZPo_TeD3rQX9GCrN3jaHd5397DkRAAWACsh1-pAA7hABGBtERUilQWDYNoqBAcnkAEwI3YDBxHAZ4CixKJI2BxCD-fx0DisaqMAAUlVgGKBQJ4sCZKQAdBiAJTBMF2fHoPH3H6TChDWTPV44jwfL4kpH_ZnY4UDSHQ2GwAFq0kotFLZkguWkUW_QnkYnEUnkynU2kMlls40uzk8_nqkXq82TcUDSWPGVvSYKqX-yYqxFgzUwwF6pEG9FELHRm6-95E75e0h2qnSx3053szklj0C35C-5Vga2DxCkjWUJ4KhGKiEWCiPr4oRgESdpIm5kAZiZGIxAPZGKSAA52Ulhy6kgCAOxTipN_GBuj-CDQZTRDP-3v90Twqcsqcrl0Yspz2CLyfMmdrh8pJKbiVeHd7g_1xsoHYADcQA

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
   grid: {
    left: '10%',
    right: '10%',
    top: 60,
    bottom: 60
  },
  graphic: [
    {
      type: 'group',
      left: '10%',
      right: '10%',
      bottom: 60,
      top: 60,
      children: [
        {
          type: 'rect',
          shape: {
            y: 450,
            width: 1000,
            height: 200,
          },
          style: {
            fill: 'rgba(0, 255, 0, 0.2)'
          }
        },
        {
          type: 'rect',
          shape: {
            y: 200,
            width: 400,
            height: 250,
          },
          style: {
            fill: 'rgba(255, 255, 0, 0.2)'
          }
        },
        {
          type: 'rect',
          shape: {
            y: 0,
            width: 400,
            height: 200,
          },
          style: {
            fill: 'rgba(255, 0, 0, 0.2)'
          }
        }
      ]
    }

  ],
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [100, 225, 275, 268, 354, 287, 301],
      type: 'line'
    }
  ]
};

Answer 1

我最終找到了一個相當不錯的解決方案。 添加填充區域的無數據系列效果很好，並且很容易實現。

你可以在這里查看可視化。

這是代碼：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [100, 225, 275, 268, 354, 287, 301],
      type: 'line'
    },
    {
      type: 'line',
      markArea: {
        itemStyle: {
          color: 'rgba(0, 255, 0, 0.2)'
        },
        data: [
          [
            {
              coord: [, 125]
            },
            {
              coord: [, 0]
            }
          ]
        ]
      }
    },
    {
      type: 'line',
      markArea: {
        itemStyle: {
          color: 'rgba(255, 255, 0, 0.2)'
        },
        data: [
          [
            {
              coord: [, 275]
            },
            {
              coord: [, 125]
            }
          ]
        ]
      }
    },
    {
      type: 'line',
      markArea: {
        itemStyle: {
          color: 'rgba(255, 0, 0, 0.2)'
        },
        data: [
          [
            {
              coord: [, 275]
            },
            {
              coord: [, ]
            }
          ]
        ]
      }
    }
  ]
};