|
|
//初始化
|
|
|
$(function(){
|
|
|
//上方组图
|
|
|
//加载权限操作饼图
|
|
|
systemOperPieEchart();
|
|
|
//加载在线用户统计折线图
|
|
|
aLineLineEchart();
|
|
|
//加载在线用户统计柱状图
|
|
|
aLineBarEchart();
|
|
|
|
|
|
//下方组图
|
|
|
//服务器监控1 仪表盘
|
|
|
serverListenGaugeEchart1();
|
|
|
//服务器监控2 仪表盘
|
|
|
serverListenGaugeEchart2();
|
|
|
//服务器监控3 多环形
|
|
|
serverListenGaugeEchart3();
|
|
|
})
|
|
|
|
|
|
//定时刷新数据
|
|
|
//1
|
|
|
setInterval(function () {
|
|
|
systemOperPieEchart();
|
|
|
},1000);
|
|
|
//2
|
|
|
setInterval(function () {
|
|
|
aLineLineEchart();
|
|
|
},1000);
|
|
|
//3
|
|
|
setInterval(function () {
|
|
|
aLineBarEchart();
|
|
|
},1000);
|
|
|
//4
|
|
|
setInterval(function () {
|
|
|
serverListenGaugeEchart1();
|
|
|
},1000);
|
|
|
//5
|
|
|
setInterval(function () {
|
|
|
serverListenGaugeEchart2();
|
|
|
},60000);
|
|
|
//6
|
|
|
setInterval(function () {
|
|
|
serverListenGaugeEchart3();
|
|
|
},1000);
|
|
|
/*****************************************工具类公共方法***************************************************/
|
|
|
//工具栏公共方法
|
|
|
var toolbox = {
|
|
|
feature: {
|
|
|
dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
|
|
|
show: true,//是否显示组件。
|
|
|
readOnly: false
|
|
|
},
|
|
|
saveAsImage: {}
|
|
|
}
|
|
|
};
|
|
|
//工具栏公共方法1折线图和柱状图
|
|
|
var toolbox1 = {
|
|
|
feature: {
|
|
|
dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
|
|
|
show: true,//是否显示组件。
|
|
|
readOnly: false
|
|
|
},
|
|
|
magicType:{//动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
|
|
|
show:true,
|
|
|
type:['line','bar']
|
|
|
},
|
|
|
restore: {},
|
|
|
saveAsImage: {}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
/************************************加载动态数据***********************************************/
|
|
|
//加载权限操作饼图
|
|
|
function systemOperPieEchart(){
|
|
|
var myChart = echarts.init(document.getElementById('systemOperDivMain'));
|
|
|
//设置实际值
|
|
|
myChart.setOption({
|
|
|
legend: {
|
|
|
top:46,
|
|
|
data:['无异常','异常','锁定']
|
|
|
},
|
|
|
color: ['#008000','#F7464A','#FFC870'],
|
|
|
});
|
|
|
$.ajax({
|
|
|
type:'get',
|
|
|
url:path+'/getEcharts1',
|
|
|
dataType:'json',
|
|
|
success:function(data){
|
|
|
if(data.code == 100){
|
|
|
var data = data.extend.list;
|
|
|
getPieEcharts(myChart,'',data);
|
|
|
}else{
|
|
|
toastr.error(data.msg);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
/*var data = [
|
|
|
{value:335,name:'无异常'},
|
|
|
{value:310,name:'异常'},
|
|
|
{value:234,name:'锁定'},
|
|
|
];*/
|
|
|
}
|
|
|
|
|
|
//加载在线用户统计折线图
|
|
|
function aLineLineEchart(){
|
|
|
var myChart = echarts.init(document.getElementById('alineLineDivMain'));
|
|
|
var name1 = '意向客户';
|
|
|
var name2 = '签约客户';
|
|
|
var name3 = '长期客户';
|
|
|
var name4 = '流失客户';
|
|
|
var names = [name1,name2,name3,name4];
|
|
|
myChart.setOption({
|
|
|
legend: {
|
|
|
data:names
|
|
|
},
|
|
|
color: ['#CC324B','#FFCE55','#8CC474','#5DB2FF'],
|
|
|
});
|
|
|
$.ajax({
|
|
|
type:'get',
|
|
|
url:path+'/getEcharts2',
|
|
|
dataType:'json',
|
|
|
sync:false,
|
|
|
success:function(data){
|
|
|
if(data.code == 100){
|
|
|
//最大登录数
|
|
|
var maxCountList = data.extend.list.maxCountList;
|
|
|
$("#maxCountList").text(maxCountList);
|
|
|
//日期集合
|
|
|
var xAsisData = data.extend.list.dayList;
|
|
|
var intentionalList = data.extend.list.intentionalList;
|
|
|
var contractedList = data.extend.list.contractedList;
|
|
|
var longTermList = data.extend.list.longTermList;
|
|
|
var lossList = data.extend.list.lossList;
|
|
|
var data = [
|
|
|
{
|
|
|
name:name1,
|
|
|
type:'line',
|
|
|
data:intentionalList
|
|
|
},
|
|
|
{
|
|
|
name:name2,
|
|
|
type:'line',
|
|
|
data:contractedList
|
|
|
},
|
|
|
{
|
|
|
name:name3,
|
|
|
type:'line',
|
|
|
data:longTermList
|
|
|
},
|
|
|
{
|
|
|
name:name4,
|
|
|
type:'line',
|
|
|
data:lossList
|
|
|
},
|
|
|
];
|
|
|
getLineEcharts(myChart,xAsisData,data);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
//$("#alineLineDivMain canvas").attr("height",190);
|
|
|
}
|
|
|
|
|
|
//加载在线用户统计柱状图
|
|
|
function aLineBarEchart(){
|
|
|
var myChart = echarts.init(document.getElementById('alineBarDivMain'));
|
|
|
myChart.setOption({
|
|
|
title:{
|
|
|
text:'本月拜访量趋势图',
|
|
|
x:'left'
|
|
|
},
|
|
|
});
|
|
|
var xAsisData,echartData;
|
|
|
$.ajax({
|
|
|
type:'get',
|
|
|
url:path+'/getEcharts3',
|
|
|
dataType:'json',
|
|
|
sync:false,
|
|
|
success:function(data){
|
|
|
if(data.code == 100){
|
|
|
//最大登录数
|
|
|
var maxCountList = data.extend.list.maxCountList;
|
|
|
$("#loginCount").text(maxCountList);
|
|
|
//日期集合
|
|
|
xAsisData = data.extend.list.dayList;
|
|
|
echartData = data.extend.list.dataList;
|
|
|
var color = '#D55462';
|
|
|
getBarEcharts(myChart,xAsisData,echartData,color);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
//$("#alineBarDivMain canvas").attr("height",190)
|
|
|
}
|
|
|
|
|
|
//加载服务器监控1仪表盘
|
|
|
function serverListenGaugeEchart1(){
|
|
|
var myChart = echarts.init(document.getElementById('serverListenGaugeDiv1'));
|
|
|
var name = 'cpu使用率';
|
|
|
var color = [[0.2,'#90EE90'],[0.4, '#FFA500'],[0.8,'#87CEEB'],[1, '#FF4500']];
|
|
|
$.ajax({
|
|
|
type:'get',
|
|
|
url:path+'/getEcharts4',
|
|
|
dataType:'json',
|
|
|
sync:false,
|
|
|
success:function(data){
|
|
|
if(data.code == 100){
|
|
|
var data = data.extend.list;
|
|
|
gaugeEchart1(myChart,name,color,data);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//加载服务器监控2仪表盘
|
|
|
function serverListenGaugeEchart2(){
|
|
|
var myChart = echarts.init(document.getElementById('serverListenGaugeDiv2'));
|
|
|
//设置实际值
|
|
|
var color = [[0.4, '#2EC7C9'], [0.7, '#5AB1EF'], [1, '#D87A80']];
|
|
|
$.ajax({
|
|
|
type:'get',
|
|
|
url:path+'/getEcharts5',
|
|
|
dataType:'json',
|
|
|
sync:false,
|
|
|
success:function(data){
|
|
|
if(data.code == 100){
|
|
|
var value = data.extend.temperature;
|
|
|
var data = [{value: value, name: 'cpu温度'}];
|
|
|
getGaugeEcharts(myChart,'cpu温度',data,color);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
//加载服务器监控3仪表盘
|
|
|
function serverListenGaugeEchart3(){
|
|
|
var myChart = echarts.init(document.getElementById('serverListenGaugeDiv3'));
|
|
|
var text = '内存使用率';
|
|
|
var name1 = '总内存';
|
|
|
var name2 = '物理内存';
|
|
|
var name3 = '使用中';
|
|
|
var name = [name1,name2,name3];
|
|
|
var color1 = '#2EC7C9';
|
|
|
var color2 = '#B6A2DE';
|
|
|
var color3 = '#5AB1EF';
|
|
|
var color = [color1,color2,color3];
|
|
|
$.ajax({
|
|
|
type:'get',
|
|
|
url:path+'/getEcharts6',
|
|
|
dataType:'json',
|
|
|
sync:false,
|
|
|
success:function(data){
|
|
|
if(data.code == 100){
|
|
|
var value = data.extend.list;
|
|
|
var data = Math.round((value[2]/value[1])*100) + "%";
|
|
|
gaugeEchart3(myChart,text,name,color,value,data);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
/**************************************基本代码*************************************************/
|
|
|
/**
|
|
|
* myChart:实例化对象 name:饼图名称 data:动态数据var data = [
|
|
|
{value:335, name:'无异常'},
|
|
|
{value:310, name:'异常'},
|
|
|
{value:234, name:'锁定'},
|
|
|
];
|
|
|
* */
|
|
|
function getPieEcharts(myChart,name,data){
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
x: 'right',
|
|
|
},
|
|
|
toolbox:toolbox,
|
|
|
series: [
|
|
|
{
|
|
|
name:name,
|
|
|
type:'pie',
|
|
|
radius: ['40%', '70%'],
|
|
|
avoidLabelOverlap: false,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false,
|
|
|
position: 'center'
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: '30',
|
|
|
fontWeight: 'bold'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
data:data,
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* myChart:实例化对象 xAsisData:x轴数据 data:动态数据var data = [
|
|
|
{value:335, name:'无异常'},
|
|
|
{value:310, name:'异常'},
|
|
|
{value:234, name:'锁定'},
|
|
|
];
|
|
|
* */
|
|
|
function getLineEcharts(myChart,xAsisData,data){
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
toolbox:toolbox1,
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: xAsisData
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: data
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* myChart:实例化对象 xAsisData:x轴数据 var xAsisData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
|
|
|
var data = [120, 200, 150, 80, 70, 110, 130];
|
|
|
* */
|
|
|
//加载柱状图
|
|
|
function getBarEcharts(myChart,xAsisData,data,color){
|
|
|
var option = {
|
|
|
tooltip : {
|
|
|
trigger: 'axis',
|
|
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
|
|
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
color:color,
|
|
|
toolbox:toolbox1,
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: xAsisData
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
data:data,
|
|
|
type: 'bar'
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
//加载仪表图1
|
|
|
function gaugeEchart1(myChart,name,color,data){
|
|
|
var labelTop = {
|
|
|
normal : {
|
|
|
label : {
|
|
|
show : true,
|
|
|
position : 'center',
|
|
|
formatter : '{b}',
|
|
|
textStyle: {
|
|
|
baseline : 'bottom',
|
|
|
fontSize : '12',
|
|
|
fontWeight : 'bold'
|
|
|
}
|
|
|
},
|
|
|
labelLine : {
|
|
|
show : false
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
var labelFromatter = {
|
|
|
normal : {
|
|
|
label : {
|
|
|
formatter : function (a,b,c,d){return (100 - d).toFixed(2) + '%'},
|
|
|
textStyle: {
|
|
|
baseline : 'top',
|
|
|
fontSize : '12',
|
|
|
fontWeight : 'bold'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
var labelBottom = {
|
|
|
normal : {
|
|
|
label : {
|
|
|
show : true,
|
|
|
position : 'center'
|
|
|
},
|
|
|
labelLine : {
|
|
|
show : false
|
|
|
}
|
|
|
},
|
|
|
emphasis: {
|
|
|
|
|
|
}
|
|
|
};
|
|
|
var option= {
|
|
|
tooltip : {
|
|
|
formatter: "{a}<br/>{b}:{c}%"
|
|
|
},
|
|
|
toolbox:toolbox,
|
|
|
series : [
|
|
|
{
|
|
|
name:name,
|
|
|
type:'gauge',
|
|
|
center : ['50%', '50%'], // 默认全局居中
|
|
|
radius : '90%',
|
|
|
startAngle: 140,
|
|
|
endAngle : -140,
|
|
|
min: 0, // 最小值
|
|
|
max: 100, // 最大值
|
|
|
precision: 0, // 小数精度，默认为0，无小数点
|
|
|
splitNumber: 10, // 分割段数，默认为5
|
|
|
axisLine: { // 坐标轴线
|
|
|
show: true, // 默认显示，属性show控制显示与否
|
|
|
lineStyle: { // 属性lineStyle控制线条样式
|
|
|
color: color,
|
|
|
width: 28
|
|
|
}
|
|
|
},
|
|
|
axisTick: { // 坐标轴小标记
|
|
|
show: true, // 属性show控制显示与否，默认不显示
|
|
|
splitNumber: 5, // 每份split细分多少段
|
|
|
length :8, // 属性length控制线长
|
|
|
lineStyle: { // 属性lineStyle控制线条样式
|
|
|
color: '#eee',
|
|
|
width: 1,
|
|
|
type: 'solid'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
|
|
show: true,
|
|
|
formatter: function(v){
|
|
|
switch (v+''){
|
|
|
case '10': return '弱';
|
|
|
case '30': return '低';
|
|
|
case '60': return '中';
|
|
|
case '90': return '高';
|
|
|
default: return '';
|
|
|
}
|
|
|
},
|
|
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
|
|
color: '#333',
|
|
|
fontSize : 10
|
|
|
}
|
|
|
},
|
|
|
splitLine: { // 分隔线
|
|
|
show: true, // 默认显示，属性show控制显示与否
|
|
|
length :13, // 属性length控制线长
|
|
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
|
|
color: '#eee',
|
|
|
width: 2,
|
|
|
type: 'solid'
|
|
|
}
|
|
|
},
|
|
|
pointer : {
|
|
|
length : '80%',
|
|
|
width : 8,
|
|
|
color : 'auto'
|
|
|
},
|
|
|
title : {
|
|
|
show : true,
|
|
|
offsetCenter: ['-75%', -10], // x, y，单位px
|
|
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
|
|
color: '#333',
|
|
|
fontSize : 14
|
|
|
}
|
|
|
},
|
|
|
detail : {
|
|
|
show : true,
|
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
|
borderWidth: 0,
|
|
|
borderColor: '#ccc',
|
|
|
width: 0,
|
|
|
height:0,
|
|
|
offsetCenter: ['-70%', 10], // x, y，单位px
|
|
|
formatter:'{value}%',
|
|
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
|
|
color: 'auto',
|
|
|
fontSize : 26
|
|
|
}
|
|
|
},
|
|
|
data:[{value:data, name: name}]
|
|
|
}
|
|
|
] };
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* myChart:实例化对象 name:图名，
|
|
|
var color = [[0.4, '#2EC7C9'], [0.7, '#5AB1EF'], [1, '#D87A80']];
|
|
|
var data = [{value: 50, name: 'cpu温度'}];
|
|
|
* */
|
|
|
//加载仪表盘2
|
|
|
function getGaugeEcharts(myChart,name,data,color){
|
|
|
var option = {
|
|
|
tooltip : {
|
|
|
formatter: "{a} <br/>{b} : {c}℃"
|
|
|
},
|
|
|
toolbox: toolbox,
|
|
|
series: [
|
|
|
{
|
|
|
name: name,
|
|
|
type: 'gauge',
|
|
|
radius:'90%',
|
|
|
axisLabel:{
|
|
|
distance:-20
|
|
|
},
|
|
|
axisLine: { // 坐标轴线
|
|
|
lineStyle: { // 属性lineStyle控制线条样式
|
|
|
color: color,
|
|
|
width:10
|
|
|
}
|
|
|
},
|
|
|
detail: {formatter:'{value}℃'},
|
|
|
data: data
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
//加载三环形图
|
|
|
function gaugeEchart3(myChart,text,name,color,value,data){
|
|
|
var total = value[0] * 2;
|
|
|
var placeHolderStyle = {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
var option={
|
|
|
title : {
|
|
|
text: text,//主标题
|
|
|
subtext: data,//副标题
|
|
|
textStyle: {//主标题样式
|
|
|
fontWeight: 'bold',
|
|
|
fontSize: 14
|
|
|
},
|
|
|
subtextStyle: {//副标题样式
|
|
|
fontSize: 20,
|
|
|
fontWeight: 'bold',
|
|
|
},
|
|
|
left:'center',
|
|
|
top: 'middle'
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
trigger: 'item',//提示框触发类型，item数据项图形触发，主要应用于无类目轴的图表（散点图、饼形图等）
|
|
|
formatter: function(params, ticket, callback) {//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
|
|
|
return params.seriesName + ": " + params.value + "G";//系列名称：数据值
|
|
|
}
|
|
|
},
|
|
|
toolbox: toolbox,
|
|
|
color:color,//调色盘颜色列表，默认情况下图例和饼形环图颜色使用
|
|
|
legend: {
|
|
|
top: "44px",
|
|
|
left: "50%",
|
|
|
itemHeight: 20,//图例的高度
|
|
|
data: name,//图例的数据数组
|
|
|
selectedMode: true,//图例选择模式
|
|
|
orient: "vertical"//图例布局方式
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: name[0],
|
|
|
type: 'pie',
|
|
|
clockWise: false, //顺时加载
|
|
|
hoverAnimation: false, //鼠标移入变大
|
|
|
radius: [100, 120],
|
|
|
itemStyle: placeHolderStyle,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false,
|
|
|
}
|
|
|
},
|
|
|
data: [{
|
|
|
value: value[0],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: color[0]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: total-value[0],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'transparent'
|
|
|
}
|
|
|
}
|
|
|
}]
|
|
|
},
|
|
|
{
|
|
|
name: name[1],
|
|
|
type: 'pie',
|
|
|
clockWise: false, //顺时加载
|
|
|
hoverAnimation: false, //鼠标移入变大
|
|
|
radius: [80, 100],
|
|
|
itemStyle: placeHolderStyle,
|
|
|
data: [{
|
|
|
value: value[1],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: color[1]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: total-value[1],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'transparent'
|
|
|
}
|
|
|
}
|
|
|
}]
|
|
|
},
|
|
|
{
|
|
|
name: name[2],
|
|
|
type: 'pie',
|
|
|
clockWise: false, //顺时加载
|
|
|
hoverAnimation: false, //鼠标移入变大
|
|
|
radius: [60, 80],
|
|
|
itemStyle: placeHolderStyle,
|
|
|
data: [{
|
|
|
value: value[2],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: color[2]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: total-value[2],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'transparent'
|
|
|
}
|
|
|
}
|
|
|
}]
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
}
|