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

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

 

이전 포스팅에 이어서 

2024.09.29 - [코딩/ECharts] - ECharts 에서 Spec 값을 사각형으로 각 포인트 별로 표시하기

spec 값으로 y 축 min, max 값을 조정하기 위해 밖에서 Data 선언 하여 min, max 값을 지정하였습니다.

조정하지 않은 경우 spec 값이 실데이터 범위보다 벗어나는 경우  MarkLine 이 표시되지 않습니다.

또한 MarkLine 값을 지정할때도 map 을 이용해 data 에서 뽑아 쓸 수 있게 하였습니다.

var data = [
  ['A', '2023-01-01 08:00:00', 100, 130, 70],
  ['A', '2023-01-01 09:00:00', 110, 125, 75],
  ['A', '2023-01-01 10:00:00', 90, 140, 60],
  ['B', '2023-01-01 11:00:00', 105, 135, 65],
  ['B', '2023-01-01 12:00:00', 115, 128, 72]
];


var specUpperMax = Math.max(...data.map(item => item[3]));
var specLowerMin = Math.min(...data.map(item => item[4]));

option = {
  dataset: {
    source: data
    //[
      // category, xtime, yvalue, specupper, speclower
      //['A', '2023-01-01 08:00:00', 100, 130, 70],
      //['A', '2023-01-01 09:00:00', 110, 125, 75],
      //['A', '2023-01-01 10:00:00', 90, 140, 60],
      //['B', '2023-01-01 11:00:00', 105, 135, 65],
      //['B', '2023-01-01 12:00:00', 115, 128, 72],
    //]
  },
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'value',
    min: Math.floor(specLowerMin * 0.9),
    max: Math.ceil(specUpperMax * 1.1),
    name: '측정값',
    nameLocation: 'middle',
    nameGap: 40
  },
  series: [
    {
      type: 'scatter',
      symbol: 'triangle',
      encode: {
        x: 1,
        y: 2
      },
      symbolSize: 10,
      itemStyle: {
        color: '#4169E1'
      },
      markLine: {
        silent: true,
        symbol : 'none',
           data: data.map(item => [{
          xAxis: item[1],
          yAxis: item[3]
        }, {
          xAxis: item[1],
          yAxis: item[4]
        }]),
        //data: [
        //  [
        //    { xAxis: '2023-01-01 08:00:00', yAxis: 130 },
        //    { xAxis: '2023-01-01 08:00:00', yAxis: 70 }
        //  ],
        //  [
        //    { xAxis: '2023-01-01 09:00:00', yAxis: 125 },
        //    { xAxis: '2023-01-01 09:00:00', yAxis: 75 }
        //  ],
        //  [
        //    { xAxis: '2023-01-01 10:00:00', yAxis: 140 },
        //    { xAxis: '2023-01-01 10:00:00', yAxis: 60 }
        //  ],
        //  [
        //    { xAxis: '2023-01-01 11:00:00', yAxis: 135 },
        //    { xAxis: '2023-01-01 11:00:00', yAxis: 65 }
        //  ],
        //  [
        //    { xAxis: '2023-01-01 12:00:00', yAxis: 128 },
        //    { xAxis: '2023-01-01 12:00:00', yAxis: 72}
        //  ]
        //],
        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];
    }
  }
};

실행결과

 

코드는 아래 주석이 달려진 내용을 보면 쉽게 이해가 가능합니다.

// 데이터 배열 정의: [카테고리, 시간, 측정값, 상한값, 하한값]
var data = [
  ['A', '2023-01-01 08:00:00', 100, 130, 70],
  ['A', '2023-01-01 09:00:00', 110, 125, 75],
  ['A', '2023-01-01 10:00:00', 90, 140, 60],
  ['B', '2023-01-01 11:00:00', 105, 135, 65],
  ['B', '2023-01-01 12:00:00', 115, 128, 72]
];

// 상한값의 최대값과 하한값의 최소값 계산
var specUpperMax = Math.max(...data.map(item => item[3]));
var specLowerMin = Math.min(...data.map(item => item[4]));

