vue3+ts_echarts 画环形图表

要使用Vue3和TypeScript以及ECharts来绘制环形图表，首先需要安装ECharts和Vue3的相关依赖，可以使用以下命令进行安装：

npm install echarts vue@next @vue/runtime-core @vue/compiler-sfc vue-loader@next vue-template-compiler --save

接着，我们在Vue3组件中引入ECharts并进行初始化，代码如下：

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

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

export default defineComponent({
  name: 'EChartsPie',
  setup() {
    const chart = ref<HTMLDivElement>();

    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: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ],
          },
        ],
      };
      chartInstance.setOption(option);
    });

    return {
      chart,
    };
  },
});
</script>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>

在这个例子中，我们使用了`defineComponent`来定义一个Vue3组件，并使用`ref`来引用DOM元素，`onMounted`来在组件挂载后初始化ECharts并绘制图表。同时，我们还定义了一个`option`对象来配置ECharts图表的相关参数，最终使用`setOption`方法将图表绘制出来。

注意，在TypeScript中使用ECharts需要额外安装`@types/echarts`类型声明文件，可以使用以下命令进行安装：

npm install @types/echarts --save-dev

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