【图表】highcharts 3D立体饼图渐变带背景 vue

 前提：echarts画3d图没有highcharts方便  （复制代码直接使用）

首先安装依赖：

npm install highcharts --save   

新建页面：index.vue

<template>
  <div class="safeEvent">
    <Pie3D :optionData="optionData" style="width:400px;height:200px" />
  </div>
</template>
<script>
import Pie3D from "@/components/Echarts/Pie3D/index.vue";
export default {
  name: "home",
  data() {
    return {
      optionData: [
        {
          name: "数据1",
          value: 30,
        },
        {
          name: "数据2",
          value: 20,
        },
        {
          name: "数据3",
          value: 30,
        },
        {
          name: "数据4",
          value: 10,
        },
        {
          name: "数据5",
          value: 10,
        },
      ],
    };
  },
  components: {
    Pie3D,
  },
};
</script>

  新建组件：Pie3D.vue

<!-- 渐变3D饼图样式-->
<template>
  <div id="" style="height: 100%">
    <div id="container" style="height: 100%"></div>
    <!-- 底座背景 -->
    <div class="bg"></div>
  </div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

let chart = null;
export default {
  name: "",
  props: {
    optionData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    optionData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.dealData();
          this.init();
        });
      },
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.init();
    window.addEventListener("resize", () => {
      //自适应
      this.init();
      chart.reflow();
    });
  },
  created() {
    this.dealData(); //处理父组件传过来的数据
  },
  methods: {
    dealData() {
      this.dataList = this.optionData.map((item) => {
        item["y"] = item["value"];
        return item;
      });
    },
    init() {
      let color1 = [
        "rgb(187, 180, 255)",
        "rgb(234, 189, 253)",
        "rgb(255, 250, 164)",
        "rgb(29, 241, 255)",
        "rgb(42, 250, 230)",
        "rgb(255, 216, 183)",
        "rgb(187, 180, 255)",
      ];
      let color2 = [
        "rgb(109, 94, 255, 1)",
        "rgb(194, 121, 225)",
        "rgb(195, 179, 57)",
        "rgb(12, 122, 210)",
        "rgb(42, 250, 230)",
        "rgb(247, 163, 92)",
        "rgb(109, 94, 255)",
      ];

      // 饼图渐变效果
      Highcharts.getOptions().colors = Highcharts.map(
        Highcharts.getOptions().colors,
        function (color, index) {
          return {
            radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
            stops: [
              [0, color2[index]],
              [0.2, color2[index]],
              [1, color1[index]], // darken
            ],
          };
        }
      );

      if (this.charts) {
        chart.destroy();
      }
      // 初始化
      chart = Highcharts.chart("container", {
        chart: {
          type: "pie",
          backgroundColor: null, //去掉背景颜色
          animation: false,
          marginTop: 10,
          options3d: {
            enabled: true,
            alpha: 60, //倾斜角度
          },
          spacingTop: 0,
          spacingLeft: 0,
          spacingRight: 0,
        },
        legend: {
          align: "center", //程度标的目标地位
          layout: "horizontal",
          verticalAlign: "top", //垂直标的目标地位
          padding: 2,
          margin: 0,
          itemStyle: {
            cursor: "pointer",
            color: "#FFFFFF",
            fontWeight: 100,
            backgroundColor: ["#ccc"],
          },
          itemHoverStyle: {
            color: "#FFFFFF",
          },
        },
        tooltip: {
          //提示框
          backgroundColor: "rgba(20,77,155,0.9000)",
          borderColor: "#34A6FF",
          color: "#fff",
          useHTML: true,
          pointFormat: '<div style="color: #fff">{point.percentage:.1f}%</div>',
          itemStyle: {
            color: "#FFFFFF",
          },
          formatter: function () {
            let s =
              '<div  style="color: #fff">' +
              this.key +
              "：" +
              this.y +
              "</div>";
            return s;
          },
        },
        title: {
          text: null,
        },
        credits: {
          enabled: false, //去掉右下角水印
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 35,
            textShadow: false,
            softConnector: false,
            dataLabels: {
              enabled: true,
              alignTo: "toPlotEdges",
              y: -14,
              // 这里是标签的引导线
              connectorShape: function (
                labelPosition,
                connectorPosition,
                options
              ) {
                var touchingSliceAt = connectorPosition.touchingSliceAt,
                  alignment = labelPosition.alignment,
                  left = 0,
                  right = 0;
                if (alignment == "left") {
                  left = labelPosition.x + this.dataLabel.bBox.width + 14;
                  right = labelPosition.x + 2;
                } else {
                  left = labelPosition.x - this.dataLabel.bBox.width - 14;
                  right = labelPosition.x - 2;
                }
                return [
                  "M",
                  left,
                  labelPosition.y,
                  "L",
                  right,
                  labelPosition.y,
                  "L",
                  touchingSliceAt.x,
                  touchingSliceAt.y,
                ];
              },
              formatter: function () {
                return this.y + "%";
              },
              distance: 20,
              style: {
                color: "#FFFFFF",
                fontSize: "12px",
                textOutline: "none",
                fontWeight: "400",
              },
            },
            states: {
              inactive: {
                opacity: 1,
                size: "100%",
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "Browser share",
            showInLegend: true, // 是否显示图例
            data: this.dataList, //传入数据
          },
        ],
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.bg {
  z-index: -1;
  width: 66%;
  height: 70%;
  margin-top: -37%;
  margin-left: 18%;
  position: relative;
  background-image: url("../../../assets/home/dizuo.png");
  background-size: 100% 100%;
}
</style>