在vue3中，使用echarts时，如何使用watch监听option变化

在Vue 3 中，当你需要监听 ECharts 的 `option` 变化并作出响应时，可以利用 Vue 的 `watch` 属性来实现。ECharts 的 `setOption` 方法会改变数据绑定的选项，因此你可以设置一个 watch 来监视这个变化。

下面是一个简单的例子：

<template>
  <div ref="chart"></div>
</template>

<script setup lang="ts">
import { onMounted, Ref } from 'vue';
import * as echarts from '@echarts/core';

const chartRef = ref(null);
let option = {
  // 初始化的图表配置
};

onMounted(() => {
  const chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption(option); // 设置初始选项

  // 使用 watch 监听 option 变化
  watch(
    () => option,
    (newOption) => {
      if (chartInstance) {
        chartInstance.setOption(newOption); // 当 option 更新时，更新图表
      }
    },
    { deep: true } // 如果 option 有嵌套的对象或数组，需要开启深度监听
  );
});
</script>

在这个示例中，`watch` 函数接收一个函数作为回调，该函数会在 `option` 变化的任何时候被调用。`deep` 参数设为 `true` 表示对嵌套结构的变化也敏感。