highcharts 3d饼图

效果图

代码

<template>
    <div :id="id" style="height: 300px; width: 100%"></div>
</template>
<script>
import highcharts from "highcharts";
export default {
    props: {
        id: {
            type: String,
            required: true,
        },
        dataList: {
            type: Array,
            default: () => ([
                {
                    name: "看家云",
                    y: 10254,
                    h: 0,
                    bfb: 0
                },
                {
                    name: "云加速",
                    y: 6894,
                    h: 0,
                    bfb: 0
                },
                {
                    name: "云盘",
                    y: 7667,
                    h: 0,
                    bfb: 0
                },
                {
                    name: "邮箱",
                    y: 4287,
                    h: 0,
                    bfb: 0
                },
                {
                    name: "云盒",
                    y: 8687,
                    h: 0,
                    bfb: 0
                },
                {
                    name: "固话",
                    y: 16112,
                    h: 0,
                    bfb: 0
                },
                {
                    name: "组网",
                    y: 16112,
                    h: 0,
                    bfb: 0
                }
            ])
        }
    },
    watch: {
        dataList() {
            this.$nextTick(() => {
                this.initOption();
            });
        },
    },
    mounted() {
        // this.$nextTick(() => {
        this.initOption();
        // });
        window.addEventListener("resize", this.initOption);
    },
    destroyed() {
        window.removeEventListener("resize", this.initOption);
    },
    methods: {
        initOption() {
            let quantity = 0; // 总数
            this.dataList.forEach((item) => {
                quantity += item.y;
            });
            this.dataList.forEach((item) => {
                item.bfb = parseInt((item.y / quantity) * 100);
                item.h = item.bfb * 1.5 >= 70 ? 70 : item.bfb * 1.5
                // item.h = parseInt(0.86 * item.bfb); // 最高高度60，根据比例渲染高度
                // console.log(this.dataList, "dataList----->>>");
            });
            // 修改3d饼图绘制过程
            var each = highcharts.each,
                round = Math.round,
                cos = Math.cos,
                sin = Math.sin,
                deg2rad = Math.deg2rad;
            highcharts.wrap(
                highcharts.seriesTypes.pie.prototype,
                "translate",
                function (proceed) {
                    proceed.apply(this, [].slice.call(arguments, 1));
                    // Do not do this if the chart is not 3D
                    if (!this.chart.is3d()) {
                        return;
                    }
                    var series = this,
                        chart = series.chart,
                        options = chart.options,
                        seriesOptions = series.options,
                        depth = seriesOptions.depth || 0,
                        options3d = options.chart.options3d,
                        alpha = options3d.alpha,
                        beta = options3d.beta,
                        z = seriesOptions.stacking
                            ? (seriesOptions.stack || 0) * depth
                            : series._i * depth;
                    z += depth / 2;
                    if (seriesOptions.grouping !== false) {
                        z = 0;
                    }
                    each(series.data, function (point) {
                        var shapeArgs = point.shapeArgs,
                            angle;
                        point.shapeType = "arc3d";
                        var ran = point.options.h;
                        shapeArgs.z = z;
                        shapeArgs.depth = depth * 0.75 + ran;
                        shapeArgs.alpha = alpha;
                        shapeArgs.beta = beta;
                        shapeArgs.center = series.center;
                        shapeArgs.ran = ran;
                        angle = (shapeArgs.end + shapeArgs.start) / 2;
                        point.slicedTranslation = {
                            translateX: round(
                                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
                            ),
                            translateY: round(
                                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
                            ),
                        };
                    });
                }
            );
            (function (H) {
                H.wrap(
                    highcharts.SVGRenderer.prototype,
                    "arc3dPath",
                    function (proceed) {
                        // Run original proceed method
                        var ret = proceed.apply(this, [].slice.call(arguments, 1));
                        ret.zTop = (ret.zOut + 0.5) / 100;
                        return ret;
                    }
                );
            })(highcharts);
            highcharts.chart(this.id, {
                chart: {
                    animation: false,
                    backgroundColor: "none",
                    type: "pie", //饼图
                    margin: [0, 0, 0, 0],
                    options3d: {
                        enabled: true, //使用3d功能
                        alpha: 68, //延y轴向内的倾斜角度
                        beta: 0,
                    },
                    events: {
                        load: function () {
                            var each = highcharts.each,
                                points = this.series[0].points;
                            each(points, function (p, i) {
                                p.graphic.attr({
                                    translateY: -p.shapeArgs.ran,
                                });
                                p.graphic.side1.attr({
                                    translateY: -p.shapeArgs.ran,
                                });
                                p.graphic.side2.attr({
                                    translateY: -p.shapeArgs.ran,
                                });
                            });
                        },
                    },
                },
                legend: {
                    enabled: true, // 关闭图例
                    align: "left", //水平方向位置
                    verticalAlign: "top", //垂直方向位置
                    layout: "vertical",
                    y: 60,
                    symbolWidth: 10,
                    symbolHeight: 10,
                    itemMarginBottom: 3,
                    useHTML: true,
                    itemStyle: {
                        color: "#7B81A6",
                        fontSize: 11,
                    },
                },
                title: {
                    // enabled: false,
                    text: "",
                },
                subtitle: {
                    text: "",
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: false, // 禁用点击
                        cursor: "pointer",
                        depth: 45,
                        showInLegend: true,
                        size: "75%", // 外圈直径大小
                        innerSize: 95, // 内圈直径大小
                        center: ["50%", "50%"],
                        colors: [
                            "#123FB8",
                            "#F37245",
                            "#F4B45E",
                            "#EFC855",
                            "#92F41C",
                            "#00F2FF",
                            "#6BE4A5",
                        ],
                        dataLabels: {
                            enabled: true, //是否显示饼图的线形tip
                            distance: 15,
                            borderColor: '#007acc',
                            align: "center",
                            // verticalAlign: 'top',
                            position: "right",
                            format: "{point.name}：{point.bfb}%",
                            // formatter: (point,b) => {
                            //   console.log(point,'ponit-->>')
                            //   console.log(b,'ponit-->>')
                            // },
                            color: '#D4FEFF',
                            fontSize: 14,
                        },
                    },
                },
                credits: {
                    enabled: false, // 禁用版权信息
                },
                series: [
                    {
                        type: "pie",
                        name: "数量",
                        data: this.dataList,
                    },
                ],
            });
        },
    },
};
</script>