|
|
@ -48,21 +48,25 @@ |
|
|
|
url: '/StatisticAnalysis/Query', |
|
|
|
data: this.GetParams(), |
|
|
|
success: function (result) { |
|
|
|
console.log(JSON.parse(result).rows) |
|
|
|
var rows = JSON.parse(result).rows; |
|
|
|
console.log(rows) |
|
|
|
var type = this.GetParams().typeCode === 'user' ? 'column' : 'spline'; |
|
|
|
var name = this.GetParams().typeCode === 'user' ? '根据用户' : '根据机构'; |
|
|
|
var xAxises = this.GetSeries(rows, name).xAxises; |
|
|
|
var values = this.GetSeries(rows, name).series; |
|
|
|
var pieData = this.GetSeries(rows, name).pieData; |
|
|
|
var series = this.GetElementSerie(type, name, values); |
|
|
|
this.InitChart(series, xAxises, rows, name); |
|
|
|
var max = this.GetSeries(rows, name).max; |
|
|
|
var pieValues = this.GetSeries(rows, name).pieSeries; |
|
|
|
var defaultValues = this.GetSeries(rows, name).defaultSeries; |
|
|
|
|
|
|
|
var defaultData = this.GetElement(type, name, defaultValues); |
|
|
|
var pieData = this.GetElement('pie', '占比', pieValues); |
|
|
|
|
|
|
|
this.InitChart(defaultData, xAxises, rows, name, max); |
|
|
|
this.InitPieChart(pieData, name); |
|
|
|
}.bind(this) |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
this.GetElementSerie = function (type, name, values) { |
|
|
|
this.GetElement = function (type, name, values) { |
|
|
|
return { |
|
|
|
type: type, |
|
|
|
name: name, |
|
|
@ -71,37 +75,38 @@ |
|
|
|
}; |
|
|
|
|
|
|
|
this.GetSeries = function (result, name) { |
|
|
|
var series = []; |
|
|
|
var max = null; |
|
|
|
var xAxises = []; |
|
|
|
var count = []; |
|
|
|
var pieData = []; |
|
|
|
var pieSeries = []; |
|
|
|
var defaultSeries = []; |
|
|
|
|
|
|
|
result.forEach(function (item, index) { |
|
|
|
count.push(item.ComputeCount); |
|
|
|
}.bind(this)); |
|
|
|
|
|
|
|
result.forEach(function (item, index) { |
|
|
|
var sum = count.reduce(function (prev, next) { |
|
|
|
return prev + next; |
|
|
|
}); |
|
|
|
var sum = count.reduce(function (prev, next) { return prev + next; }); |
|
|
|
|
|
|
|
max = count.reduce(function (prev, cur) { return Math.max(prev, cur); }); |
|
|
|
|
|
|
|
xAxises.push(name === '根据用户' ? item.UserName : item.OrgName); |
|
|
|
series.push(item.ComputeCount); |
|
|
|
pieData.push({ |
|
|
|
defaultSeries.push(item.ComputeCount); |
|
|
|
pieSeries.push({ |
|
|
|
name: name === '根据用户' ? item.UserName : item.OrgName, |
|
|
|
y: this.formatDecimal(String(item.ComputeCount / sum) / 100) * 100 |
|
|
|
}) |
|
|
|
}.bind(this)) |
|
|
|
|
|
|
|
return { |
|
|
|
series: series, |
|
|
|
max: max, |
|
|
|
xAxises: xAxises, |
|
|
|
pieData: pieData |
|
|
|
pieSeries: pieSeries, |
|
|
|
defaultSeries: defaultSeries |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
this.formatDecimal = function (value) { |
|
|
|
console.log(value) |
|
|
|
value = value.toString() |
|
|
|
let index = value.indexOf('.') |
|
|
|
if (index !== -1) { |
|
|
@ -112,13 +117,14 @@ |
|
|
|
return parseFloat(value).toFixed(5) |
|
|
|
}; |
|
|
|
|
|
|
|
this.InitChart = function (series, xAxises, values, name) { |
|
|
|
this.InitChart = function (series, xAxises, values, name, max) { |
|
|
|
Highcharts.chart('chart', { |
|
|
|
chart: { |
|
|
|
backgroundColor: '#052a50' |
|
|
|
backgroundColor: '#002145' |
|
|
|
}, |
|
|
|
title: { |
|
|
|
text: moment(this.GetParams().fromTime).format('YYYY年MM月DD日') + ' 至 ' + moment(this.GetParams().toTime).format('YYYY年MM月DD日') + name.slice(2) + '计算次数', |
|
|
|
useHTML: true, |
|
|
|
text: name.slice(2) + '计算次数统计' + '<br/>' + moment(this.GetParams().fromTime).format('YYYY年MM月DD日') + ' 至 ' + moment(this.GetParams().toTime).format('YYYY年MM月DD日'), |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontFamily: '微软雅黑' |
|
|
@ -133,7 +139,7 @@ |
|
|
|
}, |
|
|
|
verticalAlign: 'top', |
|
|
|
align: 'left', |
|
|
|
y: 25 |
|
|
|
y: 50 |
|
|
|
}, |
|
|
|
credits: { |
|
|
|
enabled: false |
|
|
@ -155,6 +161,7 @@ |
|
|
|
title: { |
|
|
|
text: null |
|
|
|
}, |
|
|
|
max: max * 3, |
|
|
|
labels: { |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
@ -197,6 +204,22 @@ |
|
|
|
borderRadius: 3, |
|
|
|
borderColor: '' |
|
|
|
}, |
|
|
|
pie: { |
|
|
|
center: [1000, 100], |
|
|
|
size: 200, |
|
|
|
tooltip: { |
|
|
|
headerFormat: '<b>{point.key}</b></br>', |
|
|
|
pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>', |
|
|
|
useHTML: true, |
|
|
|
crosshair: true, |
|
|
|
backgroundColor: '#002145', |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: { |
|
|
|
color: { |
|
|
|
linearGradient: { |
|
|
@ -236,19 +259,20 @@ |
|
|
|
}; |
|
|
|
|
|
|
|
this.InitPieChart = function (series, name) { |
|
|
|
var firstColors = ['#00d5f6', '#dc9884', '#8c83dc', '#e4e189', '#97e6af', '#7aa9da', '#b7d2ff', '#88f187', '#e3ea79', '#e29f6f']; |
|
|
|
var lastColors = ['#266cb9', '#bd3d17', '#3324a9', '#b3ae15', '#229625', '#1538e4', '#b7d2ff', '#3ac720', '#cad619', '#d2691f']; |
|
|
|
var chart = Highcharts.chart('pie-chart', { |
|
|
|
var firstColors = ['#00d5f6', '#97e6af', '#e4e189', '#dc9884', '#8c83dc', '#7aa9da', '#b7d2ff', '#88f187', '#e3ea79', '#e29f6f']; |
|
|
|
var lastColors = ['#266cb9', '#229625', '#b3ae15', '#bd3d17', '#3324a9', '#1538e4', '#b7d2ff', '#3ac720', '#cad619', '#d2691f']; |
|
|
|
Highcharts.chart('pie-chart', { |
|
|
|
chart: { |
|
|
|
backgroundColor: '#052a50', |
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0)', |
|
|
|
type: 'pie' |
|
|
|
}, |
|
|
|
title: { |
|
|
|
text: moment(this.GetParams().fromTime).format('YYYY年MM月DD日') + ' 至 ' + moment(this.GetParams().toTime).format('YYYY年MM月DD日') + name.slice(2) + '统计占比', |
|
|
|
text: name.slice(2) + '统计占比', |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
} |
|
|
|
}, |
|
|
|
y: 30 |
|
|
|
}, |
|
|
|
credits: { |
|
|
|
enabled: false |
|
|
@ -282,15 +306,19 @@ |
|
|
|
borderWidth: 0, |
|
|
|
cursor: 'pointer', |
|
|
|
dataLabels: { |
|
|
|
enabled: false |
|
|
|
useHTML: true, |
|
|
|
enabled: true, |
|
|
|
color: '#ffffff', |
|
|
|
style: { |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑', |
|
|
|
textOutline: 'none' |
|
|
|
} |
|
|
|
}, |
|
|
|
showInLegend: true |
|
|
|
showInLegend: false |
|
|
|
} |
|
|
|
}, |
|
|
|
series: [{ |
|
|
|
name: name + '占比', |
|
|
|
data: series |
|
|
|
}] |
|
|
|
series: [series] |
|
|
|
},function (chart) { |
|
|
|
SetGradientColor(chart); |
|
|
|
}); |
|
|
@ -299,7 +327,7 @@ |
|
|
|
for (var i = 0; i < pointsList.length; i++) { |
|
|
|
chart.series[0].points[i].update({ |
|
|
|
color: { |
|
|
|
linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
|
|
|
|
linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 }, |
|
|
|
stops: [ |
|
|
|
[0, Highcharts.Color(firstColors[i]).setOpacity(1).get('rgba')], |
|
|
|
[1, lastColors[i]] |
|
|
|