Area Pieces

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

SCRIPT({
    data = [
        ["2019-10-10", 200], ["2019-10-11", 560], ["2019-10-12", 750],
        ["2019-10-13", 580], ["2019-10-14", 250], ["2019-10-15", 300],
        ["2019-10-16", 450], ["2019-10-17", 300], ["2019-10-18", 100]
    ];
    $.yield({
      title: { text: "Area Pieces" },
      xAxis: { type: "category", boundaryGap: false },
      yAxis: { type: "value", boundaryGap: [0, "30%"] },
      visualMap:{
        type: "piecewise",
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          { gt: 1, lt: 3, color: "rgba(0, 0, 180, 0.4)" },
          { gt: 5, lt: 7, color: "rgba(0, 0, 180, 0.4)" }
        ]
      },
      series: [
        {
          type: "line",
          smooth: 0.6,
          symbol: "none",
          data: data,
          lineStyle: { color: "#5470C6", width: 5 },
          areaStyle:{},
          markLine: {
            symbol: ["none", "none"],
            label: { show: false },
            data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
          }
        }   
      ]
    })
})
CHART()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

FAKE(
  json({
        ["2019-10-10", 200], ["2019-10-11", 560], ["2019-10-12", 750],
        ["2019-10-13", 580], ["2019-10-14", 250], ["2019-10-15", 300],
        ["2019-10-16", 450], ["2019-10-17", 300], ["2019-10-18", 100]
  })
)
// |   0      1
// +-> date   value
// |
MAPVALUE(0, list(value(0), value(1)))
// |   0               1
// +-> [date, value]   value
// |
POPVALUE(1)
// |   0
// +-> [date, value]
// |
CHART(
  chartOption({
    title: { text: "Area Pieces" },
    xAxis: { type: "category", boundaryGap: false },
    yAxis: { type: "value", boundaryGap: [0, "30%"] },
    visualMap:{
      type: "piecewise",
      show: false,
      dimension: 0,
      seriesIndex: 0,
      pieces: [
        { gt: 1, lt: 3, color: "rgba(0, 0, 180, 0.4)" },
        { gt: 5, lt: 7, color: "rgba(0, 0, 180, 0.4)" }
      ]
    },
    series: [
      {
        type: "line",
        smooth: 0.6,
        symbol: "none",
        data: column(0),
        lineStyle: {
          color: "#5470C6",
          width: 5
        },
        areaStyle:{},
        markLine: {
          symbol: ["none", "none"],
          label: { show: false },
          data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
        }
      }   
    ]
  })
)