highcharts堆叠饼图

最终效果

废话不多说,直接上代码

第一步当然是引入highCharts了

import _Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d';
highcharts3d(_Highcharts);

 第二步写个div (这里宽高自己设置)

<div id="echarts4"></div>

第三步就是画图了.我的思路是先画出一个底层饼图,然后在上面加层数

            let total = '857.33'
            _Highcharts.chart('echarts4', {
                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: 60, //这个是旋转的角度
                        beta: 0
                    }
                },
                
                title: {
                    text: '单位:公顷',
                    align: 'right',
                    style: {
                        fontSize: 14
                    }
                },
                legend: {
                    enabled: false,
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 10, //饼图底部高度
                        dataLabels: {
                            enabled: false
                        },
                        size: 150,
                        showInLegend: true,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b><br/>{point.y}:             
                            {point.percentage:.1f} %',
                            distance: 20 //label显示不全调整
                        }
                    }
                },
                series: [
                    // 第一个饼图设置为100%
                    {
                        type: 'pie',
                        zIndex:1, //层级
                        data: [{
                            name: '旱地',
                            y: 900, //value值
                            h: 10, //高度
                            color: '#65c1f7'
                        }]
                    },{
                        type: 'pie',
                        zIndex:3,
                        center: ['50%','43%'], //调整他的距离,让他浮动到第一层上方
                        data: [
                            //这个数据不让他显示,所以设置颜色透明.防止鼠标移入出现遮挡下层,把h            
                       设置为0
                            {
                                y: 400,
                                dataLabels: {
                                    enabled: false
                                },
                                h: 0,
                                color: 'rgba(0,0,0,0)'
                            },
                            {
                                name: '水浇地',
                                y: 500,
                                h: 10,
                                color: '#54d5e0'
                            },
                        ]
                    },
                    {
                        type: 'pie',
                        zIndex:4,
                        center: ['50%','17%'],
                        data: [
                            {
                                y: 600,
                                dataLabels: {
                                    enabled: false
                                },
                                h: 0,
                                color: 'rgba(0,0,0,0)'
                            },
                            {
                                name: '水田',
                                y: 300,
                                h: 10,
                                color: '#f3c47a'
                            },
                        ]
                    },

                ]
            }
            );

提示: 根据容器的大小,二层图距离底层的距离需要调整