(vue) The current page introduces the chart encapsulation component, the data is updated, but the chart component is not refreshed synchronously

(vue) The current page introduces the chart encapsulation component, the data is updated, but the chart component is not refreshed synchronously

---

Solutions:

1. Monitor the chart data on the chart component page, and adjust the chart rendering method after there is a new value

---

Line chart component page:

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

parent component:

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