[vue-echart] options props 기본값의 axis 설정 누락

문제점

Cannot read property 'coordinateSystem' of undefined

 at Object.layout (catesianAxisHelper.js:54)

 at ExtendedClass.render (CartesianAxisView.js:74)

 at echarts.js:1450

 at Array.forEach (<anonymous>)

 at each (util.js:300)

 at renderComponents (echarts.js:1448)

 at render (echarts.js:1434)

 at ECharts.update (echarts.js:861)

 at ECharts.echartsProto.setOption (echarts.js:411)

 

해결법

vue-echart의  초기 설정값에 문제가 있었다.

라인 그래프이기 때문에 초기 options props에 전달되는 초기 값을 아래와 같이 사용했는데...

option: {
    renderer:'svg',
    legend: {
        data: [],
    },
    xAxis: {
        type: 'category',
        data: [],
    },
    series: []
}

에러로그에 coordinateSystem이 undefined니까,

축과 관련된 건데 난 분명 xAxis을 줬는데, 대체 이게 왜 나오지 싶었는데

멍청하게도 라인 그래프니까 2차원...그러니까 y축 설정인 yAxis가 빠져서였다^^...

그러니까 아래와 같이 yAxis: {} 이것만 추가하면 됨...

option: {
    renderer:'svg',
    legend: {
        data: [],
    },
    xAxis: {
        type: 'category',
        data: [],
    },
    yAxis: {}, // 이거...이 한 줄 때문에ㅠㅠ
    series: []
}