How can I use props as option data of Echarts in a Vue 3 component?

Question

So I have been trying to make a linechart work with Echarts. I made this LineChart.vue and expect it to get props, which are arrays, from its father component as options data of Echarts.

But the props, which are proxies of arrays, doesn't seem to work well. It is shown in the console that it has the right target, but this proxy is not recognized by Echarts, so there was no data on my chart.

And to make it wierder to me, I accidently found out that if I keep my terminal open, make some changes to the code (which is nothing but comment and uncomment the same lines), and save it (which probably rerends this component), the props somehow works and the linechart actually shows up! But if I refresh the page, the data goes blank again.

Here is my code:

<template>
  <div id="chart"></div>
</template>

<script>
let chart;
export default {
  data() {
    return {
      option: {
        name: "demo",
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          // type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
          },
        ],
      },
    };
  },
  props: {
    xAxisData: Array,
    seriesData: Array,
  },
  methods: {
    initChart() {
      chart = this.$echarts.init(document.getElementById("chart"));
      
      // these are the four lines that I commented and uncommented to make things wierd
      this.option.xAxis.data = this.xAxisData;
      this.option.series[0].data = this.seriesData;
      console.log(this.option.xAxis.data);
      console.log(this.option.series[0].data);

      chart.setOption(this.option);
    },
  },
  mounted() {
    this.initChart();
  },
  watch: {
    xAxisData: {
      handler: function (newData) {
        this.option.xAxis.data = newData;
      },
      deep: true,
    },
    seriesData: {
      handler: function (newData) {
        this.option.series[0].data = newData;
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
#chart {
  height: 250px;
  width: 400px;
}
</style>

And here is what is the proxy like before and after I made some minor changes to the code I also tried to turn this proxy xAxisData into an object using Object.assign() , but it turns out to be empty! I am starting to think that it might have somthing to do with component life cycle, but I have no clue when and where I can get a functional proxy. Can someone tell me what is actually going on?

FYI, here are value of props in console and value of props in vue devtool .

Answer 1

Just figured it out. Just so you know, the info provided above was insufficient, and I made a noob move.

My vue component was fine, it was async request that caused this problem. The data for my Echarts props is requseted through a Axios request, and my child-component (the linechart) was rendered before I got the data. Some how, the proxies of the arrays donot have the data, yet they got the target shown right. By the time my child-component got the right data, the Echart was already rendered with outdated options data, which by the way was empty. And that is why re-render it can show us the data. It has nothing to do with proxy, proxy works just fine. It is me that needs to pay more attention to aysnc movement. Also, I learned that obviously Echarts was not reactive at all, so I watch ed the props and updated the option like this:

watch :{
  xAxisData: {
      handler: function (newData) {
        this.option.xAxis.data = newData;
        this.chart.clear();
        this.chart.setOption(this.option);
      },
      deep: true,
    },
}

It works.