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

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

@ -807,10 +807,29 @@
.chart { .chart {
width: 98%; width: 98%;
height: calc(100vh - 120px); height: calc(100vh - 105px);
margin: 0 auto; margin: 0 auto;
display: flex; position: relative;
align-items: center; /*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 { .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> <button type="button" class="btn query-btn" id="query-btn">查询</button>
</div> </div>
<div class="chart"> <div class="chart">
<div class="chart-item" id="chart"></div> <div class="default-chart" id="chart"></div>
<div class="chart-item" id="pie-chart"></div> <div class="pie-chart" id="pie-chart"></div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save