使用Highcharts库的饼图

要在Vue项目中使用Highcharts 3D饼图，首先确保已在`main.js`文件中正确导入了所需的模块[^1]：

// main.js
import highcharts from 'highcharts';
import highcharts3d from 'highcharts/highcharts-3d';

highcharts3d(highcharts); // 注册Highcharts 3D支持

然后在HTML模板中（例如在一个`chart.vue`组件），你可以创建一个3D饼图[^2]，例如：

<template>
  <div id="chart-container">
    <div :id="'chart-' + uniqueId"></div> <!-- 增加唯一ID以避免冲突 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      uniqueId: Date.now(), // 用于动态分配图表ID
      chartData: [
        { name: 'A', y: 30 },
        { name: 'B', y: 15 },
        { name: 'C', y: 45 },
        { name: 'D', y: 10 }
      ]
    };
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const chartOptions = {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 15
          }
        },
        series: [{
          data: this.chartData,
          showInLegend: false,
          animation: {
            duration: 1000
          }
        }]
      };

      const chartElement = document.getElementById(`chart-${this.uniqueId}`);
      const chart = new Highcharts.Chart(chartElement, chartOptions);
    }
  }
};
</script>

这将创建一个带3D效果的饼图，每个部分的数据存储在`chartData`数组中。