vue3中echarts环形统计图代码

以下是一个简单的示例代码，展示如何在Vue3中使用ECharts创建环形统计图：

template:

<template>
  <div class="echarts-container">
    <div ref="echarts" class="echarts"></div>
  </div>
</template>

script:

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const echartsRef = ref(null);

    onMounted(() => {
      const myChart = echarts.init(echartsRef.value);

      myChart.setOption({
        title: {
          text: '环形统计图',
          subtext: 'Vue3 + ECharts',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        },
        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: '搜索引擎' },
            ],
          },
        ],
      });
    });

    return {
      echartsRef,
    };
  },
};
</script>

<style>
.echarts-container {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.echarts {
  width: 80%;
  height: 80%;
}
</style>