ECharts에서 차트 옵션에 함수를 사용하고 있을 때, `chart.getOption()`을 사용하면 함수가 직렬화되지 않는 문제
// 차트 옵션 예시
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);
}