hightChart 制作3d饼图

<template>
  <div class="x-bar">
    <div :id="id" :option="option"></div>
  </div>
</template>
<script>
import HighCharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
export default {
  // 验证类型
  props: {
    id: {
      type: String,
    },
    option: {
      type: Object,
    },
  },
  data() {
    return {
      Hchart: null,
    };
  },
  mounted() {
    highcharts3d(HighCharts);
    this.Hchart = HighCharts.chart(this.id, this.option);
  },
};
</script>

配置项

let option = {
  chart: {
    type: "pie", //饼图
    options3d: {
      enabled: true, //使用3d功能
      alpha: 65, //延y轴向内的倾斜角度
      beta: 0,
    },
    backgroundColor: "rgba(0, 0, 0, 0)", // 不显示背景色
    width: 216,
    height: 216, //设置大小是为了饼图能在想要的区域中显示
  },
  title: {
    text: "", //图表的标题文字
  },
  subtitle: {
    text: "", //副标题文字
  },
  plotOptions: {
    pie: {
      allowPointSelect: true, //每个扇块能否选中
      cursor: "pointer", //鼠标指针
      innerSize: 60,
      depth: 30, //饼图的厚度
      dataLabels: {
        enabled: false, //是否显示饼图的线形tip
        distance: 20, //设置引导线的长度
        color: "#999", //全局设置字体颜色
        style: {
          textOutline: "none", //去掉文字白边
          fontSize: "12",
        },
        formatter: function () {
          return this.point.name + this.y + "%";
        },
      },
    },
  },
  credits: {
    enabled: false, //禁用版权url    此处不设置
  },
  series: [
    {
      type: "pie",
      name: "", //统一的前置词,非必须
      data: [
        {
          name: "生活服务",
          y: 23,
          color: "#ffd15c",
        },
        {
          name: "美食美味",
          y: 20,
          color: "#5276f2",
        },
        {
          name: "旅游出行",
          y: 10,
          color: "#8ed5fb",
        },
        {
          name: "生活百货",
          y: 25,
          color: "#20e6a4",
        },
        {
          name: "银行业务",
          y: 10,
          color: "#f24539",
        },
        {
          name: "医疗健康",
          y: 25,
          color: "#f7e285ff",
        },
        {
          name: "休闲娱乐",
          y: 20,
          color: "#c19259ff",
        },
        {
          name: "教育培训",
          y: 21,
          color: "#ea8414ff",
        },
        {
          name: "其他",
          y: 16,
          color: "#ffffff",
        },
      ],
    },
  ],
};
export default option;

使用

<pie3D :id="id" :option="option" ref="charts"></pie3D>
<!-- 图例-->
<div class="Table_value">
	<p
		v-for="(item, index) in dataList"
		:key="index"
		@click="legendItemClick(index)"
	>
		{{ item.name }}: <span>{{ item.y }}个</span>
	</p>
</div>

import pie3D from "@/components/echarts/hightChart3d.vue";
import options from "@/components/echarts/hightChart";
  dataList: [
        {
          name: "生活服务",
          y: 23,
          color: "#ffd15c",
        },
        {
          name: "美食美味",
          y: 20,
          color: "#5276f2",
        },
        {
          name: "旅游出行",
          y: 10,
          color: "#8ed5fb",
        },
        {
          name: "生活百货",
          y: 25,
          color: "#20e6a4",
        },
        {
          name: "银行业务",
          y: 10,
          color: "#f24539",
        },
        {
          name: "医疗健康",
          y: 25,
          color: "#f7e285ff",
        },
        {
          name: "休闲娱乐",
          y: 20,
          color: "#c19259ff",
        },
        {
          name: "教育培训",
          y: 21,
          color: "#ea8414ff",
        },
        {
          name: "其他",
          y: 16,
          color: "#ffffff",
        },
      ],
      id: "hightChart1",
      option: options,
      // 图例点击事件
 legendItemClick(index) {
      if (this.$refs.charts.Hchart.series[0].data[index].visible == true) {
        this.$refs.charts.Hchart.series[0].data[index].setVisible(false);
      } else {
        this.$refs.charts.Hchart.series[0].data[index].setVisible(true);
      }
    },

  .Table_value {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          overflow: auto;
          height: 105%;
          > p {
            font-family: "DIN Alternate";
            font-weight: 400;
            font-size: 12px;
            color: rgba(255, 255, 255, 1);
            font-weight: 700;
            &:before {
              content: "";
              display: inline-block;
              width: 8px;
              height: 8px;
              margin-right: 8px;
            }
            &:nth-child(1) {
              &:before {
                background: #ffd15c;
              }
            }
            &:nth-child(2) {
              &:before {
                background: #5276f2;
              }
            }
            &:nth-child(3) {
              &:before {
                background: #8ed5fb;
              }
            }
            &:nth-child(4) {
              &:before {
                background: #20e6a4;
              }
            }
            &:nth-child(5) {
              &:before {
                background: #f24539;
              }
            }
            &:nth-child(6) {
              &:before {
                background: #f7e285ff;
              }
            }
            &:nth-child(7) {
              &:before {
                background: #c19259ff;
              }
            }
            &:nth-child(8) {
              &:before {
                background: #ea8414ff;
              }
            }
            &:nth-child(9) {
              &:before {
                background: #ffffff;
              }
            }
            span {
              flex: 1;
              display: inline-block;
              word-wrap: break-all;
              white-space: wrap;
            }
          }
        }