修改界面

ruoyi-admin/src/main/resources/static/js/board/month.js

@@ -88,11 +88,15 @@ $(() => {
         $('#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,
+        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 => {

ruoyi-admin/src/main/resources/static/js/echartsCommon.js

@@ -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);
+}
 
 
 // 饼图

ruoyi-admin/src/main/resources/templates/broad/month.html

@@ -52,6 +52,7 @@
 
 <!--能耗-->
 <div class="energyConsumption" id="energyConsumption"></div>
+<ifarme src="https://api.vvhan.com/api/60s"></ifarme>
 <!--异常-->
 <div class="abnormal" id="abnormal"></div>
 <span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 28.8%;font-size: 0.8vw;font-weight: 800;color: red;">品牌赋能</span>