(vue) 현재 페이지에 차트 캡슐화 구성 요소가 소개되고 데이터가 업데이트되지만 차트 구성 요소가 동기식으로 새로 고쳐지지 않습니다.

(vue) 현재 페이지에 차트 캡슐화 구성 요소가 소개되고 데이터가 업데이트되지만 차트 구성 요소가 동기식으로 새로 고쳐지지 않습니다.

---

솔루션:

1. 차트 컴포넌트 페이지에서 차트 데이터를 모니터링하고, 새로운 값이 발생한 후 차트 렌더링 방법을 조정합니다.

---

꺾은선형 차트 구성 요소 페이지:

props: {
    
     lineData },//父页面传的折线图数据
watch: {
    
    
  lineData: {
    
    
    deep: true,
    immediate: true,
    handler(newVal, oldVal) {
    
    
      this.lineData = newVal;
      this.initChart();
    },
  },
},
methods: {
    
    
	// 折线图渲染
    initChart() {
    
    
    	...
	}
}

상위 구성요소:

<line-chart
  height="100%"
  width="100%"
  :line-data="echartsData" //折线图数据
  :line-color="lineColor"  //折线颜色
  y-name="y轴名称"
  x-name="x轴名称"
/>