From 15e806013f8926640138a5cef0ecca510f666a23 Mon Sep 17 00:00:00 2001
From: hhx <1284857778@qq.com>
Date: Tue, 15 Mar 2022 16:50:56 +0800
Subject: [PATCH] commit
---
.../statistic-analysis/index.js | 94 ++++++++++++-------
04.系统编码/App/Content/styles/common.css | 25 ++++-
.../App/Views/StatisticAnalysis/Index.cshtml | 4 +-
3 files changed, 85 insertions(+), 38 deletions(-)
diff --git a/04.系统编码/App/Content/scripts/system-management/statistic-analysis/index.js b/04.系统编码/App/Content/scripts/system-management/statistic-analysis/index.js
index cec9b8c..04d89a7 100644
--- a/04.系统编码/App/Content/scripts/system-management/statistic-analysis/index.js
+++ b/04.系统编码/App/Content/scripts/system-management/statistic-analysis/index.js
@@ -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) + '计算次数统计' + '
' + 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: '{point.key}',
+ pointFormat: '{series.name}: {point.percentage:.2f}%',
+ 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]]
diff --git a/04.系统编码/App/Content/styles/common.css b/04.系统编码/App/Content/styles/common.css
index 7ff5bc9..c939cd6 100644
--- a/04.系统编码/App/Content/styles/common.css
+++ b/04.系统编码/App/Content/styles/common.css
@@ -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 {
diff --git a/04.系统编码/App/Views/StatisticAnalysis/Index.cshtml b/04.系统编码/App/Views/StatisticAnalysis/Index.cshtml
index 1509012..14b3c41 100644
--- a/04.系统编码/App/Views/StatisticAnalysis/Index.cshtml
+++ b/04.系统编码/App/Views/StatisticAnalysis/Index.cshtml
@@ -39,8 +39,8 @@