diff --git a/ruoyi-admin/src/main/resources/templates/scada/AbsorbDeviceKB.html b/ruoyi-admin/src/main/resources/templates/scada/AbsorbDeviceKB.html index 82245bf..a018429 100644 --- a/ruoyi-admin/src/main/resources/templates/scada/AbsorbDeviceKB.html +++ b/ruoyi-admin/src/main/resources/templates/scada/AbsorbDeviceKB.html @@ -238,7 +238,8 @@ top: 73%; left: 2%; } - .scrollTable{ + + .scrollTable { /*font-size: 127.8px;*/ } @@ -335,286 +336,291 @@ //库存统计 autoUpdate("/system/AbsorbDeviceMes/getinventory", INTERVAL, data => { - console.log(JSON.stringify(data)); + data.forEach((item) => { - xAxisData.push(item.name); + let name = '' + if(item.name.length >= 15){ + name = item.name.split(',')[0] + }else{ + name = item.name + } + xAxisData.push(name); seriesData1.push(parseInt(item.value)); sum += parseInt(item.value); }); - console.log("xAxisData:"+xAxisData); - console.log("seriesData1:"+seriesData1); - console.log("sum:"+sum); - }) + console.log(xAxisData) - option = { + option = { - grid: { - top: "25%", - bottom: "25%", - }, - xAxis: { - data: xAxisData, - axisTick: { - show: false, + grid: { + top: "25%", + bottom: "25%", }, - axisLine: { - show: false, - }, - axisLabel: { - interval: 0, - show: true, - margin: 25, - align: "center", - textStyle: { - fontSize: 12, - color: "#A8A6AB", - rich: { - a: { - fontSize: 12, - color: "#ffffff", - }, - b: { - height: 20, - fontSize: 14, - color: "#ffffff", + xAxis: { + data: xAxisData, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + interval: 0, + show: true, + margin: 25, + align: "center", + textStyle: { + fontSize: 12, + color: "#A8A6AB", + rich: { + a: { + fontSize: 12, + color: "#ffffff", + }, + b: { + height: 20, + fontSize: 14, + color: "#ffffff", + }, }, }, }, }, - }, - yAxis: { - splitLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLine: { - show: false, - }, - axisLabel: { - show: false, + yAxis: { + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + }, }, - }, - series: [ - { - name: "柱顶部", - type: "pictorialBar", - symbolSize: [15, 6], - symbolOffset: [0, -5], - z: 12, - itemStyle: { - normal: { - color: function (params) { - return barTopColor[0]; + series: [ + { + name: "柱顶部", + type: "pictorialBar", + symbolSize: [15, 6], + symbolOffset: [0, -5], + z: 12, + itemStyle: { + normal: { + color: function (params) { + return barTopColor[0]; + }, }, }, - }, - label: { - show: true, - position: "top", - textStyle: { - color: "#02C3F1", + label: { + show: true, + position: "top", + textStyle: { + color: "#02C3F1", + }, }, + symbolPosition: "end", + data: seriesData1, }, - symbolPosition: "end", - data: seriesData1, - }, - { - name: "柱底部", - type: "pictorialBar", - symbolSize: [26, 10], - symbolOffset: [0, 5], - z: 12, - itemStyle: { - normal: { - color: function (params) { - return barTopColor[0]; + { + name: "柱底部", + type: "pictorialBar", + symbolSize: [26, 10], + symbolOffset: [0, 5], + z: 12, + itemStyle: { + normal: { + color: function (params) { + return barTopColor[0]; + }, }, }, + data: seriesData1, }, - data: seriesData1, - }, - { - name: "第一圈", - type: "pictorialBar", - symbolSize: [38, 14], - symbolOffset: [0, 17], - z: 11, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 20, + { + name: "第一圈", + type: "pictorialBar", + symbolSize: [38, 14], + symbolOffset: [0, 17], + z: 11, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 20, + }, }, + data: [seriesData1[0], "", ""], }, - data: [seriesData1[0], "", ""], - }, - { - name: "第一圈", - type: "pictorialBar", - symbolSize: [38, 14], - symbolOffset: [0, 17], - z: 11, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 20, + { + name: "第一圈", + type: "pictorialBar", + symbolSize: [38, 14], + symbolOffset: [0, 17], + z: 11, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 20, + }, }, + data: ["", seriesData1[1], ""], }, - data: ["", seriesData1[1], ""], - }, - { - name: "第一圈", - type: "pictorialBar", - symbolSize: [38, 14], - symbolOffset: [0, 17], - z: 11, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 20, + { + name: "第一圈", + type: "pictorialBar", + symbolSize: [38, 14], + symbolOffset: [0, 17], + z: 11, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 20, + }, }, + data: ["", "", seriesData1[2]], }, - data: ["", "", seriesData1[2]], - }, - { - name: "第一圈", - type: "pictorialBar", - symbolSize: [38, 14], - symbolOffset: [0, 17], - z: 11, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 20, + { + name: "第一圈", + type: "pictorialBar", + symbolSize: [38, 14], + symbolOffset: [0, 17], + z: 11, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 20, + }, }, + data: ["", "", "", seriesData1[3]], }, - data: ["", "", "", seriesData1[3]], - }, - { - name: "第一圈", - type: "pictorialBar", - symbolSize: [38, 14], - symbolOffset: [0, 17], - z: 11, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 20, + { + name: "第一圈", + type: "pictorialBar", + symbolSize: [38, 14], + symbolOffset: [0, 17], + z: 11, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 20, + }, }, + data: ["", "", "", "", seriesData1[4]], }, - data: ["", "", "", "", seriesData1[4]], - }, - { - name: "第二圈", - type: "pictorialBar", - symbolSize: [30, 10], - symbolOffset: [0, 12], - z: 10, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 16, + { + name: "第二圈", + type: "pictorialBar", + symbolSize: [30, 10], + symbolOffset: [0, 12], + z: 10, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 16, + }, }, + data: [seriesData1[0], "", ""], }, - data: [seriesData1[0], "", ""], - }, - { - name: "第二圈", - type: "pictorialBar", - symbolSize: [30, 10], - symbolOffset: [0, 12], - z: 10, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 16, + { + name: "第二圈", + type: "pictorialBar", + symbolSize: [30, 10], + symbolOffset: [0, 12], + z: 10, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 16, + }, }, + data: ["", seriesData1[1], ""], }, - data: ["", seriesData1[1], ""], - }, - { - name: "第二圈", - type: "pictorialBar", - symbolSize: [30, 10], - symbolOffset: [0, 12], - z: 10, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 16, + { + name: "第二圈", + type: "pictorialBar", + symbolSize: [30, 10], + symbolOffset: [0, 12], + z: 10, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 16, + }, }, + data: ["", "", seriesData1[2]], }, - data: ["", "", seriesData1[2]], - }, - { - name: "第二圈", - type: "pictorialBar", - symbolSize: [30, 10], - symbolOffset: [0, 12], - z: 10, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 16, + { + name: "第二圈", + type: "pictorialBar", + symbolSize: [30, 10], + symbolOffset: [0, 12], + z: 10, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 16, + }, }, + data: ["", "", "", seriesData1[3]], }, - data: ["", "", "", seriesData1[3]], - }, - { - name: "第二圈", - type: "pictorialBar", - symbolSize: [30, 10], - symbolOffset: [0, 12], - z: 10, - itemStyle: { - normal: { - color: "transparent", - borderColor: barTopColor[0], - borderWidth: 16, + { + name: "第二圈", + type: "pictorialBar", + symbolSize: [30, 10], + symbolOffset: [0, 12], + z: 10, + itemStyle: { + normal: { + color: "transparent", + borderColor: barTopColor[0], + borderWidth: 16, + }, }, + data: ["", "", "", "", seriesData1[4]], }, - data: ["", "", "", "", seriesData1[4]], - }, - { - type: "bar", - itemStyle: { - normal: { - color: function (params) { - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 1, - color: barTopColor[0], - }, - { - offset: 0, - color: barBottomColor[0], - }, - ]); + { + type: "bar", + itemStyle: { + normal: { + color: function (params) { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 1, + color: barTopColor[0], + }, + { + offset: 0, + color: barBottomColor[0], + }, + ]); + }, + opacity: 0.8, }, - opacity: 0.8, }, + z: 16, + silent: true, + barWidth: 14, + barGap: "-100%", // Make series be overlap + data: seriesData1, }, - z: 16, - silent: true, - barWidth: 14, - barGap: "-100%", // Make series be overlap - data: seriesData1, - }, - ], - }; - option && mycharts.setOption(option); + ], + }; + option && mycharts.setOption(option); + + }) })