vue3uniapp动态传递参数给echarts

在 Vue3 中，结合 UniApp 使用 ECharts 动态传递参数，通常需要将数据和配置作为 props 从父组件传给子组件。首先，你需要确保你在父组件中已经初始化了 ECharts 实例，并且你想通过 prop 动态改变的部分，如图表的数据集或者图表配置。

下面是一个基本的例子：

<!-- 父组件 -->
<template>
  <uni-app>
    <chart :options="echartsOptions" :data="echartsData"></chart>
  </uni-app>
</template>

<script>
import Chart from '@/components/Chart.vue'; // 假设Chart.vue是包含ECharts的子组件

export default {
  components: {
    Chart,
  },
  data() {
    return {
      echartsOptions: { ... }, // 初始化的 ECharts 配置
      echartsData: [], // 初始化的数据
    };
  },
  methods: {
    updateChartData(newData) {
      this.echartsData = newData;
    },
    updateChartOption(newOptions) {
      this.echartsOptions = newOptions;
    },
  },
};
</script>

然后，在子组件 `Chart.vue` 中，接收这些 prop 并渲染图表：

<!-- 子组件 Chart.vue -->
<template>
  <div ref="chart"></div>
</template>

<script>
import ECharts from 'echarts';

export default {
  props: {
    options: Object,
    data: Array,
  },
  mounted() {
    const myChart = ECharts.init(this.$refs.chart);
    myChart.setOption(this.options);
    // 监听数据变化，动态更新图表
    this.$watch('data', (newData) => {
      if (newData) {
        myChart.setOption({ data: newData });
      }
    });
  },
};
</script>

在父组件中，当你想改变数据或选项时，可以调用相应的更新方法，例如：

this.updateChartData(someNewData);
this.updateChartOption(someNewOptions);