highcharts向下钻取饼图

highcharts官方的源码

https://jshare.com.cn/demos/hhhhDu

只想说非常麻烦，我研究了1天多也没搞出来，后来同事建议我试试这个

https://blog.csdn.net/zhouzuoluo/article/details/99717160

这个就简单多了，而且效果一样，但我用这个有两个问题，就是柱状图改饼图；

其实改起来很简单，先画一个饼图，然后在饼图的属性里面加上drilldown属性值就可以了，不论柱状图还是饼图，想实现向下钻取，就加drilldown属性就可以了。

我的是vue项目附上代码

以下是html代码，template部分
<highcharts :options="codePerTeam"></highcharts>
下面是script的导入包
import Highcharts from 'highcharts'
import 'highcharts/highcharts-more'
下面是script的data部分
codePerTeam: {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '代码提交量/团队维度'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        name: 'Teams',
                        colorByPoint: true,
                        data: [{
                            name: '王华',
                            y: 35,
                            sliced: true,
                            selected: true,
                            drilldown: '王华'
                        }, {
                            name: '陈晓敏',
                            y: 30
                        }, {
                            name: '吴潇晓',
                            y: 10,
                            drilldown: '吴潇晓'
                        }, {
                            name: '杰',
                            y: 15
                        }, {
                            name: '帅',
                            y: 10
                        }]
                    }],
                    drilldown: {
                        series: [{
                            id: '吴潇晓',
                            data: [
                                {name: '陈陈', id: 'cat', y: 40},
                                {name: '徐徐徐', id: 'dog', y: 20},
                                {name: '张张', y: 10, id: 'cow'},
                                {name: '安安', y: 20, id: 'sheep'},
                                {name: '刘刘刘', y: 10, id: 'pig'}
                            ]
                        }, {
                            id: '王华',
                            data: [{
                                name: '宋樑',
                                y: 80
                            }, {
                                name: '史宇',
                                y: 20
                            }]
                        }]
                    }

                }

main.js要导入的包

import HighchartsDrilldown from 'highcharts/modules/drilldown';

HighchartsDrilldown(Highcharts)

标签：name,data,highcharts,drilldown,向下,true,id,钻取
来源： https://blog.csdn.net/giiiig/article/details/117534631