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