// ECharts 옵션 설정
option = {
  // 데이터셋 설정
  dataset: {
    source: data
  },
  // X축 설정: 시간 타입
  xAxis: {
    type: 'time'
  },
  // Y축 설정
  yAxis: {
    type: 'value',
    // Y축 범위를 데이터의 최소/최대값보다 약간 넓게 설정
    min: Math.floor(specLowerMin * 0.9),
    max: Math.ceil(specUpperMax * 1.1),
    name: '측정값',
    nameLocation: 'middle',
    nameGap: 40
  },
  // 시리즈 설정
  series: [
    {
      type: 'scatter', // 산점도 차트
      symbol: 'triangle', // 데이터 포인트를 삼각형으로 표시
      encode: {
        x: 1, // X축에 데이터의 두 번째 항목(시간) 매핑
        y: 2  // Y축에 데이터의 세 번째 항목(측정값) 매핑
      },
      symbolSize: 10, // 심볼 크기
      itemStyle: {
        color: '#4169E1' // 데이터 포인트 색상
      },
      // 마크라인 설정 (규격 범위 표시)
      markLine: {
        silent: true,
        symbol: 'none',
        // 각 데이터 포인트에 대해 상한값과 하한값을 연결하는 선 생성
        data: data.map(item => [{
          xAxis: item[1],
          yAxis: item[3]
        }, {
          xAxis: item[1],
          yAxis: item[4]
        }]),
        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=G4QwTgBAJiAuIQLwQNoFgBQFUHICCOANBDgEwAMpAzALTkCMd9E5AHAFznmflET1di9KuWIB2cgF1CmbCnx8ylWgyYsAnDx596AoaQCs4g9Nm4CxJdSZqBWrn3Wj-AFmcA2KTKy4AQooprVQZ-enteIXIjfipo9xNvORx_S0CVRhD6UnCdemis1nFSSUxJAG5MSoxQSABnAAcAUwBjAFV6prAAWRAADyQIHtgACwA6AFs-gApR2Zh4CZB6qYBLWEbxpAA-CDWNlCpJAEojiurwCAaWgBkAewB3Ru6VgDsBobHx15m5uBBF5Z7TaIHZAlAuY6nKq3eqwFa3N7IADeZnmIFqjVg7AgKJ82FqtwArmBmo1sWizNgAPRU9B47AQGkQZpwRoAc1uYAAnsRenDxo1iFzQAAbQmCy5NZqEjpPYhXZoih5PSkMmnyCwkNI2EJsHKRZzCZwSUz06m0hSpZQ65jkTRcbRCPT8QzGU0MtUWzVWdK2bgOhzEJxCNzETzuj2Mi0pLXW4LMXT6_hRISxMMJVXm-Qxn02l1J3T5UiFCBiYqJT0lHwAXwrvTwvRWtWxuI9sC5TWxOH5jRwZlrZi5DabLdV7c7JFF4qIqq-L2xH1GADMlZypgq7o9nm8AFQsUbqI4V7CTXoLuBjUkrEXrqXtTo9fp7-ijehH1UvEACruAQjnAKgTgBINTO9KfgKdwsnCCJdl8UBQCKvbHhAoGNAA4ks2JuP2FYYmAKyNM2qCqq2kbjmSJC1BB6xgMBkaXFy4wAEa3CKXawLhIAvGy8E0ZGjQvM0txQGRxG0We_CIR6XLYqQmYQAOZp0YxzEAMorAAXmReiyUCyntvBo4KdgAlKmAXYAMQuPQ7jqAAovQfYKfJtGTGAADW1yvMJsn4tefFYhAbHihJDK1PRTEihAXYvAiCHeR6aLkn8AKrOswI7CgIm0RA9aNgRYL0BGWUQEOuXYmChxxbWOJxdgOUjrsqUoAVwWScOeWNRClXHC1UYJYRhlRnIcVMgySLZW1XbavGLAcAGETFRNMTkHJPUjdgY11QRubTXqc18CV9USHJw1UtghWRiNdJFWtOLjaVsZBBktr2v680HQRWQGCtJ0ehti3bU9GhJu92JiF91Y_RA50epdkPrXd9UA36wOLfQbjfQNN1_fdSOZK9joLfdnjHZjp1Q6tZNXVlWMI1tU2A4me1CqjsQY9dZPw5tk1xgzYRM4T9XxCT7NnRTQ2k79tPc49tjZPzIMuqwbPUxzt1cw9vqZHLr37YtZYQxLUMndDDIip5ulcvp1UDUZzGcuZABiDsuAYgY1RA9wrFAIzYlpNsQDCIDNGsUn7lQPXYKR7A4ASZtQA5RUG7RScMinEawLczFwvUBltrhbJsk8XZ9E2PHYEunKTLAVHYkuhL8ZBbxTPU4BfrURzW7RNTQH8Awt2AbcoFIoxomctFgJixJvC0wzgLAtTLpXcCL2AVcACorAKUw4Fyu9cjQXRdDQsEQAAEqf7DjOM7C1LUfBokPxwQAA1CQAA8DGQFSWw4C_7sMjgAAaiAMUZFf6vwfgVF-79P6Mh_n_f2AD7xPAgMpKUXZoEP2KNAnAH8v7wOfv_bAOBNwoLQS0DBEC_gHHKKqFOBtqxlCAA