highcharts实现饼图的代码教程

highcharts实现饼图的代码教程

//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的配置，我这里是从后台获取数据的