vue3 ECharts 饼图

Vue3 和 ECharts 都是很流行的前端技术，它们可以很好地结合使用来展示饼图。下面是一个简单的例子来演示如何在 Vue3 中使用 ECharts 来绘制饼图：

首先，你需要安装 ECharts 和 Vue3 的相关依赖：

npm install echarts vue@next

然后，在你的 Vue3 组件中引入 ECharts 和相关的样式文件：

import { createApp } from 'vue';
import ECharts from 'echarts';

import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

import App from './App.vue';

const app = createApp(App);
app.config.globalProperties.$echarts = ECharts;

app.mount('#app');

接下来，在你的组件中使用 ECharts 组件来绘制饼图：

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

<script>
export default {
  mounted() {
    const chart = this.$echarts.init(document.getElementById('chart'));
    const option = {
      title: {
        text: '饼图示例'
      },
      series: [
        {
          type: 'pie',
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ]
        }
      ]
    };
    chart.setOption(option);
  }
};
</script>

上述代码中，我们在组件的 `mounted` 钩子中初始化 ECharts 实例，并通过 `chart.setOption(option)` 方法来设置饼图的数据和样式。

最后，在你的 HTML 文件中添加一个容器元素，并将你的组件挂载到该元素上：

<div id="app"></div>

这样，你就可以在 Vue3 中使用 ECharts 绘制饼图了。当然，你也可以根据自己的需求来配置更多的饼图选项，详情请参考 ECharts 的官方文档。