const chartData = reactive({ yourInitialData });这里帮我详细举例一下

`const chartData = reactive({ yourInitialData })` 这行代码是在Vue3的Composition API中使用`reactive`函数创建了一个响应式的对象。`yourInitialData`是你初始化时想要给图表的数据。`reactive`的作用是使得其包裹的对象以及它的所有属性都是响应式的，意味着当这些属性的值发生变化时，Vue会自动更新视图。

举个例子：

// 定义初始的图表数据
const initialChartData = {
  title: '我的折线图',
  xAxisData: ['A', 'B', 'C', 'D'],
  yAxisData: [10, 20, 30, 40],
  series: [
    { name: 'Series 1', type: 'line', data: [5, 20, 35, 40] },
    { name: 'Series 2', type: 'line', data: [2, 8, 12, 16] }
  ]
};

// 将初始数据转换成响应式
const chartData = reactive(initialChartData);

// 现在，如果你修改了chartData的某个属性，比如：
chartData.series[0].data.push(50); // 增加新的数据点

// Vue会立即检测到这一变化，并更新对应的ECharts图表。例如在模板中：
<template>
  <div :style="{ height: '400px' }">
    <echarts :options="chartData" />
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import echarts from 'echarts';

onMounted(() => {
  // 创建ECharts实例...
});
</script>

在这个例子中，当你添加新数据点后，图表会实时反映出更新后的数据。如果图表已经在页面上渲染，那么只需要更新`chartData`即可，无需手动刷新图表。