vue3中使用echarts 饼图

在 Vue3 中使用 ECharts 制作饼图，你需要首先安装 ECharts 的 Vue 组件库，比如 `vue-echarts`。以下是创建一个基础饼图的基本步骤：

1. 安装依赖：

npm install vue-echarts @echarts/core @echarts/charts

2. 引入并注册组件：

<script setup>
import { ECharts } from 'vue-echarts';
</script>

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

3. 使用组件并配置图表：

<template>
  <ECharts :options="pieOptions" />
</template>

<script setup>
const pieOptions = {
  tooltip: {},
  legend: {
    data: ['A', 'B', 'C']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' }
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
</script>

在这个例子中，`pieOptions`是一个包含ECharts配置的对象，`data`部分定义了饼图的数据。你可以根据需要调整颜色、动画效果等。