highcharts制作3D饼图渐变效果

代码如下:

let color1 = [

        "rgb(161, 194, 255)",

        "rgb(250, 214, 9)",

        "rgb(255, 109, 12)",

      ];

      let color2 = [

        "rgb(93, 159, 219)",

        "rgb(255, 229, 120)",

        "rgb(255, 190, 154)",

      ];

      // 创建渐变色

      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]],

              [1, color1[index]],

            ],

          };

        }

      );

      if (this.charts) {

        chart.destroy();

      }



      let that = this;

      highcharts.chart("bottom-echarts", {

        // colors: ["#5D9FDB", "#FFBE9A", "#FFE578"],

        chart: {

          type: "pie",

          backgroundColor: null,

          options3d: {

            enabled: true,

            alpha: this.getFontSize(30),

            beta: 0,

          },

        },

        title: {

          text: null,

        },

        // tooltip: {

        //   // pointFormat:'{series.name}: <b>{point.percentage:.1f}</b>',

        // },

        tooltip: {

          enabled: true,

          // shared: true, //是否共享提示，也就是X一样的所有点都显示出来

          useHTML: true, //是否使用HTML编辑提示信息

          // headerFormat: '<small>{point.key}</small><table>',

          backgroundColor: "rgba(0,0,0,0.6)",

          borderWidth: 0,

          style: {

            // 文字内容相关样式

            color: "white",

            textAlign: "center",

          },

          formatter: function (series) {

            console.log(this);

            console.log(series);

            let res = `<div style="text-align:center;padding:5px;font-size:${that.getFontSize(14)}px;">

            <span>荣誉数量</span>

            <div style="margin-top:5px;">${this.key}:&nbsp; ${(this.percentage).toFixed(1)}%</div>

            </div>`;

            return res;

          },

        },

        credits: {

          //text: 'Example.com',

          //href: 'http://www.example.com',

          enabled: false,

        },

        plotOptions: {

          pie: {

            allowPointSelect: true,

            cursor: "pointer",

            depth: this.getFontSize(50),

            // format: "{series.name}: <b>{point.percentage:.1f}%</b>",

          },

        },



        series: [

          {

            type: "pie",

            name: "荣誉数量占比",

            data: [

              ["2021年15项", 45.8],

              ["2022年30项", 26.0],

              ["2023年55项", 22.8],

            ],

            lable: {

              show: true,

            },

            dataLabels: {

              enabled: true,

              connectorShape: "crookedLine",

              crookDistance: "50%",

              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,

                ];

              },

              //旁边提示的label

              formatter: function () {

                // console.log(this.point);

                // console.log(123);

                if (this.point.name) {

                  return `<span style="color:#AAD3FF;backgroung:transparent;font-size:${that.getFontSize(14)};font-weight:300">${this.point.name}</span>`;

                }

              },

              style: {

                textOutline: "none",

              },

            },

           

          },

        ],

      });