From 4b5921be80f1081775bae719af6d478b116e7dc8 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:59:47 +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/js/board/month.js | 40 +++--- .../main/resources/static/js/echartsCommon.js | 130 +++++++++++++++++- .../main/resources/templates/broad/month.html | 1 + 3 files changed, 152 insertions(+), 19 deletions(-) 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 e06cbac..0618355 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/month.js +++ b/ruoyi-admin/src/main/resources/static/js/board/month.js @@ -18,7 +18,7 @@ $(() => { autoUpdate(url + "/selectMonthNumberQaS", INTERVAL, data => { multipleVerticalBarChartTwo({ - xName:data.map(val => `${val.monthName}月`), + xName: data.map(val => `${val.monthName}月`), yDataOne: data.map(val => val.bhNumber), yDataOneName: '闭环数', yDataTwo: data.map(val => val.qaNumber), @@ -26,8 +26,8 @@ $(() => { }, document.getElementById("safe"), '') }) autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => { - pieChart(data.map((val,index) => { - if (index == 0 ) { + pieChart(data.map((val, index) => { + if (index == 0) { return { name: val.name, value: val.rate, @@ -50,7 +50,7 @@ $(() => { value: val.rate } - }), document.getElementById("abnormal"),'%'); + }), document.getElementById("abnormal"), '%'); }) autoUpdate(url + "/selectProductInStoreGroupMonth", INTERVAL, data => { @@ -62,13 +62,13 @@ $(() => { }) autoUpdate(url + "/selectHighlightProducts", 40000, data => { let url = data.map(val => val.picturePath) - $('#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]}`) - $('#HighlightFour').attr("src" , `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]}`) + $('#HighlightFour').attr("src", `http://10.100.70.5:9090/${url[3]}`) let options = { - navButton:false, - sideButton:false, + navButton: false, + sideButton: false, effects: ['fade', 'slideX', 'slideY', 'page', 'circle', 'rollingX', 'rollingY', 'blindsX', 'blindsY'], data: [ { @@ -88,25 +88,29 @@ $(() => { $('#slide').vmcSlide(options); }) autoUpdate(url + "/selectBaseQilist", 40000, data => { - console.log(data) - lineChart({ - xName: data[0].list.map(val => val.name), - yData: data[0].list.map(val => val.rate), - yDataName: data[0].code, - }, document.getElementById("quality"),'%') + let yData = data.map(val => { + return { + name: val.code, + data: val.list.map(e=>e.rate), + } + }) + lineChartTwo({ + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"].splice(0,Math.ceil(Math.max(...data.map(val => val.list.length)))), + yData: yData, + }, document.getElementById("quality"), '%') }) autoUpdate(url + "/selectDtNenglist", INTERVAL, data => { let month = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"] let value = [] let target = [] for (let i = 1; i <= 12; i++) { - if(data[0][`month${i}`]){ + if (data[0][`month${i}`]) { value.push(data[0][`month${i}`]) target.push(data[0][`target`]) } } lineChart({ - xName: month.splice(0,value.length), + xName: month.splice(0, value.length), yData: value, yDataName: "单台能耗(元/台)", yDataTwo: target, diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index 9661971..e3388c7 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -946,7 +946,7 @@ const barChartAndLineChartFour = function (data, id) { } // 折线图 -const lineChart = function (data, id,unit='') { +const lineChart = function (data, id, unit = '') { let charts = echarts.init(id); if (!data) { data = { @@ -1096,6 +1096,134 @@ const lineChart = function (data, id,unit='') { charts.setOption(option); $(window).resize(charts.resize); } +const lineChartTwo = function (data, id, unit = '') { + let charts = echarts.init(id); + let color = ['#3094ea','#f3454b'] + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], + yData: [ + { + name: "提升百分比", + data: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], + }, + { + name: "百分比", + data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60], + }, + ], + } + } + let num = data.yData.map(val => val.data).flat(Infinity) + let min = Math.ceil(Math.min(...num)) + let max = Math.ceil(Math.max(...num)) + let series = data.yData.map((val,index) => { + return { + name: val.name, + type: 'line', + showAllSymbol: true, //显示所有图形。 + symbol: 'circle', //标记的图形为实心圆 + symbolSize: 4, //标记的大小 + itemStyle: { + //折线拐点标志的样式 + color: color[index % color.length], + borderWidth: '2', + borderColor: color[index % color.length], + }, + lineStyle: { + color: color[index % color.length], + }, + label: { + //图形上的文本标签 + normal: { + formatter: `{c}${unit}`, + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.5 * vw, + }, + }, + }, + data: val.data, + } + }) + let option = { + grid: { + top: '20%', + left: '5%', + right: '5%', + bottom: '8%', + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + label: { + show: true, + }, + }, + }, + legend: { + top: '5%', + textStyle: { + fontSize: 0.75 * vw, + color: '#90cb5e', + }, + }, + xAxis: { + type: 'category', + data: data.xName, + axisLine: { + show: true, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', //X轴文字颜色 + }, + }, + }, + yAxis: [ + { + min: (min - 2 < 0) ? 0 : min - 2, + max: (max + 2 > 100) ? 100 : max + 2, + type: 'value', + nameTextStyle: { + color: '#393939', + }, + splitLine: { + show: false, + lineStyle: { + color: '#eeeeee', + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', + }, + }, + }, + ], + series: series, + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} // 饼图 diff --git a/ruoyi-admin/src/main/resources/templates/broad/month.html b/ruoyi-admin/src/main/resources/templates/broad/month.html index 3cae805..f6af9bd 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/month.html +++ b/ruoyi-admin/src/main/resources/templates/broad/month.html @@ -52,6 +52,7 @@
+
品牌赋能