vue3+ts_echarts 画环形图表,data会根据时间变化

如果要让环形图表的数据随着时间的变化而动态更新，可以使用Vue3的响应式数据和定时器来实现。

首先，我们可以将图表数据绑定到Vue3组件的响应式数据上，例如：

import { defineComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'EChartsPie',
  setup() {
    const chart = ref<HTMLDivElement>();
    const chartData = ref([
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' },
      { value: 135, name: '视频广告' },
      { value: 1548, name: '搜索引擎' },
    ]);

    onMounted(() => {
      const chartInstance = echarts.init(chart.value);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{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: chartData.value,
          },
        ],
      };
      chartInstance.setOption(option);
    });

    return {
      chart,
      chartData,
    };
  },
});

接着，在组件挂载后，我们可以使用定时器每隔一段时间更新图表数据，例如：

onMounted(() => {
  const chartInstance = echarts.init(chart.value);
  const option = {
    // ...省略其他代码...
    data: chartData.value,
  };
  chartInstance.setOption(option);

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

在这个例子中，我们使用`setInterval`方法来每隔3秒更新一次图表数据，数据的值是随机生成的。由于`chartData`是Vue3的响应式数据，每次数据更新后，图表会自动重新渲染。

以上就是使用Vue3和TypeScript以及ECharts来绘制动态环形图表的基本方法，可以根据实际需要进行修改和调整。