vue使用Highcharts实现不同高度的3D环形图

Zada ·

更新时间:2024-11-14

· 471 次阅读

本文实例为大家分享了Highcharts实现不同高度的3D环形图的具体代码，供大家参考，具体内容如下

要实现的效果：

完整代码如下：

// 修改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));
// 生成不同高度的3d饼图
Highcharts.chart('container', {
    chart: {
        type: 'pie',
        animation: false,
        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
                    });
                });
            }
        },
        options3d: {
            enabled: true,
            alpha: 75,
        }
    },
    title: {
        text: 'XXXXXXXXXXX'
    },
    subtitle: {
        text: 'Highcharts 中的3D圆环图'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            innerSize: 180,
            dataLabels: {
                enabled: false
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [{
            'name': 'Firefox',
            y: 30.0,
            h: 50
        }, {
            name: 'IE',
            y: 26.8,
            h: 15
        }, {
            name: 'Chrome',
            y: 12.8,
            h: 20
        }, {
            'name': 'Safari',
            y: 8.5,
            h: 2
        }, {
            'name': 'Opera',
            y: 6.2,
            h: 15
        }, {
            'name': 'Others',
            y: 0.7,
            h: 30
        }]
    }]
});

<div id="container" style="height: 400px"></div>

VUE 3d Highcharts

1024 个赞