highcharts实现饼图(2)

//highcharts绘制饼状图
            var chart = null;
            $(function () {
                $('#accountReportChart').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                    },
                    title: {
                        align:'left',
                        text: '客户分类统计',
                        style:{"fontSize":"12px","color":"#22252A","fontWeight":"bold","lineHeight":"12px","fontFamily":"PingFangSC-Medium"}
                    },
                    subtitle:{
                    text:'客户分类'
                    },
                    legend: {
                       align: 'right', //水平方向位置,
                       layout:'vertical',
                       x:-20
                    },
                    tooltip: {
                    enabled:false
                    },
                credits: {  
                        enabled: false     //不显示LOGO 
                    },
                    plotOptions: {
                    series:{
                    states:{
                    hover:{
                    enabled:false,
                    }
                    }
                    },
                        pie: {
                        size:'218',
                            allowPointSelect: true,
                            animation:false,
                            slicedOffset:3,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false,
                                format: '<b>{point.name}</b>**{point.percentage:.1f} %',
                                // style: {
                                //     color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                // }
                            },
                            colors:[
                            '#5B93D3',
                            '#7CBDDF',
                            '#208BC2',
                            '#667489',
                            '#324462',
                            '#384250'
                            ],
                            showInLegend: true,
                            point: {
                                events: {
//                                    mouseOver: function(e) {  // 鼠标滑过时动态更新标题
//                                        // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
//                                        chart.setSubtitle({
//                                            text: e.target.name+ '<br>'+ e.target.y 
//                                        });
//                                    }
                                    //, 
                                     click: function(e) { // 同样的可以在点击事件里处理
//                                    console.log(e.path[3].find('highcharts-series-group'));
                                    n++;
                                    if(n=1){
                                    $('.highcharts-root').find('.highcharts-series').attr("transform","translate(10,60) scale(1 1)") 
                                    }
                                    $('.highcharts-root').find('.highcharts-series').css('transform','translate(10,45) scale(1,1)');
                                    console.log($('.highcharts-root').find('.highcharts-series').attr("transform","translate(10,60) scale(1 1)"));
                                         chart.setSubtitle({
                                             text: '<p style="font-size:18px;color:#22252A;line-height:18px;margin-bottom:18px;font-weight:bold;font-family: PingFangSC-Medium;">'+e.point.name+'</p><br><p style="font-size: 16px;color:#22252A;line-height:18px;font-weight:bold;font-family: PingFangSC-Medium;">'+e.point.y+'</p>' ,
//                                             style:
                                         });
                                     }
                                }
                            },
                        }
                    },
                    series: [{
                        type: 'pie',
                        innerSize: '65%',
                        name: '市场份额',
                        data:[
                        {name:name[0],y:value[0]},
                        {name:name[1],y:value[1]},
                        {name:name[2],y:value[2]},
                        {name:name[3],y:value[3]},
                        {name:name[4],y:value[4]},
                        {name:name[5],y:value[5]}
                        ]
                    }]
                }, function(c) {
                    // 环形图圆心
                console.log(2);
//                $('.highcharts-root').find('.highcharts-series').removeAttr("transform");
                    var centerY = c.series[0].center[1],
                        titleHeight = parseInt(c.title.styles.fontSize);
                    c.setSubtitle({
                      x:centerY-160,
                          y:centerY + titleHeight/2+50
                    });
                    chart = c;
                });

            });

若想实现效果，需要引入highcharts的js文件，以及更改option里面的data的配置，我这里是从后台获取数据的