如何在 Vue 3 组件中使用 props 作为 Echarts 的选项数据？

Question

所以我一直在尝试使用 Echarts 制作折线图。 我制作了这个LineChart.vue并期望它从它的父组件中获取 props，它们是数组，作为 Echarts 的选项数据。

但是作为数组代理的 props 似乎不能很好地工作。 控制台显示它有正确的目标，但是这个代理不被Echarts识别，所以我的图表上没有数据。

为了让它更奇怪，我偶然发现如果我保持终端打开，对代码进行一些更改（这只是注释和取消注释相同的行），然后保存它（这可能会重新渲染这个组件），道具以某种方式起作用，折线图实际上出现了！ 但是如果我刷新页面，数据又变空白了。

这是我的代码：

<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>

这是我对代码进行一些小的更改之前和之后的代理是什么样的我还尝试使用Object.assign()将此代理xAxisData转换为对象，但结果是空的！ 我开始认为它可能与组件生命周期有关，但我不知道何时何地可以获得功能代理。 有人可以告诉我实际发生了什么吗？

仅供参考，这里是控制台中 props 的值和 vue devtool 中 props 的值。

Answer 1

刚刚想通了。 只是让你知道，上面提供的信息是不够的，我做了一个菜鸟举动。

我的 vue 组件很好，是异步请求导致了这个问题。 我的 Echarts props 的数据是通过 Axios 请求重新获取的，并且我的子组件（折线图）在我获得数据之前就已经渲染好了。 不知何故，数组的代理没有数据，但他们得到了正确显示的目标。 当我的子组件获得正确的数据时，Echart 已经用过时的选项数据呈现，顺便说一下，这些数据是空的。 这就是为什么重新渲染它可以向我们显示数据。 它与代理无关，代理工作得很好。 是我更需要关注 aysnc 运动。 此外，我了解到 Echarts 显然根本没有反应性，所以我watch了道具并更新了这样的选项：

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

有用。