Vue가 여러 호출을 위해 echarts 구성 요소를 캡슐화할 때 ID 중복 문제를 해결합니다.

문제 설명:

캡슐화된 echarts 구성 요소가 여러 번 호출되고 ID가 반복되어 페이지가 렌더링되지 않음, 데이터 덮어쓰기 등 일련의 문제가 발생합니다.

해결책:

1. ID를 동적 매개변수 전달로 변경합니다. (코드는 여기에 표시되지 않습니다.)

2. ID를 ref로 변경

//修改前 
<div id="vcharts" style="width: 100%; height: 500px"></div>
//修改后
<div ref="vcharts" style="width: 100%; height: 500px"></div>



//修改前
let myChart = this.$echarts.init(document.getElementById("vcharts"));
//修改后
let myChart = this.$echarts.init(this.$refs.vcharts);