vue3+ts_echarts 画环形图表,data会根据时间变化,script不使用函数格式

好的，针对你的问题，可以提供以下代码示例：

<template>
  <div>
    <div ref="chart" style="width: 400px; height: 400px;"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  setup() {
    const chartInstance = ref<any>(null);

    onMounted(() => {
      chartInstance.value = echarts.init($refs.chart);

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      };

      chartInstance.value.setOption(option);

      setInterval(() => {
        const newData = [
          { value: Math.random() * 1000, name: '直接访问' },
          { value: Math.random() * 1000, name: '邮件营销' },
          { value: Math.random() * 1000, name: '联盟广告' },
          { value: Math.random() * 1000, name: '视频广告' },
          { value: Math.random() * 1000, name: '搜索引擎' }
        ];

        chartInstance.value.setOption({
          series: [
            {
              data: newData
            }
          ]
        });
      }, 1000);
    });

    return {
      chartInstance
    };
  }
});
</script>

在这个示例中，我们使用了 Vue 3 的 composition API，通过 `defineComponent` 定义了一个组件。组件中使用了 `ref` 来获取图表实例，并在 `onMounted` 钩子函数中初始化 echarts 实例，并将其挂载到 div 元素上。

然后我们定义了一个初始的 option，使用 `setOption` 方法将其应用到图表上。接着使用 `setInterval` 函数模拟数据的变化，并使用 `setOption` 将新数据应用到图表中。

需要注意的是，由于 TS 的类型检查，我们需要将 chartInstance 的类型定义为 `any`，否则会报类型错误。另外，由于我们不使用函数格式，所以代码中没有使用 Vue 3 的 `reactive` 和 `watch` 等响应式 API。