카테고리 없음

ECharts에서 차트 옵션에 함수를 사용하고 있을 때, `chart.getOption()`을 사용하면 함수가 직렬화되지 않는 문제

keisoft 2024. 8. 30. 13:49

// 차트 옵션 예시
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    itemStyle: {
      color: function(params) {
        // 이 함수는 기본적으로 로깅되지 않습니다
        if (params.value > 1000) {
          return 'red';
        }
        return 'blue';
      }
    }
  }]
};

// 차트 초기화
const chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

// 방법 1: 함수를 문자열로 변환
function logOptionWithFunctions(option) {
  return JSON.stringify(option, (key, value) => {
    if (typeof value === 'function') {
      return value.toString();
    }
    return value;
  }, 2);
}

console.log('Option with functions:', logOptionWithFunctions(chart.getOption()));

// 방법 2: 재귀적으로 객체를 순회하며 함수 로깅
function logObjectWithFunctions(obj, indent = '') {
  Object.keys(obj).forEach(key => {
    const value = obj[key];
    if (typeof value === 'function') {
      console.log(`${indent}${key}: ${value.toString()}`);
    } else if (typeof value === 'object' && value !== null) {
      console.log(`${indent}${key}:`);
      logObjectWithFunctions(value, indent + '  ');
    } else {
      console.log(`${indent}${key}: ${JSON.stringify(value)}`);
    }
  });
}

console.log('Detailed option with functions:');
logObjectWithFunctions(chart.getOption());

// 방법 3: ECharts 내장 util 사용 (ECharts 5.0.0 이상)
if (echarts.util && echarts.util.clone) {
  const clonedOption = echarts.util.clone(chart.getOption());
  console.log('Cloned option:', clonedOption);
}