如何使用Highcharts创建渐进式饼图

• 基础选型：渐进式饼图本质是定制化的pie类型图表，如果你需要环形递进效果，设置plotOptions.pie.innerSize参数即可调整内环大小做成环形饼图，普通递进效果直接用基础饼图即可。
• 渐进色配置：按数据顺序在colors配置项中设置同色系由浅到深/由深到浅的色值，即可实现分段渐进的视觉效果；也可以给单个数据点单独配置渐变填充，示例配置如下：

// 单个数据点线性渐变配置
color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#2a93d5'],
        [1, '#1a5680']
    ]
}

• 扇区偏移递进效果：如果需要扇区按进度分层突出，给对应数据点设置sliced: true，同时调整plotOptions.pie.slicedOffset参数控制偏移距离，按进度值大小设置不同偏移量就能做出阶梯递进的效果。
• 标签适配：在plotOptions.pie.dataLabels中自定义格式化函数，可自定义输出百分比、数值、自定义标签文本，还可以通过distance参数调整标签和扇区的距离，适配偏移后的扇区布局。
• 渐进动画实现：如果需要逐段加载的动画效果，可以调整plotOptions.pie.animation参数控制动画时长和缓动效果，也可以调用setData方法按顺序分批加载数据，实现逐段出现的渐进动画。
• 层级递进交互：如果需要点击扇区展开下一层级数据，引入Highcharts官方的drilldown模块，给每个扇区绑定下钻数据即可实现层级递进的交互效果。

核心配置示例参考：

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: '渐进式饼图示例'
    },
    plotOptions: {
        pie: {
            innerSize: '60%', // 不需要环形效果可删除该行
            slicedOffset: 15,
            dataLabels: {
                enabled: true,
                format: '{point.name}: {point.y}%'
            }
        }
    },
    // 同色系渐进色组
    colors: ['#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5'],
    series: [{
        name: '占比',
        data: [
            { name: '第一阶段', y: 10 },
            { name: '第二阶段', y: 12, sliced: true },
            { name: '第三阶段', y: 15, sliced: true },
            { name: '第四阶段', y: 18, sliced: true },
            { name: '第五阶段', y: 25, sliced: true },
            { name: '第六阶段', y: 20, sliced: true }
        ]
    }]
})

内容的提问来源于stack exchange，提问作者bikram s.