如何在 apache echarts 中正确格式化多个矩形图形？

Question

I'm having trouble figuring out the best method of adding static shapes to the background of my chart using Apache Echarts. I have a graph that has multiple line series, and I'd like to provide transparent background shapes so that the viewer is able to see how the data falls into the various thresholds over time.

I've figured out how to add shapes to a chart, however I'm having trouble with two things:

1. Forcing the shapes to fill correctly to the edge of the graph/grid area, and cut off there.
2. Specifying exact thresholds for the shapes (from what I can tell, currently its based on pixels. I'd like to be able to drop thresholds based on y-axis values.

https://imgur.com/a/gJK91r0

I'm at a bit of a loss for how to achieve this. Listed below is the code I used to generate this graph. This is a link to the editor on apache i used, the code should be there as well.

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

I ended up figuring out a pretty decent solution to this. Adding data-less series with filled areas works pretty well and is pretty easy to implement.

You can check out the visualization here.

Here's the code:

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: [, ]
            }
          ]
        ]
      }
    }
  ]
};