highcharts实现饼图-附图 option配置-可点击伸缩变化
var chart = null;
$(function () {
$('#accountReportChart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: '客户分类统计',
align:'left',
style:{"color":"#22252A","fontFamilyr":"PingFangSC-Medium","fontSize":"12","fontWeight":"600"}
},
legend: {
align: 'right', //水平方向位置,
// verticalAlign:'middle',
layout:'vertical',
// x:-50,
// y:30,
itemStyle:
{ "color": "#868BA1", "cursor": "pointer", "fontSize": "12px", "fontFamily": "PingFangSC-Medium","lineHeight":"12px","letterSpacing": "0px" },
// "fontFamily": "PingFangSC-Medium","fontSize:"12px","color": "#868BA1",,"letterSpacing": "0px","lineHeight": "12px"
itemMarginBottom: 9,
symbolPadding:8,
symbolRadius:0,
symbolWidth:10,
symbolHeight:10,
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
tooltip: {
enabled:false
},
credits: {
enabled: false //不显示LOGO
},
plotOptions: {
series:{
states:{
hover:{
enabled:false,
}
}
},
pie: {
size:'218',
allowPointSelect: true,
animation:false,
slicedOffset:5,
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
var t=e.target.options.name;
var b=e.target.options.y;
$('#addText').find('.top').html(t)
$('#addText').find('.bottom').html(b)
}
//,
// click: function(e) { // 同样的可以在点击事件里处理
// chart.setTitle({
// text: e.point.name+ '\t'+ e.point.y + ' %'
// });
// }
}
},
}
},
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],
sliced: true,
selected: true,
click:function(e){
console.log(e);
var t=e.target.options.name;
var b=e.target.options.y
},
},
{name:name[3],y:value[3]},
{name:name[4],y:value[4]},
{name:name[5],y:value[5]}
]
}]
},
function(chart) { // on complete
var arr=chart.options.series[0].data;
for(var i=0;i<arr.length;i++){
if(arr[i].sliced==true){
var t=arr[i].name;
var b=arr[i].y;
}
}
var textX = chart.plotLeft + (chart.series[0].center[0]);
var textY = chart.plotTop + (chart.series[0].center[1]);
var span = '<span id="pieChartInfoText" style="display: inline-block;position:absolute;font-family: PingFangSC-Medium;color: #22252A;letter-spacing: 0; text-align:center;font-weight:600;">';
span += '<span class="top" style="display: inline-block;width: 151px;font-size: 18px;line-height: 18px;">'+t+'</span><br>';
span += '<span class="bottom" style="font-size: 16px;line-height: 12px;">'+b+'</span>';
span += '</span>';
$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5)+10);
span.css('top', textY + (span.height() * -0.5));
}
);
$("#accountReportChart").resize(function(){
var w= $("#accountReportChart").width();
var h= $("#accountReportChart").height();
console.log(w,h);
$("#accountReportChart").highcharts().setSize(w,h,false);
})
$(function () {
$('#accountReportChart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: '客户分类统计',
align:'left',
style:{"color":"#22252A","fontFamilyr":"PingFangSC-Medium","fontSize":"12","fontWeight":"600"}
},
legend: {
align: 'right', //水平方向位置,
// verticalAlign:'middle',
layout:'vertical',
// x:-50,
// y:30,
itemStyle:
{ "color": "#868BA1", "cursor": "pointer", "fontSize": "12px", "fontFamily": "PingFangSC-Medium","lineHeight":"12px","letterSpacing": "0px" },
// "fontFamily": "PingFangSC-Medium","fontSize:"12px","color": "#868BA1",,"letterSpacing": "0px","lineHeight": "12px"
itemMarginBottom: 9,
symbolPadding:8,
symbolRadius:0,
symbolWidth:10,
symbolHeight:10,
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
tooltip: {
enabled:false
},
credits: {
enabled: false //不显示LOGO
},
plotOptions: {
series:{
states:{
hover:{
enabled:false,
}
}
},
pie: {
size:'218',
allowPointSelect: true,
animation:false,
slicedOffset:5,
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
var t=e.target.options.name;
var b=e.target.options.y;
$('#addText').find('.top').html(t)
$('#addText').find('.bottom').html(b)
}
//,
// click: function(e) { // 同样的可以在点击事件里处理
// chart.setTitle({
// text: e.point.name+ '\t'+ e.point.y + ' %'
// });
// }
}
},
}
},
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],
sliced: true,
selected: true,
click:function(e){
console.log(e);
var t=e.target.options.name;
var b=e.target.options.y
},
},
{name:name[3],y:value[3]},
{name:name[4],y:value[4]},
{name:name[5],y:value[5]}
]
}]
},
function(chart) { // on complete
var arr=chart.options.series[0].data;
for(var i=0;i<arr.length;i++){
if(arr[i].sliced==true){
var t=arr[i].name;
var b=arr[i].y;
}
}
var textX = chart.plotLeft + (chart.series[0].center[0]);
var textY = chart.plotTop + (chart.series[0].center[1]);
var span = '<span id="pieChartInfoText" style="display: inline-block;position:absolute;font-family: PingFangSC-Medium;color: #22252A;letter-spacing: 0; text-align:center;font-weight:600;">';
span += '<span class="top" style="display: inline-block;width: 151px;font-size: 18px;line-height: 18px;">'+t+'</span><br>';
span += '<span class="bottom" style="font-size: 16px;line-height: 12px;">'+b+'</span>';
span += '</span>';
$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5)+10);
span.css('top', textY + (span.height() * -0.5));
}
);
$("#accountReportChart").resize(function(){
var w= $("#accountReportChart").width();
var h= $("#accountReportChart").height();
console.log(w,h);
$("#accountReportChart").highcharts().setSize(w,h,false);
})
});
这个highcharts是国外的框架,但是功能很齐全,这个代码实现了监听容器大小变化而重新加载画面