vue3+ts 画环形图表,vue-echarts是6.5.5版本,vue3是script setup 格式

好的，让我来回答你的问题。

首先，你需要安装 `vue-echarts` 和 `echarts` 包：

npm install echarts vue-echarts

然后，你可以使用 `script setup` 格式来编写组件。下面是一个简单的环形图表组件的示例：

<template>
  <div class="chart-container">
    <v-chart :options="chartOptions" />
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue'
import * as echarts from 'echarts'
import { useChart } from 'vue-echarts'

const chartData = [
  { name: 'Series 1', value: 50 },
  { name: 'Series 2', value: 30 },
  { name: 'Series 3', value: 20 }
]

const chartOptions = {
  series: [
    {
      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
    }
  ]
}

const { proxy: chartProxy, render: chartRender } = useChart({
  echarts,
  options: chartOptions
})

export default defineComponent({
  setup() {
    // 渲染图表
    chartRender()

    return {
      chartOptions: chartProxy
    }
  }
})
</script>

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

在上面的示例中，我们使用了 `useChart` 方法来创建一个与 `echarts` 相关的图表实例，并通过 `chartRender` 方法来渲染图表。然后，我们将 `chartOptions` 对象传递给 `v-chart` 组件，并使用 `chartProxy` 来实现响应式。最后，我们通过 CSS 样式来设置图表容器的宽度和高度。

希望这个示例能够帮助你实现你的需求！