echarts가 두 번째로 렌더링되지 않는 문제 해결

질문:

전자 차트는 처음으로 렌더링될 수 있지만 다른 페이지를 클릭한 후에는 렌더링되지 않습니다. dom 속성을 확인해보니 특수 속성인 _echarts_instance_가 발견되었습니다. 해당 값은 id입니다. 이는 다시 렌더링할 때 id가 변경되지 않았기 때문일 수 있으므로 ehcarts에서는 다시 렌더링할 필요가 없다고 생각합니다.

분석하다:

echarts 렌더링 로직: 인스턴스화되지 않은 경우 인스턴스화되며, 이 기간 동안 현재 echarts의 ID인 div 컨테이너에 _echarts_instance_ 속성이 생성된 후 후속 렌더링 작업이 수행됩니다. 인스턴스화 echarts 차트를 새로 고치면 echarts는 먼저 div 컨테이너의 _echarts_instance_ 속성 값이 인스턴스 객체와 동일한지 일치하는지 확인하고, 동일하면 원래 구조에 렌더링하지만 원래 구조가 파괴되면 테이블 콘텐츠를 다시 렌더링할 수 없습니다.

해결책:

let vcharts = document.getElementById("vcharts");

//解决echarts 二次渲染时不显示的问题
vcharts.removeAttribute('_echarts_instance_');

const myChart = echarts.init(vcharts);