root
/
BeijingSafeguard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
hhx 3 years ago
parent
a5186fa739
commit
15e806013f
3 changed files with 85 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      04.系统编码/App/Content/scripts/system-management/statistic-analysis/index.js
  2. 25
      04.系统编码/App/Content/styles/common.css
  3. 4
      04.系统编码/App/Views/StatisticAnalysis/Index.cshtml

94
04.系统编码/App/Content/scripts/system-management/statistic-analysis/index.js
View File

@ -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]]

25
04.系统编码/App/Content/styles/common.css
View File

@ -807,10 +807,29 @@
.chart {
width: 98%;
height: calc(100vh - 120px);
height: calc(100vh - 105px);
margin: 0 auto;
display: flex;
align-items: center;
position: relative;
/*display: flex;
align-items: center;*/
}
.default-chart {
width: 100%;
height: 100%;
}
.pie-chart {
width: 350px;
height: 350px;
position: absolute;
top: 40px;
right: 0;
}
.highcharts-title {
line-height: 28px;
text-align: center;
}
.chart-item {

4
04.系统编码/App/Views/StatisticAnalysis/Index.cshtml
View File

@ -39,8 +39,8 @@
<button type="button" class="btn query-btn" id="query-btn">查询</button>
</div>
<div class="chart">
<div class="chart-item" id="chart"></div>
<div class="chart-item" id="pie-chart"></div>
<div class="default-chart" id="chart"></div>
<div class="pie-chart" id="pie-chart"></div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save