ECharts 에서 Spec 값을 사각형으로 각 포인트 별로 표시하기

ECharts 에서 Spec 값을 사각형으로 각 포인트 별로 표시하기

 

각 포인트별로 Spec 값이 존재합니다. 상한과 하한 값이 존재하게 되는데

이를 MarkLine 을 이용해 사각형으로 표시해주는 방법입니다.

option = {
  dataset: {
    source: [
      // xtime, yvalue, specupper, speclower
      ['2023-01-01 08:00:00', 100, 110, 80],
      ['2023-01-01 09:00:00', 110, 120, 80],
      ['2023-01-01 10:00:00', 90, 120, 80],
      ['2023-01-01 11:00:00', 95, 120, 80],
      ['2023-01-01 12:00:00', 115, 120, 80],
    ]
  },
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'scatter',
      encode: {
        x: 0,
        y: 1
      },
      symbolSize: 10,
      itemStyle: {
        color: '#4169E1'
      },
      markLine: {
        silent: true,
        symbol : 'none',
        data: [
          [
            { xAxis: '2023-01-01 08:00:00', yAxis: 110 },
            { xAxis: '2023-01-01 08:00:00', yAxis: 80 }
          ],
          [
            { xAxis: '2023-01-01 09:00:00', yAxis: 120 },
            { xAxis: '2023-01-01 09:00:00', yAxis: 40 }
          ],
          [
            { xAxis: '2023-01-01 10:00:00', yAxis: 120 },
            { xAxis: '2023-01-01 10:00:00', yAxis: 80 }
          ],
          [
            { xAxis: '2023-01-01 11:00:00', yAxis: 100 },
            { xAxis: '2023-01-01 11:00:00', yAxis: 80 }
          ],
          [
            { xAxis: '2023-01-01 12:00:00', yAxis: 120 },
            { xAxis: '2023-01-01 12:00:00', yAxis: 80 }
          ]
        ],
        lineStyle: {
          color: '#FF4500',
          width: 10,
          opacity: 0.3,
          type:'solid'
        }
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      var data = params[0].data;
      return echarts.format.formatTime('yyyy-MM-dd HH:mm:ss', data[0]) + '<br />' +
             'Value: ' + data[1] + '<br />' +
             'Upper Spec: ' + data[2] + '<br />' +
             'Lower Spec: ' + data[3];
    }
  }
};

 

실행결과

 

 

아래 링크로 가면 예시코드가 구현된 ECharts 사이트로 이동합니다.

https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeBYAULWATAhmHAzgKZgBcy6mmBwArgE4DGR5A2pVZgPRewAekALZEANLACeANxwAbWqNgEQRRrRDL6YpSpnAA7kXodOrAOQAmAAzmAzAFpLARgePYlgBylLlr5dNjHbwDAsXdLAF0RYyozK1sXFzcATl9ff1hHEIyrUIiojE5YWOt7J0TA1O90pMsAnNgwyOjMYviypwzHSr8xJIBWOtqGvOaiixKEjsdzbvTMgeyhxvzOcI4AXxX-AEE-CAJyVALMMHFlclMhIlMNrfFd_cPo0_PYU2k5a9uOYnoIIgORWiR0KsBeLDeBEYeDAhn8oyI0EYwCwEJBoP45Fqo0w4nIjlGm1GBHEggARsAZABlCAALwhIVGEFhgippxkaJxsGRunoFwAxAAWRwANiSAFFHDdjlQiTLMIIcPQANYAGQg0E58qoBAgHOgZDB9HkW1BJPJlNgF2gMGupsKuHwbC5LRdVCQOz2gPGbWcHQ8szE9y9-MCsDlGMKHr4D29cVKftcAe8aSDsfIYXDbqa2pMbsw0fTb3jkyTKRTVTTIcW4ftkcL1Z9CcSlnLPkrEiLgssWdzVBzkddfc4DcexYm7VcFQrPU71emPYjg4LnrHTdLGXbW_SwbHmfW2brhXYw_dq7jE8TnUDc7HgUXR9Bo4vvvKXRnO6L-8PbpPy5XMaNiWk7ZDeu6Agutb5sg54XMBV7TGBX6LtmXIDhiMgakQbLiByTynjywB8m8_IAGKkYKfSVm6egQFgYAABb4tip6gDgjDMnibgAHQ2I-VDgqQpg0JhWDSpGB7apJnDSbA6FgMAlKQCA-GcGAfwAOYaYYFw4F68IygAZkRipgLCxGGbQSKQDAsAABQgEqOCCAQACUFDatI9DYHgOAILAjn0M5BCsBE3GOjgADcoz0CQDBwCoDFKmABDccZ9CmWlJl4AAKhAwh2aY4jFeIdgALJlXYWBYLAAAStWkIIgikAQBDpBFoXhO5ADUbwADxkt5XAAHymLA3XQW8ABqsjyBc40-fgrCOOEC2mANQ2jeNk2mAAquohiwFSyiMPNvUdeYq29etg2wCNY0TaeVCmKq-iHcdKhnYtOCsDY4TRTKsmSeskVAA