用vue加echarts做一个饼状图

好的，下面是一个简单的示例代码：

1. 首先，安装 echarts 和 vue-echarts 模块：

npm install echarts vue-echarts

2. 在 Vue 组件中引入并使用 echarts 和 vue-echarts：

<template>
  <div>
    <ve-pie :options="pieOptions"></ve-pie>
  </div>
</template>

<script>
import VueECharts from 'vue-echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

export default {
  components: {
    've-pie': VueECharts.PieChart,
  },
  data() {
    return {
      pieOptions: {
        title: {
          text: '饼状图示例',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['数据1', '数据2', '数据3', '数据4', '数据5'],
        },
        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: '数据1' },
              { value: 310, name: '数据2' },
              { value: 234, name: '数据3' },
              { value: 135, name: '数据4' },
              { value: 1548, name: '数据5' },
            ],
          },
        ],
      },
    };
  },
};
</script>

3. 在页面中引入该组件即可：

<template>
  <div>
    <pie-chart></pie-chart>
  </div>
</template>

<script>
import PieChart from './components/PieChart.vue';

export default {
  components: {
    'pie-chart': PieChart,
  },
};
</script>

这样，就可以在页面中看到一个简单的饼状图了。如果需要更改数据或者样式，可以修改 `pieOptions` 对象中的数据。