一、首先引人highcharts图表插件
<!-- 引用highcharts图标插件 -->
<script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/highcharts.js"></script>
<script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/highcharts-3d.js"></script>
<script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/modules/exporting.js"></script>项目插件结构
二、实例
（1）、实现饼图
var s = ["stuVm", "teaVm", "serverVm"]
for (var i = 0; i < s.length; i++) {
var obj = s[i];
var $obj = $("#" + obj + "Info");
$obj.highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 284,
width: 324
},
title: {
text: '' + $obj.attr("name") + '使用占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.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: [{
type: 'pie',
name: '' + $obj.attr("name") + '使用占比',
size: '60%',
data: [
{
name: '已启动',
color: '#8F94F6',
y: rel.vmInfo.data[obj + "Info"][obj + "Online"]
}, {
name: '未启动',
color: '#F7A35C',
y: rel.vmInfo.data[obj + "Info"][obj + "NoOnline"]
}
]
}],
credits: {
text: '' + $obj.attr("name") + "总数：" + rel.vmInfo.data[obj + 'Total'],
}
})
}
（2）实现柱状图
$("#vmInfo").highcharts({
chart: {
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 284,
width: 324
},
title: {
text: '系统汇总统计(系统总数：' + rel.vmInfo.data.vmTotal + '个)'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: '系统数量（个）'
}
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}
</b> 个<br/>'
},
series: [{
name: '系统',
colorByPoint: true,
data: [
['学生系统', rel.vmInfo.data.stuVmTotal],
['教师系统', rel.vmInfo.data.teaVmTotal],
['应用系统', rel.vmInfo.data.serverVmTotal],
['总系统数', rel.vmInfo.data.vmTotal]
]
}]
})
(3)实现环形图
$("#userInfo").highcharts(
{
chart: {
type: 'pie',
height: 284,
width: 324,
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: '用户信息汇总（总用户数：' + rel.userInfo.data.totalNum + '个）'
},
plotOptions: {
pie: {
innerSize: 40,
depth: 20
}
},
series: [{
name: '用户数量',
data: [
['低级学生用户', rel.userInfo.data.lowStuNum],
['高级学生用户', rel.userInfo.data.hightStuNum],
['教师用户', rel.userInfo.data.teaNum],
['管理员', rel.userInfo.data.adminNum],
['太易云管理员', rel.userInfo.data.taeAdminNum]
]
}]
}
)
（4）.实现3D柱状图
$("#terInfo").highcharts({
chart: {
type: 'column',
height: 284,
width: 324,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '终端信息（终端总数：' + rel.terInfo.data.totalNum + '个）'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
type: 'category',
labels: {
skew3d: true,
style: {
fontSize: '12px'
}
}
},
yAxis: {
title: {
text: '终端个数（个）'
}
},
series: [{
name: '终端数',
colorByPoint: true,
data: [['已启动终端数', rel.terInfo.data.activeNum], ['未启动终端数',
rel.terInfo.data.noActiveNum]]
}]
})
(5)实现上下双层柱状图
$("#imgInfo").highcharts({
chart: {
type: 'column',
height: 284,
width: 324,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
}
},
title: {
text: '镜像信息(总数：' + rel.imgInfo.data.totalImg + '个)'
},
xAxis: {
categories: ['学生镜像', '教师镜像', '应用镜像'],
labels: {
skew3d: true,
style: {
fontSize: '16px'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: '镜像个数（个）',
skew3d: true
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}:
{point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: '已同步镜像数',
data: [{
color: '#90ED7D',
y: rel.imgInfo.data.stuImg.isSyn
},{
color: '#90ED7D',
y: rel.imgInfo.data.teaImg.isSyn
},{
color: '#90ED7D',
y: rel.imgInfo.data.serverimg.isSyn
}]
}, {
name: '未同步镜像数',
data: [{
color: '#FFBC75',
y: rel.imgInfo.data.stuImg.noSyn
},{
color: '#FFBC75',
y: rel.imgInfo.data.teaImg.noSyn
},{
color: '#FFBC75',
y: rel.imgInfo.data.serverimg.noSyn
}],
}]
})
（6）实现无限叠加饼图
var poolArray = rel.poolInfo;
for (var i = 0; i < poolArray.length; i++) {
var poolName = poolArray[i].diskName;
var poolUser = poolArray[i].diskUser;
var poolSurplus = poolArray[i].diskSurplus;
var poolSize = poolArray[i].size;
$("#contai").append("<div id='container" + poolName + "' style='margin-
bottom:100px;margin-left:30px;margin-top:20px;width: 340px;height: 280px;float: left;'></div>");
var container = $("#container" + poolName + "").highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 300,
width: 380
},
title: {
text: '' + poolName + '磁盘使用占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.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: [{
type: 'pie',
name: '' + poolName + '磁盘使用占比',
size: '60%',
data: [
['使用', poolUser],
['剩余', poolSurplus]
]
}],
credits: {
text: "磁盘总容量大小：" + poolSize,
}
});
}