vue3 echart 父子

在Vue3中，可以使用props和$emit来实现父子组件之间的通信。下面是一个简单的示例：

父组件：

<template>
  <div>
    <child-component :data="chartData" @update-data="updateChartData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      chartData: []
    };
  },
  methods: {
    updateChartData(newData) {
      this.chartData = newData;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  methods: {
    updateData() {
      // 更新数据
      const newData = [10, 20, 30, 40, 50];
      this.$emit('update-data', newData);
    }
  }
};
</script>

在上面的示例中，父组件通过props将chartData传递给子组件，并在子组件中监听点击事件，当点击按钮时，子组件通过$emit触发update-data事件，并将新的数据传递给父组件。父组件通过监听update-data事件来更新chartData的值。