From 73db9b7a0f79f0caa1869eee158b26d5770e05ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 29 Jul 2022 11:12:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../main/resources/static/css/board/month.css | 29 ------
.../main/resources/static/js/board/month.js | 7 +-
.../main/resources/static/js/echartsCommon.js | 88 +++++++++++++------
.../main/resources/templates/broad/month.html | 8 --
4 files changed, 62 insertions(+), 70 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/static/css/board/month.css b/ruoyi-admin/src/main/resources/static/css/board/month.css
index 9d05612..469c610 100644
--- a/ruoyi-admin/src/main/resources/static/css/board/month.css
+++ b/ruoyi-admin/src/main/resources/static/css/board/month.css
@@ -72,35 +72,6 @@ body {
top: 18.7%;
left: 26.7%;
}
-.nivoSlider{
- width: 100%;
- height: 100%;
-}
-.HighlightOne{
- /*width: 23vw;*/
- /*height: 35vh;*/
- width: 230px;
- height: 350px;
-
-}
-.HighlightTwo{
- /*width: 23vw;*/
- /*height: 35vh;*/
- width: 230px;
- height: 350px;
-}
-.HighlightThree{
- /*width: 23vw;*/
- /*height: 35vh;*/
- width: 230px;
- height: 350px;
-}
-.HighlightFour{
- /*width: 23vw;*/
- /*height: 35vh;*/
- width: 230px;
- height: 350px;
-}
.slide{
position: absolute;
width: 22%;
diff --git a/ruoyi-admin/src/main/resources/static/js/board/month.js b/ruoyi-admin/src/main/resources/static/js/board/month.js
index a706499..d9d6c14 100644
--- a/ruoyi-admin/src/main/resources/static/js/board/month.js
+++ b/ruoyi-admin/src/main/resources/static/js/board/month.js
@@ -26,7 +26,6 @@ $(() => {
}, document.getElementById("safe"), '')
})
autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
- console.log(data)
pieChart(data.map((val,index) => {
if (index == 0 ) {
return {
@@ -63,10 +62,6 @@ $(() => {
})
autoUpdate(url + "/selectHighlightProducts", 40000, data => {
let url = data.map(val => val.picturePath)
- // $('#HighlightOne').css({backgroundImage: `url("http://10.100.70.5:9090/${url[0]}")`})
- // $('#HighlightTwo').css({backgroundImage: `url("http://10.100.70.5:9090/${url[1]}")`})
- // $('#HighlightThree').css({backgroundImage: `url("http://10.100.70.5:9090/${url[2]}")`})
- // $('#HighlightFour').css({backgroundImage: `url("http://10.100.70.5:9090/${url[3]}")`})
$('#HighlightOne').attr("src" , `http://10.100.70.5:9090/${url[0]}`)
$('#HighlightTwo').attr("src" , `http://10.100.70.5:9090/${url[1]}`)
$('#HighlightThree').attr("src" , `http://10.100.70.5:9090/${url[2]}`)
@@ -107,7 +102,7 @@ $(() => {
lineChart({
xName: month.splice(0,value.length),
yData: value,
- yDataName: "能耗百分比"
+ yDataName: "单台能耗(元/台)"
}, document.getElementById("energyConsumption"), '')
})
diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
index d9c72ee..5890590 100644
--- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
+++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
@@ -279,7 +279,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
}
// 柱状+折线图
-const barChartAndLineChart = function (data, id,rotate=0) {
+const barChartAndLineChart = function (data, id, rotate = 0) {
let charts = echarts.init(id);
if (!data) {
data = {
@@ -325,8 +325,8 @@ const barChartAndLineChart = function (data, id,rotate=0) {
},
},
axisLabel: {
- rotate:rotate,
- interval:0,
+ rotate: rotate,
+ interval: 0,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
@@ -667,7 +667,7 @@ const barChartAndLineChartThree = function (data, id) {
},
},
axisLabel: {
- interval:0,
+ interval: 0,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
@@ -946,19 +946,22 @@ const barChartAndLineChartFour = function (data, id) {
}
// 折线图
-const lineChart = function (data, id) {
+const lineChart = function (data, id,unit='') {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
- yDataName: "提升百分比"
+ yDataName: "提升百分比",
+ yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
+ yDataTwoName: "百分比"
}
}
let min = Math.ceil(Math.min(...data.yData))
+ let max = Math.ceil(Math.max(...data.yData))
let option = {
grid: {
- top: '34%',
+ top: '20%',
left: '5%',
right: '5%',
bottom: '8%',
@@ -976,13 +979,13 @@ const lineChart = function (data, id) {
legend: {
top: '5%',
textStyle: {
- fontSize:0.75*vw,
+ fontSize: 0.75 * vw,
color: '#90cb5e',
},
},
xAxis: {
type: 'category',
- data:data.xName,
+ data: data.xName,
axisLine: {
show: true,
},
@@ -998,8 +1001,8 @@ const lineChart = function (data, id) {
},
yAxis: [
{
- min:min - 2,
- max:100,
+ min: (min - 2 < 0) ? 0 : min - 2,
+ max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#393939',
@@ -1018,6 +1021,7 @@ const lineChart = function (data, id) {
},
axisLabel: {
show: true,
+ formatter:`{c}${unit}`,
textStyle: {
color: '#ffffff',
},
@@ -1043,7 +1047,7 @@ const lineChart = function (data, id) {
label: {
//图形上的文本标签
normal: {
- formatter:'{c}%',
+ formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@@ -1056,6 +1060,37 @@ const lineChart = function (data, id) {
},
data: data.yData,
},
+ {
+ name: data.yDataTwoName,
+ type: 'line',
+ showAllSymbol: true, //显示所有图形。
+ symbol: 'circle', //标记的图形为实心圆
+ symbolSize: 4, //标记的大小
+ itemStyle: {
+ //折线拐点标志的样式
+ color: '#5f3caf',
+ borderWidth: '2',
+ borderColor: '#462f84',
+ },
+ lineStyle: {
+ color: '#3094ea',
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: '{c}%',
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#3254b8",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.5 * vw,
+ },
+ },
+ },
+ data: data.yDataTwo,
+ },
],
};
@@ -1065,9 +1100,8 @@ const lineChart = function (data, id) {
// 饼图
-const pieChart = function (data, id,unit='次') {
+const pieChart = function (data, id, unit = '次') {
let charts = echarts.init(id);
- console.log(data)
if (!data) {
data = [
{
@@ -1154,7 +1188,7 @@ const pieChart = function (data, id,unit='次') {
}
// 垂直柱状图
-const verticalBarChart = function (data, id,unit='次') {
+const verticalBarChart = function (data, id, unit = '次') {
let charts = echarts.init(id);
if (!data) {
data = {
@@ -1514,7 +1548,7 @@ const multipleVerticalBarChart = function (data, id) {
charts.setOption(option);
$(window).resize(charts.resize);
}
-const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
+const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
let charts = echarts.init(id);
if (!data) {
data = {
@@ -1585,7 +1619,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
emphasis: {
focus: 'series'
},
- barWidth:'30%',
+ barWidth: '30%',
itemStyle: {
//图形样式
normal: {
@@ -1609,8 +1643,8 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
emphasis: {
focus: 'series'
},
- barWidth:'30%',
- barGap:'40%',
+ barWidth: '30%',
+ barGap: '40%',
label: {
show: true,
position: "top",
@@ -1679,13 +1713,13 @@ const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
}
},
legend: {
- data: [data.yDataOneName, data.yDataTwoName,data.yDataThreeName,data.yDataFourName],
+ data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
- dataZoom:[],
+ dataZoom: [],
xAxis: [
{
type: 'category',
@@ -2545,7 +2579,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
},
},
axisLabel: {
- formatter:'{value}%',
+ formatter: '{value}%',
show: true,
color: '#fff',
interval: 0.5,
@@ -2578,7 +2612,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
normal: {
show: true,
position: "top",
- formatter:'{c}%',
+ formatter: '{c}%',
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
@@ -2606,7 +2640,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
- formatter:'{c}%',
+ formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@@ -2636,7 +2670,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
- formatter:'{c}%',
+ formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@@ -2666,7 +2700,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
- formatter:'{c}%',
+ formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@@ -2696,7 +2730,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
- formatter:'{c}%',
+ formatter: '{c}%',
show: true,
position: "top",
textStyle: {
diff --git a/ruoyi-admin/src/main/resources/templates/broad/month.html b/ruoyi-admin/src/main/resources/templates/broad/month.html
index b5b57c9..3cae805 100644
--- a/ruoyi-admin/src/main/resources/templates/broad/month.html
+++ b/ruoyi-admin/src/main/resources/templates/broad/month.html
@@ -59,14 +59,6 @@
生态终端
感动用户
-
-
-
-
-
-
-
-