highcharts嵌套双环图双饼图

官方演示里都是有父级关系的的旭日图/双饼,想要个单纯比较关系,但是没有父级的嵌套双环图

先上图

 

highcharts嵌套双环图双饼图

HTML:
1.想要两层的圆环图都显示dataLabel,需要宽度为500px,500px宽于全部型号手机,缩放0.75倍
2.在手机页面显示左右溢出,增加弹性父级嵌套,父级居中显示,并且overflow: hidden,水平居中get
<div class="container1-box">
    <div id="container1"
         style="min-width: 500px; height: 300px; transform: scale(0.75);"></div>
</div>

css:

.container1-box {
    display: flex;
    width: 100%;
    overflow: hidden;
    justify-content: center;
}

js:

//双圆环图
var chart2 = new Highcharts.chart('container1', {
    chart: {
        type: 'pie',
        spacingBottom: 0,
        spacingTop: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    title: {
        text: null
    },
    credits: {
        enabled: false  // 禁用版权信息
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        }
    },
    series: [{
        name: '伴侣得分',
        data: [{
            name: 'a',
            y: 20,
            color: '#32A6A3'
        }, {
            name: 'b',
            y: 40,
            color: '#ED93B5'
        }, {
            name: 'c',
            y: 40,
            color: '#FC983B'
        }],
        size: '70%',
        innerSize: '50%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name + ':</b> ' +
                    this.y : null;
            },
            color: '#ffffff',
            distance: -35
        }
    }, {
        name: '本人得分',
        data: [{
            name: 'a',
            y: 50,
            color: '#32A6A3'
        }, {
            name: 'b',
            y: 20,
            color: '#ED93B5'
        }, {
            name: 'c',
            y: 30,
            color: '#FC983B'
        }],
        size: '100%',
        innerSize: '70%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' +
                    this.y : null;
            },
            color: '#ffffff',
            distance: -25
        },
        id: 'versions'
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 400
            },
            chartOptions: {
                series: [{
                    id: 'versions',
                    dataLabels: {
                        enabled: false
                    }
                }]
            }
        }]
    }
});