时间戳

首页 > 解决方案 > 如何在 Vue 3 组件中使用 props 作为 Echarts 的选项数据？

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

问题描述

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

但是作为数组代理的道具似乎效果不佳。在控制台显示它有正确的目标，但是这个代理没有被 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>

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

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

标签： javascriptvue.jsecharts

解决方案

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

我的 vue 组件很好，是异步请求导致了这个问题。我的 Echarts 道具的数据是通过 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,
    },
}

有用。

推荐阅读