diff --git a/ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java b/ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java index 0e890c1..1e167dc 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java @@ -16,7 +16,7 @@ public class RuoYiApplication { // System.setProperty("spring.devtools.restart.enabled", "false"); SpringApplication.run(RuoYiApplication.class, args); - System.out.println("(♥◠‿◠)ﾉﾞ 若依启动成功 ლ(´ڡ`ლ)ﾞ \n" + + System.out.println("(♥◠‿◠)ﾉﾞ 启动成功 ლ(´ڡ`ლ)ﾞ \n" + " .-------. ____ __ \n" + " | _ _ \\ \\ \\ / / \n" + " | ( ' ) | \\ _. / ' \n" + diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java index 94c7c1f..c570c69 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java @@ -43,7 +43,7 @@ public class AllBroadHTMLController { return "broad/beforeLibrary"; } - //6 智能工厂二楼终检位置 + //6 智能工厂二楼终检位置——成品入库可视化平台 @GetMapping("/finalAssemblyProductionData") public String finalAssemblyProduction() { return "broad/finalAssemblyProductionData"; diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/FPBroadController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/FPBroadController.java index 4ce948c..7825a5b 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/FPBroadController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/FPBroadController.java @@ -42,10 +42,14 @@ public class FPBroadController { return JSONArray.toJSONString(service.fp_selectOrderExecution()); } - @PostMapping("/selectOrderExecutionPlan") + + + + + @PostMapping("/selectOrderExecutionPlan") @ApiOperation("订单执行") private String fp_selectOrderExecutionPlan() { - return JSONArray.toJSONString(service.fp_selectOrderExecutionPlan()); + return JSONArray.toJSONString(service.fp_selectOrderExecutionPlan()); } @@ -63,32 +67,43 @@ public class FPBroadController { } @PostMapping("/selectStationHourInfo") +// 每小时数据 底部列表 @ApiOperation("生产统计数据") private String fp_selectStationHourInfo() { return JSONArray.toJSONString(service.fp_selectStationHourInfo()); } - private Map map; + + @PostMapping("/selectStationHourInfoDay") + @ApiOperation("底部列表白天使用") + private String selectOrderExecutionDay() { + return JSONArray.toJSONString(service.fp_selectStationHourInfoDay()); + + } + + + private Map map; + { - map=new HashMap<>(); - map.put("A1","10.10.60.176"); - map.put("A2","10.10.60.177"); - map.put("B1","10.10.60.178"); - map.put("B2","10.10.60.179"); + map = new HashMap<>(); + map.put("A1", "10.10.60.176"); + map.put("A2", "10.10.60.177"); + map.put("B1", "10.10.60.178"); + map.put("B2", "10.10.60.179"); } @PostMapping("/selectDeviceState") @ApiOperation("设备状态查询") - private String selectDeviceState(){ + private String selectDeviceState() { Set strings = map.keySet(); - Map stateMap = null; + Map stateMap = null; try { - stateMap =new HashMap<>(); + stateMap = new HashMap<>(); - for (String key:strings) { - ProcessBuilder procBuilder = new ProcessBuilder("ping", map.get(key),"-w","2","-n","1"); + for (String key : strings) { + ProcessBuilder procBuilder = new ProcessBuilder("ping", map.get(key), "-w", "2", "-n", "1"); Process proc = procBuilder.start(); int exitValue = proc.waitFor(); - stateMap.put(key,exitValue); + stateMap.put(key, exitValue); } } catch (IOException e) { System.out.println(e.getMessage()); @@ -96,24 +111,24 @@ public class FPBroadController { } catch (InterruptedException e) { e.printStackTrace(); } - String json=JSONArray.toJSONString(stateMap); + String json = JSONArray.toJSONString(stateMap); return json; } @PostMapping("/selectFpStock") @ApiOperation("发泡库存统计") - public String selectFpStock(){ + public String selectFpStock() { return JSONArray.toJSONString(service.selectFpStock()); } @PostMapping("/selectTeamGroups") @ApiOperation("班组是早晚") - public String selectTeamGroups(){ - Integer state=iBroadDruidService.selectTeamGroups(); - Map map=new HashMap<>(); - map.put("班组",state); + public String selectTeamGroups() { + Integer state = iBroadDruidService.selectTeamGroups(); + Map map = new HashMap<>(); + map.put("班组", state); return JSONObject.toJSONString(map); } } diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/ZZJXBroadController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/ZZJXBroadController.java index 9126936..1602ea6 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/ZZJXBroadController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/ZZJXBroadController.java @@ -37,12 +37,13 @@ public class ZZJXBroadController { private String selectProductInByTeam(@PathVariable("id") int id) { if (id == 0) { - int tag = service.zz_countNightProductIn(); - if (tag > 0) { +// int tag = service.zz_countNightProductIn(); + Integer tag = service.zz_countNightProductInTag(); + if (tag!=null&&tag > 0) { return JSONArray.toJSONString(service.zz_selectProductInByTeamNight()); } return JSONArray.toJSONString(service.zz_selectProductInByTeam()); - +//return null; } else { return JSONArray.toJSONString(service.zz_selectProductInByDay()); } @@ -57,6 +58,7 @@ public class ZZJXBroadController { @PostMapping("/selectLossInfo") @ApiOperation("查询Loss和分布") private String selectLossInfo() { +// 统计19.30之后还有没有入库的条码 int tag = service.zz_countNightProductIn(); if (tag > 0) { return JSONArray.toJSONString(service.zz_selectLossInfo(2)); diff --git a/ruoyi-admin/src/main/resources/static/css/main-style.css b/ruoyi-admin/src/main/resources/static/css/main-style.css index a6c70c8..6764280 100644 --- a/ruoyi-admin/src/main/resources/static/css/main-style.css +++ b/ruoyi-admin/src/main/resources/static/css/main-style.css @@ -264,7 +264,7 @@ body.FoamerScada { body.Foamer2 { height: auto; width: auto; - background: url(../img/foamer2.jpg) no-repeat center fixed; + background: url(../img/foamer21.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; @@ -436,4 +436,4 @@ body.LinerDevice { -o-background-size: cover; background-size: 100% 100%; color: rgba(255,255,255,.95); -} \ No newline at end of file +} diff --git a/ruoyi-admin/src/main/resources/static/img/foamer2.jpg b/ruoyi-admin/src/main/resources/static/img/foamer2.jpg index bbd80c7..10cb6aa 100644 Binary files a/ruoyi-admin/src/main/resources/static/img/foamer2.jpg and b/ruoyi-admin/src/main/resources/static/img/foamer2.jpg differ diff --git a/ruoyi-admin/src/main/resources/static/img/foamer21.png b/ruoyi-admin/src/main/resources/static/img/foamer21.png new file mode 100644 index 0000000..f38dc99 Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/foamer21.png differ diff --git a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js index 409a2ed..90df130 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js +++ b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js @@ -70,11 +70,11 @@ $(() => { $.post("/broad/zz/selectLossInfo", {}, data => { data = JSON.parse(data) let LOSSOne = data.find(val => val.name == '1').qty - let LOSSTwo = data.find(val => val.name == '4').qty + LOSSOne = LOSSOne > 0 ? LOSSOne : 0 LOSS(LOSSOne) verticalBarChart({ xName: ["0-3分钟", "3-10分钟", ">10分钟"], - yData: [data.find(val => val.name == '2').qty, data.find(val => val.name == '3').qty, LOSSTwo], + yData: [data.find(val => val.name == '2').qty, data.find(val => val.name == '3').qty, data.find(val => val.name == '4').qty], }, document.getElementById("statisticOfAttribute")); }) // 标准节拍 diff --git a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js index 0c38bc2..b2e81ae 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js +++ b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js @@ -11,7 +11,7 @@ $(() => { // 目标 await $.post(url + "/selectProductInTarget", {}, data => { data = JSON.parse(data) - targetTop.tips = data.find(val => val.name == "进度目标").qty + targetTop.tips = data.find(val => val.name == "进度目标")?.qty }) // 终检一次不合格率目标 await $.post(url + "/selectOneBadRateMb", {}, data => { @@ -34,7 +34,7 @@ $(() => { }) // 产量 $.post(url + `/selectProductInByTeam/${yieldType}`, {}, data => { - data = JSON.parse(data) + data = JSON.parse(data || '{}') // 实际 targetTop.reality = data.map(val => val.qty).reduce((val1, val2) => val1 + val2, 0) total('#total', data.map(val => val.qty).reduce((val1, val2) => val1 + val2, 0)) @@ -52,8 +52,8 @@ $(() => { arr[0] = arr[0] - (arr.reduce((val1, val2) => val1 + val2, 0) - targetTop.tips) targetTop.targetArr = arr let num = 0 - arr.forEach((val,index) => { - if(data[index].qty){ + arr.forEach((val, index) => { + if (data[index].qty) { num += arr[index] } }) @@ -79,7 +79,7 @@ $(() => { } else { targetTop.rate = 0 } - targetTop.gap = targetTop.progress - targetTop.reality + targetTop.gap = targetTop.progress - targetTop.reality > 0 ? targetTop.progress - targetTop.reality : targetTop.reality - targetTop.progress barChartAndLineChartThree({ xName: xName, yDataOne: data.map(val => val.qty), @@ -235,4 +235,4 @@ const total = (el, val = 0) => { 合计：${val} ` $(el).html(html) -} \ No newline at end of file +} diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index cef62f3..a35baa6 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -9,3465 +9,4012 @@ var time4 = () => { } // 随机数 const random = (val = 1) => { - return Math.ceil(Math.random() * val) + return Math.ceil(Math.random() * val) } // 水平圆角带背景柱状图 const horizontalRoundedBarChartWithBackground = function (data, id) { - let charts = echarts.init(id); - if (!data) { - data = { - yName: ["设备001", "设备001", "设备001", "设备001", "设备001"], - xData: [53, 24, 66, 23, 100], - xDataName: "达成率", - } + let charts = echarts.init(id); + if (!data) { + data = { + yName: ["设备001", "设备001", "设备001", "设备001", "设备001"], + xData: [53, 24, 66, 23, 100], + xDataName: "达成率", } - let backGround = [] - data.xData.forEach(() => { - backGround.push(100) - }) - let option = { - grid: { - left: "0%", - right: "12%", - bottom: "0%", - top: "0%", - containLabel: true, + } + let backGround = [] + data.xData.forEach(() => { + backGround.push(100) + }) + let option = { + grid: { + left: "0%", + right: "12%", + bottom: "0%", + top: "0%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + textStyle: { + fontSize: 0.8 * vw + }, + formatter: function (params) { + return ( + params[0].name + + "
" + + "" + + params[0].seriesName + + " : " + params[0].value + '%' + ); + }, + }, + dataZoom: [], + xAxis: { + show: false, + type: "value", + }, + yAxis: [ + { + type: "category", + inverse: true, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "none", - }, - textStyle: { - fontSize: 0.8 * vw - }, - formatter: function (params) { - return ( - params[0].name + - "
" + - "" + - params[0].seriesName + - " : " + params[0].value + '%' - ); - }, + splitLine: { + show: false, }, - dataZoom: [], - xAxis: { - show: false, - type: "value", + axisTick: { + show: false, }, - yAxis: [ - { - type: "category", - inverse: true, - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: 0.75 * vw - }, - }, - splitLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLine: { - show: false, - }, - data: data.yName, - } - ], - series: [ - { - name: data.xDataName, - type: "bar", - zlevel: 1, - itemStyle: { - normal: { - barBorderRadius: 30, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "rgb(57,89,255,1)", - }, - { - offset: 1, - color: "rgb(46,200,207,1)", - }, - ]), - }, - }, - barWidth: vw, - data: data.xData, - label: { - show: true, - position: "right", - textStyle: { - color: "#fff", - fontSize: 0.75 * vw - }, - formatter: '{c}%' - }, - }, - { - name: "背景", - type: "bar", - barWidth: vw, - barGap: "-100%", - data: backGround, - itemStyle: { - normal: { - color: "rgba(24,31,68,1)", - barBorderRadius: 30, - }, - }, - }, - ], - }; - // if (data.xData?.length >= 3) { - // option.dataZoom.push({ - // show: true, - // type: 'slider', - // yAxisIndex: 0, - // width: 0.75 * vw, - // start: 0, - // end: 1 / (data.xData.length / 4) * 100, - // textStyle: { - // fontSize: 0, - // color: 'rgba(0,0,0,0)' - // } - // }) - // } - charts.setOption(option); - $(window).resize(charts.resize); + axisLine: { + show: false, + }, + data: data.yName, + } + ], + series: [ + { + name: data.xDataName, + type: "bar", + zlevel: 1, + itemStyle: { + normal: { + barBorderRadius: 30, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "rgb(57,89,255,1)", + }, + { + offset: 1, + color: "rgb(46,200,207,1)", + }, + ]), + }, + }, + barWidth: vw, + data: data.xData, + label: { + show: true, + position: "right", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + formatter: '{c}%' + }, + }, + { + name: "背景", + type: "bar", + barWidth: vw, + barGap: "-100%", + data: backGround, + itemStyle: { + normal: { + color: "rgba(24,31,68,1)", + barBorderRadius: 30, + }, + }, + }, + ], + }; + // if (data.xData?.length >= 3) { + // option.dataZoom.push({ + // show: true, + // type: 'slider', + // yAxisIndex: 0, + // width: 0.75 * vw, + // start: 0, + // end: 1 / (data.xData.length / 4) * 100, + // textStyle: { + // fontSize: 0, + // color: 'rgba(0,0,0,0)' + // } + // }) + // } + charts.setOption(option); + $(window).resize(charts.resize); } const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { - clearInterval(time1) - let charts = echarts.init(id); - if (!data) { - data = { - yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"], - yData: [41, 99, 32, 41, 24, 4, 16, 64, 18], - xDataName: "达成率", - status: [1, 1, 1, 1, 1, 1, 1, 1, 1] - } + clearInterval(time1) + let charts = echarts.init(id); + if (!data) { + data = { + yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"], + yData: [41, 99, 32, 41, 24, 4, 16, 64, 18], + xDataName: "达成率", + status: [1, 1, 1, 1, 1, 1, 1, 1, 1] } - let myColor = ["green", "red", "yellow", "blue", "#8B78F6"]; - let bgBar = [] - data.yData.forEach(() => { - bgBar.push(100) + } + let myColor = ["green", "red", "yellow", "blue", "#8B78F6"]; + let bgBar = [] + data.yData.forEach(() => { + bgBar.push(100) + }) + let option = { + grid: { + // left: "-10%", + left: "0%", + right: "8%", + bottom: "0%", + top: "0%", + containLabel: true, + }, + dataZoom: [], + xAxis: { + show: false, + }, + yAxis: [ + { + show: true, + data: data.yNameOne, + inverse: true, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + // margin:150, + fontSize: 0.75 * vw, + textStyle: { + textAlign: 'center' + }, + }, + }, + ], + series: [ + { + name: "条", + type: "bar", + yAxisIndex: 0, + data: data.yData, + barWidth: '80%', + itemStyle: { + normal: { + barBorderRadius: 30, + color: function (params) { + return myColor[data.status[params.dataIndex]]; + }, + }, + }, + }, + { + name: "框", + type: "bar", + yAxisIndex: 0, + barGap: "-100%", + data: bgBar, + barWidth: '80%', + label: { + show: true, + position: "right", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + formatter: function (val, index, e) { + return data.yData[val.dataIndex] + '%' + } + }, + itemStyle: { + normal: { + color: "none", + borderColor: "#00c1de", + borderWidth: 1, + barBorderRadius: 15, + }, + }, + }, + ], + }; + + if (data.yNameOne.length > 8) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + yAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.yNameOne.length / 9) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } }) - let option = { - grid: { - // left: "-10%", - left: "0%", - right: "8%", - bottom: "0%", - top: "0%", - containLabel: true, - }, - dataZoom: [], - xAxis: { - show: false, - }, - yAxis: [ - { - show: true, - data: data.yNameOne, - inverse: true, - axisLine: { - show: false, - }, - splitLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLabel: { - color: "#fff", - // margin:150, - fontSize: 0.75 * vw, - textStyle: { - textAlign: 'center' - }, - }, - }, - ], - series: [ - { - name: "条", - type: "bar", - yAxisIndex: 0, - data: data.yData, - barWidth: '80%', - itemStyle: { - normal: { - barBorderRadius: 30, - color: function (params) { - return myColor[data.status[params.dataIndex]]; - }, - }, - }, - }, - { - name: "框", - type: "bar", - yAxisIndex: 0, - barGap: "-100%", - data: bgBar, - barWidth: '80%', - label: { - show: true, - position: "right", - textStyle: { - color: "#fff", - fontSize: 0.75 * vw - }, - formatter: function (val, index, e) { - return data.yData[val.dataIndex] + '%' - } - }, - itemStyle: { - normal: { - color: "none", - borderColor: "#00c1de", - borderWidth: 1, - barBorderRadius: 15, - }, - }, - }, - ], - }; - if (data.yNameOne.length > 8) { - option.dataZoom.push({ - show: false, - type: 'slider', - bottom: '0%', - yAxisIndex: 0, - height: 12, - start: 0, - end: 1 / (data.yNameOne.length / 9) * 100, - textStyle: { - fontSize: 0, - color: 'rgba(0,0,0,0)' - } - }) - - let step = 1 / (data.yNameOne.length / 9) * 100 - time1 = setInterval(() => { - option.dataZoom[0].end += step - option.dataZoom[0].start += step - if (option.dataZoom[0].start >= 100) { - option.dataZoom[0].start = 0 - option.dataZoom[0].end = step - } - if (option.dataZoom[0].end >= 100) { - option.dataZoom[0].end = 100 - option.dataZoom[0].start = option.dataZoom[0].end - step - } - charts.setOption(option); - }, 6000) - // time() - } - charts.setOption(option); - $(window).resize(charts.resize); + let step = 1 / (data.yNameOne.length / 9) * 100 + time1 = setInterval(() => { + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + charts.setOption(option); + }, 6000) + // time() + } + charts.setOption(option); + $(window).resize(charts.resize); } // 柱状+折线图 const barChartAndLineChart = function (data, id, rotate = 0) { - let charts = echarts.init(id); - if (!data) { - data = { - xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], - yDataOne: [200, 382, 102, 267, 186, 315, 316], - yDataOneName: "成品数量", - yDataTwo: [382, 102, 186, 200, 102, 186, 315], - yDataTwoName: "成品数量", - } + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], + yDataOne: [200, 382, 102, 267, 186, 315, 316], + yDataOneName: "成品数量", + yDataTwo: [382, 102, 186, 200, 102, 186, 315], + yDataTwoName: "成品数量", } - let option = { + } + let option = { + tooltip: { + textStyle: { + fontSize: 0.8 * vw + } + }, + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + legend: { + show: false, + itemGap: 50, + data: ["注册总量", "最新注册量"], + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, + }, + axisLabel: { + rotate: rotate, + interval: 0, + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + data: data.xName, + }, + ], + yAxis: [ + { + type: "value", + min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, + }, + axisLabel: { + margin: 20, + textStyle: { + color: "#d1e6eb", + fontSize: 0.75 * vw + }, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: data.yDataOneName || '', + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#8fb9d7", + }, + { + offset: 1, + color: "#0F59E6", + }, + ]), + }, + borderColor: "#f0f", + }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + color: "#A5DBF3", + }, + }, tooltip: { - textStyle: { - fontSize: 0.8 * vw - } + show: false }, - grid: { - top: "15%", - left: "1%", - right: "1%", - bottom: "8%", - containLabel: true, + areaStyle: { + //区域填充样式 + normal: { + //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(12,120,249,0.4)", + }, + { + offset: 1, + color: "rgba(0,0,0, 0)", + }, + ], + false + ), + shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 + shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, }, - legend: { - show: false, - itemGap: 50, - data: ["注册总量", "最新注册量"], - textStyle: { - color: "#f9f9f9", - borderColor: "#fff", - }, + data: data.yDataOne || [], + }, + { + name: data.yDataTwoName, + type: "bar", + barWidth: vw, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + }, }, - dataZoom: [], - xAxis: [ - { - type: "category", - boundaryGap: true, - axisLine: { - show: true, - lineStyle: { - color: '#fff', - opacity: 0.3, - }, - }, - axisLabel: { - rotate: rotate, - interval: 0, - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#777777', - opacity: 0.3, - }, - }, - data: data.xName, - }, - ], - yAxis: [ - { - type: "value", - min: 0, - // max: 140, - splitNumber: 7, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#777777', - opacity: 0.3, - }, - }, - axisLine: { - show: true, - lineStyle: { - color: '#fff', - opacity: 0.3, - }, - }, - axisLabel: { - margin: 20, - textStyle: { - color: "#d1e6eb", - fontSize: 0.75 * vw - }, - }, - axisTick: { - show: false, - }, - }, - ], - series: [ - { - name: data.yDataOneName || '', - type: "line", - // smooth: true, //是否平滑曲线显示 - // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 - showAllSymbol: true, - symbol: "emptyCircle", - symbolSize: 6, - lineStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "#8fb9d7", - }, - { - offset: 1, - color: "#0F59E6", - }, - ]), - }, - borderColor: "#f0f", - }, - label: { - show: true, - position: "top", - textStyle: { - color: "#fff", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - normal: { - color: "#A5DBF3", - }, - }, - tooltip: { - show: false - }, - areaStyle: { - //区域填充样式 - normal: { - //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(12,120,249,0.4)", - }, - { - offset: 1, - color: "rgba(0,0,0, 0)", - }, - ], - false - ), - shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 - shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 - }, - }, - data: data.yDataOne || [], - }, - { - name: data.yDataTwoName, - type: "bar", - barWidth: vw, - label: { - show: true, - position: "top", - textStyle: { - color: "#fff", - }, - }, - itemStyle: { - normal: { - barBorderRadius: 5, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "#0CAFF6", - }, - { - offset: 1, - color: "#0F59E6", - }, - ]), - }, - }, - data: data.yDataTwo, - }, - ], - }; + itemStyle: { + normal: { + barBorderRadius: 5, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#0CAFF6", + }, + { + offset: 1, + color: "#0F59E6", + }, + ]), + }, + }, + data: data.yDataTwo, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } const barChartAndLineChartTwo = function (data, id) { - let charts = echarts.init(id); - if (!data) { - data = { - xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], - yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], - yDataOneName: "百分比", - yDataTwo: [382, 102, 186, 200, 102, 186, 315, 255, 527, 837, 587, 173], - yDataTwoName: "成品数量", - } + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], + yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], + yDataOneName: "百分比", + yDataTwo: [382, 102, 186, 200, 102, 186, 315, 255, 527, 837, 587, 173], + yDataTwoName: "成品数量", } - let option = { - grid: { - top: "15%", - left: "1%", - right: "1%", - bottom: "2%", - containLabel: true, + } + let option = { + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "2%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999', }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - crossStyle: { - color: '#999', - }, - label: { - fontSize: 0.5 * vw, - } - }, - textStyle: { - fontSize: 0.5 * vw, - } + label: { + fontSize: 0.5 * vw, + } + }, + textStyle: { + fontSize: 0.5 * vw, + } + }, + legend: { + data: [data.yDataOneName, data.yDataTwoName], + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + xAxis: [ + { + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, }, - legend: { - data: [data.yDataOneName, data.yDataTwoName], - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, + type: 'category', + data: data.xName, + axisPointer: { + type: 'shadow' + } + } + ], + yAxis: [ + { + type: 'value', + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, }, - xAxis: [ - { - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - }, - type: 'category', - data: data.xName, - axisPointer: { - type: 'shadow' - } - } - ], - yAxis: [ - { - type: 'value', - splitLine: { - lineStyle: { - color: "rgba(255,255,255,0.1)", - }, - }, - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - formatter: '{value} %' - } - }, - { - type: 'value', - splitLine: { - show: false, - }, - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - formatter: '{value} ' - } - } - ], - series: [ - { - name: data.yDataOneName, - type: 'bar', - data: data.yDataOne, - label: { - show: true, - position: ['10%', `50%`], - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - normal: { - color: '#0BB5FB', - }, - }, - }, - { - name: data.yDataTwoName, - type: 'line', - yAxisIndex: 1, - data: data.yDataTwo, - itemStyle: { - normal: { - color: '#0DB99D', - }, - }, - } - ] - }; + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value} %' + } + }, + { + type: 'value', + splitLine: { + show: false, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value} ' + } + } + ], + series: [ + { + name: data.yDataOneName, + type: 'bar', + data: data.yDataOne, + label: { + show: true, + position: ['10%', `50%`], + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + color: '#0BB5FB', + }, + }, + }, + { + name: data.yDataTwoName, + type: 'line', + yAxisIndex: 1, + data: data.yDataTwo, + itemStyle: { + normal: { + color: '#0DB99D', + }, + }, + } + ] + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } const barChartAndLineChartThree = function (data, id) { - let charts = echarts.init(id); - if (!data) { - data = { - xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], - yDataOne: [200, 382, 102, 267, 186, 315, 316], - yDataOneName: "实际产量", - yDataTwo: [382, 102, 186, 200, 102, 186, 315], - yDataTwoName: "目标产量", - } + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], + yDataOne: [200, 382, 102, 267, 186, 315, 316], + yDataOneName: "实际产量", + yDataTwo: [382, 102, 186, 200, 102, 186, 315], + yDataTwoName: "目标产量", } - let option = { - tooltip: { - trigger: 'axis', - axisPointer: { - crossStyle: { - color: '#999', - }, - label: { - fontSize: 0.5 * vw, - } - }, - textStyle: { - fontSize: 0.8 * vw - } + } + let option = { + tooltip: { + trigger: 'axis', + axisPointer: { + crossStyle: { + color: '#999', }, - grid: { - top: "15%", - left: "1%", - right: "1%", - bottom: "8%", - containLabel: true, + label: { + fontSize: 0.5 * vw, + } + }, + textStyle: { + fontSize: 0.8 * vw + } + }, + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + legend: { + show: true, + itemGap: 50, + data: [data.yDataOneName, data.yDataTwoName], + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + fontSize: 0.75 * vw + }, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, }, - legend: { - show: true, - itemGap: 50, - data: [data.yDataOneName, data.yDataTwoName], - textStyle: { - color: "#f9f9f9", - borderColor: "#fff", - fontSize: 0.75 * vw - }, + axisLabel: { + interval: 0, + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, }, - dataZoom: [], - xAxis: [ - { - type: "category", - boundaryGap: true, - axisLine: { - show: true, - lineStyle: { - color: '#fff', - opacity: 0.3, - }, - }, - axisLabel: { - interval: 0, - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#777777', - opacity: 0.3, - }, - }, - data: data.xName, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + data: data.xName, + }, + ], + yAxis: [ + { + type: "value", + min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, + }, + axisLabel: { + margin: 20, + textStyle: { + color: "#d1e6eb", + fontSize: 0.75 * vw + }, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "bar", + barWidth: '70%', + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + barBorderRadius: 5, + color: function (val) { + console.log() + if (data.yDataOne[val.dataIndex] >= data.yDataTwo[val.dataIndex]) { + return '#30e391' + } else { + return '#FE70A6' + } + // return "#0D81ED" }, - ], - yAxis: [ - { - type: "value", - min: 0, - // max: 140, - splitNumber: 7, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#777777', - opacity: 0.3, - }, - }, - axisLine: { - show: true, - lineStyle: { - color: '#fff', - opacity: 0.3, - }, - }, - axisLabel: { - margin: 20, - textStyle: { - color: "#d1e6eb", - fontSize: 0.75 * vw - }, - }, - axisTick: { - show: false, - }, - }, - ], - series: [ - { - name: data.yDataOneName, - type: "bar", - barWidth: '70%', - label: { - show: true, - position: "top", - textStyle: { - color: "#fff", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - normal: { - barBorderRadius: 5, - color: function (val) { - console.log() - if (data.yDataOne[val.dataIndex] >= data.yDataTwo[val.dataIndex]) { - return '#30e391' - } else { - return '#FE70A6' - } - // return "#0D81ED" - }, - }, - }, - data: data.yDataOne, - }, - { - name: data.yDataTwoName || '', - type: "line", - // smooth: true, //是否平滑曲线显示 - // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 - showAllSymbol: true, - symbol: "emptyCircle", - symbolSize: 6, - lineStyle: { - normal: { - width: 3, - color: '#fff', - }, - borderColor: "#f0f", - }, - label: { - show: true, - position: "top", - textStyle: { - color: "#fff", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - color: '#F2D770', - border: 0, - }, - // tooltip: { - // show: false - // }, - data: data.yDataTwo || [], - }, - ], - }; + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName || '', + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + width: 3, + color: '#fff', + }, + borderColor: "#f0f", + }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + color: '#F2D770', + border: 0, + }, + // tooltip: { + // show: false + // }, + data: data.yDataTwo || [], + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } const barChartAndLineChartFour = function (data, id) { - let charts = echarts.init(id); - if (!data) { - data = { - xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], - yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], - yDataOneName: "不良数", - yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5], - yDataTwoName: "一次装配不合格率", - yDataThree: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], - yDataThreeName: "目标", + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], + yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], + yDataOneName: "不良数", + yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5], + yDataTwoName: "一次装配不合格率", + yDataThree: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], + yDataThreeName: "目标", + } + } + let option = { + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "2%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999', + }, + label: { + fontSize: 0.5 * vw, } - } - let option = { - grid: { - top: "15%", - left: "1%", - right: "1%", - bottom: "2%", - containLabel: true, + }, + textStyle: { + width: 30, + fontSize: 0.5 * vw, + } + }, + legend: { + itemWidth: 3 * vw, + data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + xAxis: [ + { + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - crossStyle: { - color: '#999', - }, - label: { - fontSize: 0.5 * vw, - } - }, - textStyle: { - width: 30, - fontSize: 0.5 * vw, - } + type: 'category', + data: data.xName, + axisPointer: { + type: 'shadow' + } + } + ], + yAxis: [ + { + type: 'value', + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, }, - legend: { - itemWidth: 3 * vw, - data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value}' + } + }, + { + type: 'value', + splitLine: { + show: false, }, - xAxis: [ - { - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - }, - type: 'category', - data: data.xName, - axisPointer: { - type: 'shadow' - } - } - ], - yAxis: [ - { - type: 'value', - splitLine: { - lineStyle: { - color: "rgba(255,255,255,0.1)", - }, - }, - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - formatter: '{value}' - } + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value}% ' + } + } + ], + series: [ + { + name: data.yDataOneName, + type: 'bar', + data: data.yDataOne, + label: { + show: true, + position: 'top', + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + color: function (val) { + console.log() + if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]) { + return '#30e391' + } else { + return '#FE70A6' + } + // return "#0D81ED" }, - { - type: 'value', - splitLine: { - show: false, - }, - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, - formatter: '{value}% ' - } - } - ], - series: [ - { - name: data.yDataOneName, - type: 'bar', - data: data.yDataOne, - label: { - show: true, - position: 'top', - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - normal: { - color: function (val) { - console.log() - if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]) { - return '#30e391' - } else { - return '#FE70A6' - } - // return "#0D81ED" - }, - }, - }, - }, - { - name: data.yDataTwoName, - type: 'line', - yAxisIndex: 1, - data: data.yDataTwo, - itemStyle: { - normal: { - color: '#F9A25B', - }, - }, - }, - { - name: data.yDataThreeName, - type: 'line', - yAxisIndex: 1, - data: data.yDataThree, - itemStyle: { - normal: { - color: '#0DB99D', - }, - }, - } - ] - }; - if (Math.max(...data.yDataOne) <= 5) { - option.yAxis[0].max = 5 - } + }, + }, + }, + { + name: data.yDataTwoName, + type: 'line', + yAxisIndex: 1, + data: data.yDataTwo, + itemStyle: { + normal: { + color: '#F9A25B', + }, + }, + }, + { + name: data.yDataThreeName, + type: 'line', + yAxisIndex: 1, + data: data.yDataThree, + itemStyle: { + normal: { + color: '#0DB99D', + }, + }, + } + ] + }; + if (Math.max(...data.yDataOne) <= 5) { + option.yAxis[0].max = 5 + } - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } // 折线图 -const lineChart = function (data, id, unit = '',smooth=false,color='#14bd2d') { - 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: "提升百分比", - } +const lineChart = function (data, id, unit = '', smooth = false, color = '#14bd2d') { + 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: "提升百分比", } - let min = Math.ceil(Math.min(...data.yData)) - let max = Math.ceil(Math.max(...data.yData)) - let option = { - grid: { - top: '28%', - left: '5%', - right: '5%', - bottom: '0%', - containLabel: true, + } + let min = Math.ceil(Math.min(...data.yData)) + let max = Math.ceil(Math.max(...data.yData)) + let option = { + grid: { + top: '28%', + left: '5%', + right: '5%', + bottom: '0%', + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + label: { + show: true, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - label: { - show: true, - }, - }, + }, + }, + legend: { + top: '5%', + itemWidth: 20, + itemHeight: 10, + itemStyle: { + borderWidth: 1, + borderHeight: 1, + }, + formatter: function (val) { + return `${val} ` + }, + textStyle: { + fontSize: 0.75 * vw, + color: function () { + }, - legend: { - top: '5%', - itemWidth:20, - itemHeight:10, - itemStyle:{ - borderWidth:1, - borderHeight:1, - }, - formatter:function (val) { - return `${val} ` - }, + }, + }, + xAxis: { + type: 'category', + data: data.xName, + axisLine: { + show: true, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', //X轴文字颜色 + }, + }, + }, + yAxis: [ + { + name: '合格率', + min: (min - 2 < 0) ? 0 : min - 2, + max: (max + 2 > 100) ? 100 : max + 2, + type: 'value', + nameTextStyle: { + color: '#fff', + }, + splitLine: { + show: false, + lineStyle: { + color: '#eeeeee', + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + interval: 0, + textStyle: { + color: '#ffffff', + }, + }, + }, + ], + series: [ + { + name: data.yDataName, + type: 'line', + smooth: smooth, + showAllSymbol: true, //显示所有图形。 + symbol: 'circle', //标记的图形为实心圆 + symbolSize: 4, //标记的大小 + itemStyle: { + //折线拐点标志的样式 + color: color, + borderWidth: '2', + borderColor: color, + }, + lineStyle: { + color: color, + }, + label: { + //图形上的文本标签 + normal: { + formatter: `{c}${unit}`, + show: true, + position: "top", textStyle: { - fontSize: 0.75 * vw, - color: function () { - - }, + color: color, + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.5 * vw, }, + }, }, - xAxis: { - type: 'category', - data: data.xName, - axisLine: { - show: true, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: true, - textStyle: { - color: '#ffffff', //X轴文字颜色 - }, - }, - }, - yAxis: [ - { - name:'合格率', - min: (min - 2 < 0) ? 0 : min - 2, - max: (max + 2 > 100) ? 100 : max + 2, - type: 'value', - nameTextStyle: { - color: '#fff', - }, - splitLine: { - show: false, - lineStyle: { - color: '#eeeeee', - }, - }, - axisTick: { - show: false, - }, - axisLine: { - show: false, - }, - axisLabel: { - show: true, - interval:0, - textStyle: { - color: '#ffffff', - }, - }, - }, - ], - series: [ - { - name: data.yDataName, - type: 'line', - smooth:smooth, - showAllSymbol: true, //显示所有图形。 - symbol: 'circle', //标记的图形为实心圆 - symbolSize: 4, //标记的大小 - itemStyle: { - //折线拐点标志的样式 - color: color, - borderWidth: '2', - borderColor: color, - }, - lineStyle: { - color: color, - }, - label: { - //图形上的文本标签 - normal: { - formatter: `{c}${unit}`, - show: true, - position: "top", - textStyle: { - color: color, - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.5 * vw, - }, - }, - }, - data: data.yData, - }, - ], - }; + data: data.yData, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } const lineChartTwo = function (data, id, unit = '') { - let charts = echarts.init(id); - let color = ['#3094ea','#2fd032','#6ba72c','#7b6931','#8909E5'] - 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 charts = echarts.init(id); + let color = ['#3094ea', '#2fd032', '#6ba72c', '#7b6931', '#8909E5'] + 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.8 * vw, - }, - }, - }, - data: val.data, - } - }) - let option = { - grid: { - top: '20%', - left: '5%', - right: '5%', - bottom: '8%', - containLabel: true, + } + 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.8 * vw, + }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - label: { - show: true, - }, - }, + }, + 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%', - itemWidth:20, - itemHeight:10, - formatter:function (val) { - return `${val}` - }, - textStyle: { - fontSize: 0.75 * vw, - color: () => {}, - }, + }, + }, + legend: { + top: '5%', + itemWidth: 20, + itemHeight: 10, + formatter: function (val) { + return `${val}` + }, + textStyle: { + fontSize: 0.75 * vw, + color: () => { }, - xAxis: { - type: 'category', - data: data.xName, - axisLine: { - show: true, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: true, - textStyle: { - color: '#ffffff', //X轴文字颜色 - }, - }, + }, + }, + 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, - }; + }, + }, + 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); + charts.setOption(option); + $(window).resize(charts.resize); } -const lineChartThree = function (data, id, unit = '',smooth=false) { - 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: "提升百分比", - yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60], - yDataTwoName: "百分比" - } +const lineChartThree = function (data, id, unit = '', smooth = false) { + 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: "提升百分比", + yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60], + yDataTwoName: "百分比" } - let min = Math.ceil(Math.min(...data.yData,...(data.yDataTwo || []))) - let max = Math.ceil(Math.max(...data.yData,...(data.yDataTwo || []))) - let option = { - grid: { - top: '28%', - left: '5%', - right: '5%', - bottom: '0%', - containLabel: true, + } + let min = Math.ceil(Math.min(...data.yData, ...(data.yDataTwo || []))) + let max = Math.ceil(Math.max(...data.yData, ...(data.yDataTwo || []))) + let option = { + grid: { + top: '28%', + left: '5%', + right: '5%', + bottom: '0%', + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + label: { + show: true, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - label: { - show: true, - }, - }, + }, + }, + legend: { + top: '5%', + itemWidth: 20, + itemHeight: 10, + itemStyle: { + borderWidth: 1, + borderHeight: 1, + }, + formatter: function (val) { + return `${val} ` + }, + textStyle: { + fontSize: 0.75 * vw, + color: function () { + }, - legend: { - top: '5%', - itemWidth:20, - itemHeight:10, - itemStyle:{ - borderWidth:1, - borderHeight:1, - }, - formatter:function (val) { - return `${val} ` - }, + }, + }, + xAxis: { + type: 'category', + data: data.xName, + axisLine: { + show: true, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', //X轴文字颜色 + }, + }, + }, + yAxis: [ + { + name: '(元/台)', + min: (min - 2 < 0) ? 0 : min - 2, + max: (max + 2 > 100) ? 100 : max + 2, + type: 'value', + nameTextStyle: { + color: '#fff', + }, + splitLine: { + show: false, + lineStyle: { + color: '#eeeeee', + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + interval: 0, + textStyle: { + color: '#ffffff', + }, + }, + }, + ], + series: [ + { + name: data.yDataName, + type: 'line', + smooth: smooth, + showAllSymbol: true, //显示所有图形。 + symbol: 'circle', //标记的图形为实心圆 + symbolSize: 4, //标记的大小 + itemStyle: { + //折线拐点标志的样式 + color: '#14bd2d', + borderWidth: '2', + borderColor: '#14bd2d', + }, + lineStyle: { + color: '#14bd2d', + }, + label: { + //图形上的文本标签 + normal: { + formatter: `{c}${unit}`, + show: true, + position: "top", textStyle: { - fontSize: 0.75 * vw, - color: function () { - - }, + color: "#14bd2d", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.8 * vw, }, + }, }, - xAxis: { - type: 'category', - data: data.xName, - axisLine: { - show: true, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: true, - textStyle: { - color: '#ffffff', //X轴文字颜色 - }, - }, + data: data.yData, + }, + { + name: data.yDataTwoName, + type: 'line', + smooth: smooth, + showAllSymbol: true, //显示所有图形。 + symbol: 'circle', //标记的图形为实心圆 + symbolSize: 4, //标记的大小 + itemStyle: { + //折线拐点标志的样式 + color: '#3094ea', + borderWidth: '2', + borderColor: '#3094ea', }, - yAxis: [ - { - name:'(元/台)', - min: (min - 2 < 0) ? 0 : min - 2, - max: (max + 2 > 100) ? 100 : max + 2, - type: 'value', - nameTextStyle: { - color: '#fff', - }, - splitLine: { - show: false, - lineStyle: { - color: '#eeeeee', - }, - }, - axisTick: { - show: false, - }, - axisLine: { - show: false, - }, - axisLabel: { - show: true, - interval:0, - textStyle: { - color: '#ffffff', - }, - }, + lineStyle: { + color: '#3094ea', + }, + label: { + //图形上的文本标签 + normal: { + formatter: `{c}${unit}`, + show: true, + position: "top", + textStyle: { + color: "#3094ea", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.8 * vw, }, - ], - series: [ - { - name: data.yDataName, - type: 'line', - smooth:smooth, - showAllSymbol: true, //显示所有图形。 - symbol: 'circle', //标记的图形为实心圆 - symbolSize: 4, //标记的大小 - itemStyle: { - //折线拐点标志的样式 - color: '#14bd2d', - borderWidth: '2', - borderColor: '#14bd2d', - }, - lineStyle: { - color: '#14bd2d', - }, - label: { - //图形上的文本标签 - normal: { - formatter: `{c}${unit}`, - show: true, - position: "top", - textStyle: { - color: "#14bd2d", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.8 * vw, - }, - }, - }, - data: data.yData, - }, - { - name: data.yDataTwoName, - type: 'line', - smooth:smooth, - showAllSymbol: true, //显示所有图形。 - symbol: 'circle', //标记的图形为实心圆 - symbolSize: 4, //标记的大小 - itemStyle: { - //折线拐点标志的样式 - color: '#3094ea', - borderWidth: '2', - borderColor: '#3094ea', - }, - lineStyle: { - color: '#3094ea', - }, - label: { - //图形上的文本标签 - normal: { - formatter: `{c}${unit}`, - show: true, - position: "top", - textStyle: { - color: "#3094ea", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.8 * vw, - }, - }, - }, - areaStyle: { - normal: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色 - }, { - offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } - }, - }, - data: data.yDataTwo, - }, - ], - }; + }, + }, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色 + }, { + offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色 + }], + global: false // 缺省为 false + } + }, + }, + data: data.yDataTwo, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } // 饼图 const pieChart = function (data, id, unit = '次') { - let charts = echarts.init(id); - if (!data) { - data = [ - { - value: 285, - name: "类型1", + let charts = echarts.init(id); + if (!data) { + data = [ + { + value: 285, + name: "类型1", + }, + { + value: 410, + name: "类型2", + }, + { + value: 274, + name: "类型3", + }, + { + value: 235, + name: "类型4", + }, + ] + } + if (data.length === 0) { + data = [{ + value: 0, + name: '' + }] + } + let option = { + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + textStyle: { + fontSize: 0.8 * vw + } + }, + + series: [ + { + name: "访问来源", + type: "pie", + radius: "70%", + center: ["50%", "50%"], + colorBy: 'data', + // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050' + data: data, + roseType: "radius", + label: { + normal: { + formatter: `{b|{b}} \n {c|{c}${unit}}`, + rich: { + c: { + color: "rgb(241,246,104)", + fontSize: 0.75 * vw, + lineHeight: 5, + }, + b: { + color: "rgb(98,137,169)", + fontSize: 0.75 * vw, + height: 1.5 * vw, + }, }, - { - value: 410, - name: "类型2", - }, - { - value: 274, - name: "类型3", - }, - { - value: 235, - name: "类型4", - }, - ] - } - if (data.length === 0) { - data = [{ - value: 0, - name: '' - }] - } - let option = { - tooltip: { - trigger: "item", - formatter: "{b} : {c} ({d}%)", - textStyle: { - fontSize: 0.8 * vw - } + }, }, - - series: [ - { - name: "访问来源", - type: "pie", - radius: "70%", - center: ["50%", "50%"], - colorBy: 'data', - // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050' - data: data, - roseType: "radius", - label: { - normal: { - formatter: `{b|{b}} \n {c|{c}${unit}}`, - rich: { - c: { - color: "rgb(241,246,104)", - fontSize: 0.75 * vw, - lineHeight: 5, - }, - b: { - color: "rgb(98,137,169)", - fontSize: 0.75 * vw, - height: 1.5 * vw, - }, - }, - }, - }, - emphasis: { - label: { - fontSize: 0.75 * vw - } - }, - labelLine: { - normal: { - lineStyle: { - color: "rgb(98,137,169)", - }, - smooth: true, - length: 20, - length2: 20, - }, - }, + emphasis: { + label: { + fontSize: 0.75 * vw + } + }, + labelLine: { + normal: { + lineStyle: { + color: "rgb(98,137,169)", }, - ], - }; + smooth: true, + length: 20, + length2: 20, + }, + }, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } const pieChartTwo = function (data, id, unit = '次') { - let charts = echarts.init(id); - if (!data) { - data = [ - { - value: 285, - name: "类型1", + let charts = echarts.init(id); + if (!data) { + data = [ + { + value: 285, + name: "类型1", + }, + { + value: 410, + name: "类型2", + }, + { + value: 274, + name: "类型3", + }, + { + value: 235, + name: "类型4", + }, + ] + } + if (data.length === 0) { + data = [{ + value: 0, + name: '' + }] + } + let option = { + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + textStyle: { + fontSize: 0.8 * vw + } + }, + + series: [ + { + name: "访问来源", + type: "pie", + radius: "50%", + center: ["50%", "50%"], + colorBy: 'data', + // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050' + data: data, + roseType: "radius", + overflow: 'break', + label: { + overflow: 'break', + normal: { + overflow: 'break', + formatter: `{b|{b}} \n {c|{c}${unit}}`, + rich: { + c: { + color: "rgb(241,246,104)", + fontSize: 0.75 * vw, + lineHeight: 5, + }, + b: { + color: "rgb(98,137,169)", + fontSize: 0.75 * vw, + height: 1.5 * vw, + }, }, - { - value: 410, - name: "类型2", - }, - { - value: 274, - name: "类型3", - }, - { - value: 235, - name: "类型4", - }, - ] - } - if (data.length === 0) { - data = [{ - value: 0, - name: '' - }] - } - let option = { - tooltip: { - trigger: "item", - formatter: "{b} : {c} ({d}%)", - textStyle: { - fontSize: 0.8 * vw - } + }, }, - - series: [ - { - name: "访问来源", - type: "pie", - radius: "50%", - center: ["50%", "50%"], - colorBy: 'data', - // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050' - data: data, - roseType: "radius", - overflow:'break', - label: { - overflow:'break', - normal: { - overflow:'break', - formatter: `{b|{b}} \n {c|{c}${unit}}`, - rich: { - c: { - color: "rgb(241,246,104)", - fontSize: 0.75 * vw, - lineHeight: 5, - }, - b: { - color: "rgb(98,137,169)", - fontSize: 0.75 * vw, - height: 1.5 * vw, - }, - }, - }, - }, - emphasis: { - label: { - fontSize: 0.75 * vw - } - }, - labelLine: { - normal: { - lineStyle: { - color: "rgb(98,137,169)", - }, - smooth: true, - length: 5, - length2: 5, - }, - }, + emphasis: { + label: { + fontSize: 0.75 * vw + } + }, + labelLine: { + normal: { + lineStyle: { + color: "rgb(98,137,169)", }, - ], - }; + smooth: true, + length: 5, + length2: 5, + }, + }, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } // 垂直柱状图 const verticalBarChart = function (data, id, unit = '次') { - let charts = echarts.init(id); - if (!data) { - data = { - xName: ["0-3分钟", "3-10分钟", ">10分钟"], - yData: [254, 3254, 1654], - } + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["0-3分钟", "3-10分钟", ">10分钟"], + yData: [254, 3254, 1654], } - let option = { - tooltip: { - textStyle: { - fontSize: 0.8 * vw - } + } + let option = { + tooltip: { + textStyle: { + fontSize: 0.8 * vw + } + }, + grid: { + top: "10%", + left: "1%", + right: "1%", + bottom: "1%", + containLabel: true, + }, + xAxis: { + data: data.xName, + axisLine: { + lineStyle: { + color: "#0177d4", }, - grid: { - top: "10%", - left: "1%", - right: "1%", - bottom: "1%", - containLabel: true, + }, + axisLabel: { + color: "#fff", + fontSize: 0.8 * vw, + interval: 0, + }, + }, + yAxis: { + nameTextStyle: { + color: "#fff", + fontSize: 0.8 * vw, + }, + axisLine: { + lineStyle: { + color: "#0177d4", }, - xAxis: { - data: data.xName, - axisLine: { - lineStyle: { - color: "#0177d4", - }, - }, - axisLabel: { - color: "#fff", - fontSize: 0.8 * vw, - interval: 0, - }, + }, + axisLabel: { + color: "#fff", + fontSize: 0.8 * vw, + }, + splitLine: { + show: false, + lineStyle: { + color: "#0177d4", }, - yAxis: { - nameTextStyle: { - color: "#fff", - fontSize: 0.8 * vw, - }, - axisLine: { - lineStyle: { - color: "#0177d4", - }, - }, - axisLabel: { - color: "#fff", - fontSize: 0.8 * vw, - }, - splitLine: { - show: false, - lineStyle: { - color: "#0177d4", - }, - }, + }, + }, + series: [ + { + type: "bar", + barWidth: data.yData.length < 4 ? 2 * vw : '75%', + label: { + show: true, + position: 'top', + textStyle: { + fontSize: 0.8 * vw, + color: '#fff' + }, + formatter: `{c}${unit}` }, - series: [ - { - type: "bar", - barWidth: data.yData.length<4? 2*vw:'75%', - label: { - show: true, - position: 'top', - textStyle: { - fontSize: 0.8 * vw, - color: '#fff' - }, - formatter: `{c}${unit}` + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00b0ff", }, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "#00b0ff", - }, - { - offset: 0.8, - color: "#7052f4", - }, - ], - false - ), - }, + { + offset: 0.8, + color: "#7052f4", }, - data: data.yData, - }, - ], - }; + ], + false + ), + }, + }, + data: data.yData, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } // 多个垂直柱状图 -const multipleVerticalBarChart = function (data, id) { - let charts = echarts.init(id); - if (!data) { - data = { - xName: [ - "7:00", - "8:00", - "9:00", - "10:00", - "11:00", - "12:00", - ], - yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6], - yDataOneName: "制氢", - yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6], - yDataTwoName: "发电", - yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6], - yDataThreeName: "充装", - } +const multipleVerticalBarChart1 = function (data, id) { + let charts = echarts.init(id); + let num1 = data.yDataOne.slice(0,4) + let num2 = data.yDataTwo.slice(0,4) + let num3 = data.yDataThree.slice(0,4) + num1 = num1.map(e => { + if (e > 14) { + return 14 + } else if (e < 10) { + return 10 + } else { + return e } - let option = { - tooltip: { - //提示框组件 - tooltip: { - trigger: "axis", - axisPointer: { - lineStyle: { - color: "#57617B", - }, - }, - }, - // trigger: "axis", - // formatter: `{b}
{a0}: {c0}
{a1}: {c1}`, - // axisPointer: { - // type: "shadow", - // label: { - // backgroundColor: "#6a7985", - // }, - // }, - // textStyle: { - // color: "#fff", - // fontStyle: "normal", - // fontFamily: "微软雅黑", - // fontSize: 12, - // }, + }) + num2 = num2.map(e => { + if (e > 14) { + return 14 + } else if (e < 10) { + return 10 + } else { + return e + } + }) + num3 = num3.map(e => { + if (e > 14) { + return 14 + } else if (e < 10) { + return 10 + } else { + return e + } + }) + if (!data) { + data = { + xName: [ + "7:00", + "8:00", + "9:00", + "10:00", + "11:00", + "12:00", + ], + yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6], + yDataOneName: "制氢", + yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6], + yDataTwoName: "发电", + yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6], + yDataThreeName: "充装", + } + } + let option = { + tooltip: { + //提示框组件 + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, }, - grid: { - left: "1%", - right: "4%", - bottom: "0", - top: 30, - padding: "0 0 10 0", - containLabel: true, + }, + }, + grid: { + left: "1%", + right: "4%", + bottom: "0", + top: 30, + padding: "0 0 10 0", + containLabel: true, + }, + legend: { + //图例组件，颜色和名字 + right: 10, + top: 0, + itemGap: 16, + itemWidth: vw, + itemHeight: 0.6 * vw, + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, //坐标轴两边留白 + data: ['A1', 'A2', 'A3', 'A4'], + axisLabel: { + show: true, + color: '#fff' }, - legend: { - //图例组件，颜色和名字 - right: 10, - top: 0, - itemGap: 16, - itemWidth: vw, - itemHeight: 0.6 * vw, - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, + axisTick: { + //坐标轴刻度相关设置。 + show: false, }, - dataZoom: [], - xAxis: [ - { - type: "category", - boundaryGap: true, //坐标轴两边留白 - data: data.xName, - axisLabel: { - show: true, - color: '#fff' - }, - axisTick: { - //坐标轴刻度相关设置。 - show: false, - }, - axisLine: { - //坐标轴轴线相关设置 - lineStyle: { - color: "#fff", - opacity: 0.2, - }, - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#777777', - opacity: 0.3, - }, - }, - }, - ], - yAxis: { - type: "value", - splitNumber: 5, - max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5, - axisLabel: { - show: true, - color: '#fff' - }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#777777', - opacity: 0.3, - }, - }, + axisLine: { + //坐标轴轴线相关设置 + lineStyle: { + color: "#fff", + opacity: 0.2, + }, }, - series: [ - { - name: data.yDataOneName, - type: "bar", - data: data.yDataOne, - barWidth: 1 * vw, - barGap: 0, //柱间距离 - label: { - //图形上的文本标签 - normal: { - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - itemStyle: { - //图形样式 - normal: { - barBorderRadius: [5, 5, 0, 0], - color: { - x: 0, - y: 0, - x2: 0, - y2: 1, - type: 'linear', - global: false, - colorStops: [ - { - offset: 0, - color: 'rgb(21, 148, 244)', - }, - { - offset: 1, - color: 'rgb(13, 48, 243)', - }, - ], - }, - }, - }, - }, - { - name: data.yDataTwoName, - type: "bar", - data: data.yDataTwo, - barWidth: 1 * vw, - barGap: 0.5, //柱间距离 - label: { - //图形上的文本标签 - normal: { - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - itemStyle: { - //图形样式 - normal: { - barBorderRadius: [5, 5, 0, 0], - color: { - x: 0, - y: 0, - x2: 0, - y2: 1, - type: 'linear', - global: false, - colorStops: [ - { - offset: 0, - color: '#0DCEB1', - }, - { - offset: 1, - color: '#14A15A', - }, - ], - }, - }, - }, - }, - { - name: data.yDataThreeName, - type: "bar", - data: data.yDataThree, - barWidth: 1 * vw, - barGap: 0.5, //柱间距离 - label: { - //图形上的文本标签 - normal: { - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - itemStyle: { - //图形样式 - normal: { - barBorderRadius: [5, 5, 0, 0], - color: "rgba(26, 99, 74, 0.7)", - }, - }, - }, - ], - }; - - if (data?.xName?.length >= 4) { - option.dataZoom.push({ + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + }, + ], + yAxis: { + type: "value", + splitNumber: 5, + min: 10, + max: 14, + axisLabel: { + show: true, + color: '#fff' + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + }, + series: [ + { + name: data.yDataOneName, + type: "bar", + data: data.yDataOne, + barWidth: 1 * vw, + barGap: 0, //柱间距离 + label: { + //图形上的文本标签 + normal: { show: true, - type: 'slider', - bottom: '0%', - xAxisIndex: 0, - height: 12, - start: 0, - end: 1 / (data.xName.length / 4) * 100, + position: "top", textStyle: { - fontSize: 0, - color: 'rgba(0,0,0,0)' - } - }) - option.grid.bottom = '7%' - } - charts.setOption(option); - $(window).resize(charts.resize); + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: 'linear', + global: false, + colorStops: [ + { + offset: 0, + color: 'rgb(21, 148, 244)', + }, + { + offset: 1, + color: 'rgb(13, 48, 243)', + }, + ], + }, + }, + }, + }, + { + name: data.yDataTwoName, + type: "bar", + data: data.yDataTwo, + barWidth: 1 * vw, + barGap: 0.5, //柱间距离 + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: 'linear', + global: false, + colorStops: [ + { + offset: 0, + color: '#0DCEB1', + }, + { + offset: 1, + color: '#14A15A', + }, + ], + }, + }, + }, + }, + { + name: data.yDataThreeName, + type: "bar", + data: data.yDataThree, + barWidth: 1 * vw, + barGap: 0.5, //柱间距离 + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: "rgba(26, 99, 74, 0.7)", + }, + }, + }, + ], + }; + + if (data?.xName?.length >= 4) { + option.dataZoom.push({ + show: true, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.xName.length / 4) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + option.grid.bottom = '7%' + } + charts.setOption(option); + $(window).resize(charts.resize); } -const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '',margin=20,isColor=true) { - let charts = echarts.init(id); - if (!data) { - data = { - xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], - yDataOne: [22, 52, 55, 12, 35, 44, 66], - yDataOneName: 'a1', - yDataTwo: [32, 42, 50, 22, 30, 40, 52], - yDataTwoName: "a2", - } +const multipleVerticalBarChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: [ + "7:00", + "8:00", + "9:00", + "10:00", + "11:00", + "12:00", + ], + yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6], + yDataOneName: "制氢", + yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6], + yDataTwoName: "发电", + yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6], + yDataThreeName: "充装", } - let option = { - grid: { - top: "20%", - left: "1%", - right: "1%", - bottom: "1%", - containLabel: true, + } + let option = { + tooltip: { + //提示框组件 + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } + }, + // trigger: "axis", + // formatter: `{b}
{a0}: {c0}
{a1}: {c1}`, + // axisPointer: { + // type: "shadow", + // label: { + // backgroundColor: "#6a7985", + // }, + // }, + // textStyle: { + // color: "#fff", + // fontStyle: "normal", + // fontFamily: "微软雅黑", + // fontSize: 12, + // }, + }, + grid: { + left: "1%", + right: "4%", + bottom: "0", + top: 30, + padding: "0 0 10 0", + containLabel: true, + }, + legend: { + //图例组件，颜色和名字 + right: 10, + top: 0, + itemGap: 16, + itemWidth: vw, + itemHeight: 0.6 * vw, + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, //坐标轴两边留白 + data: data.xName, + axisLabel: { + show: true, + color: '#fff' }, - legend: { - right:'0', - data: [data.yDataOneName, data.yDataTwoName], - textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", - }, + axisTick: { + //坐标轴刻度相关设置。 + show: false, }, - xAxis: [ - { - type: 'category', - axisTick: {show: false}, - axisLabel: { - rotate: rotate, - margin: margin, - textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", - }, - }, - data: data.xName - } - ], - yAxis: [ - { - axisLabel: { - textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", - }, - }, - splitLine: { - lineStyle: { - color: "rgba(255,255,255,0.1)", - }, - }, - type: 'value' - } - ], - series: [ - { - name: data.yDataOneName, - type: 'bar', - barGap: 0, - emphasis: { - focus: 'series' - }, - barWidth: '30%', - itemStyle: { - //图形样式 - normal: { - color: isColor? '#db8151': "#64BCEC", - }, - }, - label: { - show: true, - position: "top", - formatter: `{c}${unit}`, - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - data: data.yDataOne - }, - { - name: data.yDataTwoName, - type: 'bar', - emphasis: { - focus: 'series' - }, - barWidth: '30%', - barGap: '40%', - label: { - show: true, - position: "top", - formatter: `{c}${unit}`, - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - //图形样式 - normal: { - color: isColor? '#9ce375': "#4FD3B9", - }, - }, - data: data.yDataTwo - }, - ] - }; - - if (data?.length >= 3) { - option.dataZoom.push({ + axisLine: { + //坐标轴轴线相关设置 + lineStyle: { + color: "#fff", + opacity: 0.2, + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + }, + ], + yAxis: { + type: "value", + splitNumber: 5, + max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5, + axisLabel: { + show: true, + color: '#fff' + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + }, + series: [ + { + name: data.yDataOneName, + type: "bar", + data: data.yDataOne, + barWidth: 1 * vw, + barGap: 0, //柱间距离 + label: { + //图形上的文本标签 + normal: { show: true, - type: 'slider', - xAxisIndex: 0, - width: 12, - start: 0, - end: 1 / (data.length / 3) * 100, + position: "top", textStyle: { - fontSize: 0, - } - }) + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: 'linear', + global: false, + colorStops: [ + { + offset: 0, + color: 'rgb(21, 148, 244)', + }, + { + offset: 1, + color: 'rgb(13, 48, 243)', + }, + ], + }, + }, + }, + }, + { + name: data.yDataTwoName, + type: "bar", + data: data.yDataTwo, + barWidth: 1 * vw, + barGap: 0.5, //柱间距离 + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: 'linear', + global: false, + colorStops: [ + { + offset: 0, + color: '#0DCEB1', + }, + { + offset: 1, + color: '#14A15A', + }, + ], + }, + }, + }, + }, + { + name: data.yDataThreeName, + type: "bar", + data: data.yDataThree, + barWidth: 1 * vw, + barGap: 0.5, //柱间距离 + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: "rgba(26, 99, 74, 0.7)", + }, + }, + }, + ], + }; + + if (data?.xName?.length >= 4) { + option.dataZoom.push({ + show: true, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.xName.length / 4) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + option.grid.bottom = '7%' + } + charts.setOption(option); + $(window).resize(charts.resize); +} +const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '', margin = 20, isColor = true) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], + yDataOne: [22, 52, 55, 12, 35, 44, 66], + yDataOneName: 'a1', + yDataTwo: [32, 42, 50, 22, 30, 40, 52], + yDataTwoName: "a2", } - charts.setOption(option); - $(window).resize(charts.resize); + } + let option = { + grid: { + top: "20%", + left: "1%", + right: "5%", + bottom: "1%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + right: '0', + data: [data.yDataOneName, data.yDataTwoName], + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + xAxis: [ + { + type: 'category', + axisTick: {show: false}, + axisLabel: { + rotate: rotate, + margin: margin, + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + data: data.xName + } + ], + yAxis: [ + { + axisLabel: { + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, + }, + type: 'value' + } + ], + series: [ + { + name: data.yDataOneName, + type: 'bar', + barGap: 0, + emphasis: { + focus: 'series' + }, + barWidth: '30%', + barMaxWidth: '50px', + itemStyle: { + //图形样式 + normal: { + color: isColor ? '#db8151' : "#64BCEC", + }, + }, + label: { + show: true, + position: "top", + formatter: `{c}${unit}`, + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + data: data.yDataOne + }, + { + name: data.yDataTwoName, + type: 'bar', + emphasis: { + focus: 'series' + }, + barWidth: '30%', + barMaxWidth: '50px', + barGap: '40%', + label: { + show: true, + position: "top", + formatter: `{c}${unit}`, + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: isColor ? '#9ce375' : "#4FD3B9", + }, + }, + data: data.yDataTwo + }, + ] + }; + + if (data?.length >= 3) { + option.dataZoom.push({ + show: true, + type: 'slider', + xAxisIndex: 0, + width: 12, + start: 0, + end: 1 / (data.length / 3) * 100, + textStyle: { + fontSize: 0, + } + }) + } + charts.setOption(option); + $(window).resize(charts.resize); } const multipleVerticalBarChartThree = function (data, id, rotate = 0) { - clearInterval(time4) - let charts = echarts.init(id); - if (!data) { - data = { - xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'], - yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66], - yDataOneName: 'a1', - yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66], - yDataTwoName: "a2", - yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66], - yDataThreeName: "a3", - yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66], - yDataFourName: "a4", - } + clearInterval(time4) + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'], + yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66], + yDataOneName: 'a1', + yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66], + yDataTwoName: "a2", + yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66], + yDataThreeName: "a3", + yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66], + yDataFourName: "a4", } - let option = { - grid: { - top: "20%", - left: "1%", - right: "1%", - bottom: "1%", - containLabel: true, + } + let option = { + grid: { + top: "20%", + left: "1%", + right: "1%", + bottom: "1%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName], + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + dataZoom: [], + xAxis: [ + { + type: 'category', + axisTick: {show: false}, + axisLabel: { + rotate: rotate, + margin: 20, + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } + data: data.xName + } + ], + yAxis: [ + { + axisLabel: { + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, }, - legend: { - data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName], - textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", - }, + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, }, - dataZoom: [], - xAxis: [ - { - type: 'category', - axisTick: {show: false}, - axisLabel: { - rotate: rotate, - margin: 20, - textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", - }, - }, - data: data.xName - } - ], - yAxis: [ - { - axisLabel: { - textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", - }, - }, - splitLine: { - lineStyle: { - color: "rgba(255,255,255,0.1)", - }, - }, - type: 'value' - } - ], - series: [ - { - name: data.yDataOneName, - type: 'bar', - barGap: 0, - emphasis: { - focus: 'series' - }, - itemStyle: { - //图形样式 - normal: { - color: "#1FEDCA", - }, - }, - label: { - show: true, - position: "top", - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - data: data.yDataOne - }, - { - name: data.yDataTwoName, - type: 'bar', - emphasis: { - focus: 'series' - }, - label: { - show: true, - position: "top", - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - //图形样式 - normal: { - color: "#E65454", - }, - }, - data: data.yDataTwo - }, - { - name: data.yDataThreeName, - type: 'bar', - emphasis: { - focus: 'series' - }, - label: { - show: true, - position: "top", - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - //图形样式 - normal: { - color: "#351865", - }, - }, - data: data.yDataThree - }, - { - name: data.yDataFourName, - type: 'bar', - emphasis: { - focus: 'series' - }, - label: { - show: true, - position: "top", - textStyle: { - color: "rgba(255,255,255,0.5)", - fontSize: 0.75 * vw - }, - }, - itemStyle: { - //图形样式 - normal: { - color: "#4b7232", - }, - }, - data: data.yDataFour - }, - ] - }; + type: 'value' + } + ], + series: [ + { + name: data.yDataOneName, + type: 'bar', + barGap: 0, + emphasis: { + focus: 'series' + }, + itemStyle: { + //图形样式 + normal: { + color: "#1FEDCA", + }, + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + data: data.yDataOne + }, + { + name: data.yDataTwoName, + type: 'bar', + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: "#E65454", + }, + }, + data: data.yDataTwo + }, + { + name: data.yDataThreeName, + type: 'bar', + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: "#351865", + }, + }, + data: data.yDataThree + }, + { + name: data.yDataFourName, + type: 'bar', + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: "#4b7232", + }, + }, + data: data.yDataFour + }, + ] + }; - if (data.yDataOne.length > 7) { - option.dataZoom.push({ - show: false, - type: 'slider', - bottom: '0%', - xAxisIndex: 0, - height: 12, - start: 0, - end: 1 / (data.yDataOne.length / 6) * 100, - textStyle: { - fontSize: 0, - color: 'rgba(0,0,0,0)' - } - }) + if (data.yDataOne.length > 7) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.yDataOne.length / 6) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) - let step = 1 / (data.yDataOne.length / 6) * 100 - time4 = setInterval(() => { - option.dataZoom[0].end += step - option.dataZoom[0].start += step - if (option.dataZoom[0].start >= 100) { - option.dataZoom[0].start = 0 - option.dataZoom[0].end = step - } - if (option.dataZoom[0].end >= 100) { - option.dataZoom[0].end = 100 - option.dataZoom[0].start = option.dataZoom[0].end - step - } - charts.setOption(option); - }, 6000) - // time() - } - charts.setOption(option); - $(window).resize(charts.resize); + let step = 1 / (data.yDataOne.length / 6) * 100 + time4 = setInterval(() => { + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + charts.setOption(option); + }, 6000) + // time() + } + charts.setOption(option); + $(window).resize(charts.resize); } // 单个垂直柱状图 const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') { - clearInterval(time3) - let charts = echarts.init(id); - if (!data) { - data = { - xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], - yData: [12, 20, 11, 30, 14, 80, 50], - } + clearInterval(time3) + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], + yData: [12, 20, 11, 30, 14, 80, 50], } - let left = () => { - if (vw < 10) return '18%' - return '10%' - } - let option = { - grid: { - top: "10%", - left: left(), - right: "5%", - bottom: bottom, - // containLabel: true + } + let left = () => { + if (vw < 10) return '18%' + return '10%' + } + let option = { + grid: { + top: "10%", + left: left(), + right: "5%", + bottom: bottom, + // containLabel: true + }, + dataZoom: [], + xAxis: { + data: data.xName, + axisLine: { + lineStyle: { + color: "#0177d4", }, - dataZoom: [], - xAxis: { - data: data.xName, - axisLine: { - lineStyle: { - color: "#0177d4", - }, - }, - axisLabel: { - color: "#fff", - fontSize: 0.5 * vw, - interval: 0, - rotate: rotate, - }, + }, + axisLabel: { + color: "#fff", + fontSize: 0.5 * vw, + interval: 0, + rotate: rotate, + }, + }, + yAxis: { + nameTextStyle: { + color: "#fff", + fontSize: 16, + }, + axisLine: { + lineStyle: { + color: "#0177d4", }, - yAxis: { - nameTextStyle: { - color: "#fff", - fontSize: 16, - }, - axisLine: { - lineStyle: { - color: "#0177d4", - }, - }, - axisLabel: { - color: "#fff", - fontSize: 16, - }, - splitLine: { - show: false, - lineStyle: { - color: "#0177d4", - }, - }, + }, + axisLabel: { + color: "#fff", + fontSize: 16, + }, + splitLine: { + show: false, + lineStyle: { + color: "#0177d4", }, - series: [ - { - type: "bar", - barWidth: 1 * vw, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "#00b0ff", - }, - { - offset: 0.8, - color: "#7052f4", - }, - ], - false - ), - }, + }, + }, + series: [ + { + type: "bar", + barWidth: 1 * vw, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00b0ff", }, - label: { - show: true, - position: "top", - textStyle: { - color: "#fff", - fontSize: 0.75 * vw - }, + { + offset: 0.8, + color: "#7052f4", }, - data: data.yData, - }, - ], - }; - if (data.yData.length > 8) { - option.dataZoom.push({ - show: false, - type: 'slider', - bottom: '0%', - xAxisIndex: 0, - height: 12, - start: 0, - end: 1 / (data.yData.length / 9) * 100, - textStyle: { - fontSize: 0, - color: 'rgba(0,0,0,0)' - } - }) + ], + false + ), + }, + }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + data: data.yData, + }, + ], + }; + if (data.yData.length > 8) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.yData.length / 9) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) - let step = 1 / (data.yData.length / 9) * 100 - time3 = setInterval(() => { - option.dataZoom[0].end += step - option.dataZoom[0].start += step - if (option.dataZoom[0].start >= 100) { - option.dataZoom[0].start = 0 - option.dataZoom[0].end = step - } - if (option.dataZoom[0].end >= 100) { - option.dataZoom[0].end = 100 - option.dataZoom[0].start = option.dataZoom[0].end - step - } - charts.setOption(option); - }, 6000) - // time() - } - charts.setOption(option); - $(window).resize(charts.resize); + let step = 1 / (data.yData.length / 9) * 100 + time3 = setInterval(() => { + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + charts.setOption(option); + }, 6000) + // time() + } + charts.setOption(option); + $(window).resize(charts.resize); } const singleVerticalBarChartTwo = function (data, id) { - clearInterval(time2) - let time = () => { + clearInterval(time2) + let time = () => { + } + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'], + yData: [38, 60, 40, 55, 42, 39, 45, 40], + yImg: ['', '', '', '', '', '', '', ''], } - let charts = echarts.init(id); - if (!data) { - data = { - xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'], - yData: [38, 60, 40, 55, 42, 39, 45, 40], - yImg: ['', '', '', '', '', '', '', ''], - } - } - let bottom = data.yData.map(val => 1) - let option = { - backgroundColor: 'rgba(0,0,0,0)', - color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'], - grid: { - top: "20%", - bottom: "15%", - right: "5%" + } + let bottom = data.yData.map(val => 1) + let option = { + backgroundColor: 'rgba(0,0,0,0)', + color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'], + grid: { + top: "20%", + bottom: "15%", + right: "5%" + }, + dataZoom: [], + xAxis: { + margin: 10, + nameTextStyle: { + color: '#c0c3cd', + padding: [0, 0, -10, 0], + fontSize: 14, + }, + axisLabel: { + color: '#c0c3cd', //X轴文字 + fontSize: 14, + interval: 0, + margin: 20, + rotate: -20, + }, + axisTick: { + lineStyle: { + color: '#0B1535', + width: 1, }, - dataZoom: [], - xAxis: { - margin: 10, - nameTextStyle: { - color: '#c0c3cd', - padding: [0, 0, -10, 0], - fontSize: 14, - }, - axisLabel: { - color: '#c0c3cd', //X轴文字 - fontSize: 14, - interval: 0, - margin: 20, - rotate: -20, - }, - axisTick: { - lineStyle: { - color: '#0B1535', - width: 1, - }, - show: false, - }, - splitLine: { - show: false, - }, - axisLine: { - lineStyle: { - color: '#384267', - width: 1, - type: 'dashed', - }, - show: true, - }, - data: data.xName, - type: 'category', + show: false, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: '#384267', + width: 1, + type: 'dashed', }, - yAxis: { - type: 'value', - nameTextStyle: { - color: '#c0c3cd', - padding: [0, 0, -10, 0], - fontSize: 14, - }, - axisLabel: { - color: '#c0c3cd', //Y轴文字 - fontSize: 14, - }, - axisTick: { - lineStyle: { - color: '#384267', - width: 1, - }, - show: true, - }, - splitLine: { - show: true, - lineStyle: { - color: '#384267', - type: 'line', - }, - }, - axisLine: { - lineStyle: { - color: '#fff', - width: 1, - type: 'line', - }, - show: false, - }, + show: true, + }, + data: data.xName, + type: 'category', + }, + yAxis: { + type: 'value', + nameTextStyle: { + color: '#c0c3cd', + padding: [0, 0, -10, 0], + fontSize: 14, + }, + axisLabel: { + color: '#c0c3cd', //Y轴文字 + fontSize: 14, + }, + axisTick: { + lineStyle: { + color: '#384267', + width: 1, }, - series: [ - { - data: data.yData, - type: 'bar', - barMaxWidth: 'auto', - barWidth: 1.5 * vw, - itemStyle: { - color: function (val) { - if (data.yData.length - val.dataIndex === 1) { - return 'red' - } else if (data.yData.length - val.dataIndex === 2) { - return 'yellow' + show: true, + }, + splitLine: { + show: true, + lineStyle: { + color: '#384267', + type: 'line', + }, + }, + axisLine: { + lineStyle: { + color: '#fff', + width: 1, + type: 'line', + }, + show: false, + }, + }, + series: [ + { + data: data.yData, + type: 'bar', + barMaxWidth: 'auto', + barWidth: 1.5 * vw, + itemStyle: { + color: function (val) { + if (data.yData.length - val.dataIndex === 1) { + return 'red' + } else if (data.yData.length - val.dataIndex === 2) { + return 'yellow' - } else { - return '#35AAFE' - } - } - }, - label: { - normal: { - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - } - }, - { - data: data.yData, - type: 'pictorialBar', - barMaxWidth: vw, - symbolPosition: 'end', - symbol: 'diamond', - itemStyle: { - color: function (val) { - if (data.yData.length - val.dataIndex === 1) { - return 'red' - } else if (data.yData.length - val.dataIndex === 2) { - return 'yellow' - - } else { - return '#66c8ff' - } - } - }, - symbolOffset: ['25%', '-50%'], - symbolSize: [1.5 * vw, 10], - zlevel: 4, - }, - { - data: bottom, - type: 'pictorialBar', - barMaxWidth: vw, - symbolPosition: 'end', - symbol: 'diamond', - itemStyle: { - color: function (val) { - if (data.yData.length - val.dataIndex === 1) { - return 'red' - } else if (data.yData.length - val.dataIndex === 2) { - return 'yellow' - - } else { - return '#66c8ff' - } - } - }, - symbolOffset: ['25%', '-20%'], - symbolSize: [1.5 * vw, 10], - zlevel: 4, - }, - { - type: 'pictorialBar', - name: 'pictorial element', - symbol: function (val, index) { - return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex] - }, - symbolSize: [40, 40], - z: 10, - data: data.yData.map(val => { - return { - value: val, - symbolPosition: 'end', - symbolOffset: [0, '-190%'] - } - }) - }, - ], - }; - if (data.xName.length > 10) { - option.dataZoom.push({ - show: false, - type: 'slider', - bottom: '0%', - xAxisIndex: 0, - height: 12, - start: 0, - end: 1 / (data.xName.length / 11) * 100, + } else { + return '#35AAFE' + } + } + }, + label: { + normal: { + show: true, + position: "top", textStyle: { - fontSize: 0, - color: 'rgba(0,0,0,0)' + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + } + }, + { + data: data.yData, + type: 'pictorialBar', + barMaxWidth: vw, + symbolPosition: 'end', + symbol: 'diamond', + itemStyle: { + color: function (val) { + if (data.yData.length - val.dataIndex === 1) { + return 'red' + } else if (data.yData.length - val.dataIndex === 2) { + return 'yellow' + + } else { + return '#66c8ff' } + } + }, + symbolOffset: ['25%', '-50%'], + symbolSize: [1.5 * vw, 10], + zlevel: 4, + }, + { + data: bottom, + type: 'pictorialBar', + barMaxWidth: vw, + symbolPosition: 'end', + symbol: 'diamond', + itemStyle: { + color: function (val) { + if (data.yData.length - val.dataIndex === 1) { + return 'red' + } else if (data.yData.length - val.dataIndex === 2) { + return 'yellow' + + } else { + return '#66c8ff' + } + } + }, + symbolOffset: ['25%', '-20%'], + symbolSize: [1.5 * vw, 10], + zlevel: 4, + }, + { + type: 'pictorialBar', + name: 'pictorial element', + symbol: function (val, index) { + return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex] + }, + symbolSize: [40, 40], + z: 10, + data: data.yData.map(val => { + return { + value: val, + symbolPosition: 'end', + symbolOffset: [0, '-190%'] + } }) + }, + ], + }; + if (data.xName.length > 10) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.xName.length / 11) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) - let step = 1 / (data.xName.length / 11) * 100 - time2 = setInterval(() => { - option.dataZoom[0].end += step - option.dataZoom[0].start += step - if (option.dataZoom[0].start >= 100) { - option.dataZoom[0].start = 0 - option.dataZoom[0].end = step - } - if (option.dataZoom[0].end >= 100) { - option.dataZoom[0].end = 100 - option.dataZoom[0].start = option.dataZoom[0].end - step - } - charts.setOption(option); - }, 3000) - } + let step = 1 / (data.xName.length / 11) * 100 + time2 = setInterval(() => { + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + charts.setOption(option); + }, 3000) + } - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } // 多个折线面积图(直线) -const multipleBrokenLineAreaDiagram = (data, ids) => { - let charts = echarts.init(ids); +const multipleBrokenLineAreaDiagram1 = (data, ids) => { + let charts = echarts.init(ids); - function Fun() { - this.randomNum = function () { - let arr = [] - for (let i = 0; i < 12; i++) { - arr.push(parseInt(Math.random() * 100)) - } - return arr - } + function Fun() { + this.randomNum = function () { + let arr = [] + for (let i = 0; i < 12; i++) { + arr.push(parseInt(Math.random() * 100)) + } + return arr } + } - if (!data) { - data = { - xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], - yDataOne: new Fun().randomNum(), - yDataTwo: new Fun().randomNum(), - yDataOneName: '制氢量', - yDataTwoName: '发电量', - } + if (!data) { + data = { + xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + yDataOne: new Fun().randomNum(), + yDataTwo: new Fun().randomNum(), + yDataOneName: '制氢量', + yDataTwoName: '发电量', } - let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo)) - let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo)) + } + let max = 24 + let min = 18 + // let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo)) + // let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo)) - let option = { - tooltip: { - trigger: "axis", - axisPointer: { - lineStyle: { - color: "#57617B", - }, - }, + let option = { + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", }, - legend: { - icon: "rect", - itemWidth: 0.75 * vw, - itemHeight: 0.25 * vw, - itemGap: 0.75 * vw, - data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], - right: "4%", - textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", - }, + }, + }, + legend: { + icon: "rect", + itemWidth: 0.75 * vw, + itemHeight: 0.25 * vw, + itemGap: 0.75 * vw, + data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], + right: "4%", + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + grid: { + top: "20%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + dataZoom: [], + xAxis: [ + { + show: false, + type: "category", + boundaryGap: false, + axisLine: { + lineStyle: { + color: "#57617B", + }, }, - grid: { - top: "20%", - left: "3%", - right: "4%", - bottom: "3%", - containLabel: true, + axisLabel: { + show: true, + color: '#fff', + interval: 0, }, - dataZoom: [], - xAxis: [ - { - type: "category", - boundaryGap: false, - axisLine: { - lineStyle: { - color: "#57617B", - }, + data: data.xData, + }, + ], + yAxis: [ + { + type: "value", + axisTick: { + show: false, + }, + max: 24, + min: 18, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + show: true, + color: '#fff', + interval: 0.5, + }, + splitLine: { + show: false, + lineStyle: { + color: "#57617B", + }, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(137, 189, 27, 0.6)", }, - axisLabel: { - show: true, - color: '#fff', - interval: 0, + { + offset: 0.8, + color: "rgba(137, 189, 27, 0.2)", }, - data: data.xData, - }, - ], - yAxis: [ - { - type: "value", - axisTick: { - show: false, - }, - max: max + 0.5, - min: min - 1, - axisLine: { - lineStyle: { - color: "#57617B", - }, - }, - axisLabel: { - show: true, - color: '#fff', - interval: 0.5, - }, - splitLine: { - show: false, - lineStyle: { - color: "#57617B", - }, - }, - }, - ], - series: [ - { - name: data.yDataOneName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(137, 189, 27, 0.6)", - }, - { - offset: 0.8, - color: "rgba(137, 189, 27, 0.2)", - }, - ], - false - ), - shadowColor: "rgba(0, 0, 0, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: "rgb(137,189,27)", - }, - }, - label: { - //图形上的文本标签 - normal: { - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - data: data.yDataOne, - }, - { - name: data.yDataTwoName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(0, 136, 212, 0.6)", - }, - { - offset: 0.8, - color: "rgba(0, 136, 212, 0.2)", - }, - ], - false - ), - shadowColor: "rgba(0, 0, 0, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: "rgb(0,136,212)", - }, - }, - label: { - //图形上的文本标签 - normal: { - show: true, - position: "bottom", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - data: data.yDataTwo, - }, - { - name: data.yDataThreeName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(219, 50, 51, 0.6)", - }, - { - offset: 0.8, - color: "rgba(219, 50, 51, 0.2)", - }, - ], - false - ), - shadowColor: "rgba(0, 0, 0, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: "rgb(219,50,51)", - }, - }, - data: data.yDataThree, - }, - ], - }; - - if (data?.xData?.length >= 4) { - option.dataZoom.push({ + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(137,189,27)", + }, + }, + label: { + //图形上的文本标签 + normal: { show: true, - type: 'slider', - bottom: '0%', - xAxisIndex: 0, - height: 12, - start: 0, - end: 1 / (data.xData.length / 4) * 100, + position: "top", textStyle: { - fontSize: 0, - color: 'rgba(0,0,0,0)' - } - }) - option.grid.bottom = '7%' - } + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(0, 136, 212, 0.6)", + }, + { + offset: 0.8, + color: "rgba(0, 136, 212, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + }, + }, + label: { + //图形上的文本标签 + normal: { + show: true, + position: "bottom", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + data: data.yDataTwo, + }, + { + name: data.yDataThreeName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(219, 50, 51, 0.6)", + }, + { + offset: 0.8, + color: "rgba(219, 50, 51, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + }, + }, + data: data.yDataThree, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + if (data?.xData?.length >= 4) { + option.dataZoom.push({ + show: true, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.xData.length / 4) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + option.grid.bottom = '7%' + } + + charts.setOption(option); + $(window).resize(charts.resize); +} +const multipleBrokenLineAreaDiagram = (data, ids) => { + let charts = echarts.init(ids); + + function Fun() { + this.randomNum = function () { + let arr = [] + for (let i = 0; i < 12; i++) { + arr.push(parseInt(Math.random() * 100)) + } + return arr + } + } + + if (!data) { + data = { + xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + yDataOne: new Fun().randomNum(), + yDataTwo: new Fun().randomNum(), + yDataOneName: '制氢量', + yDataTwoName: '发电量', + } + } + let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo)) + let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo)) + + let option = { + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, + }, + }, + legend: { + icon: "rect", + itemWidth: 0.75 * vw, + itemHeight: 0.25 * vw, + itemGap: 0.75 * vw, + data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], + right: "4%", + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + grid: { + top: "20%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: false, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + show: true, + color: '#fff', + interval: 0, + }, + data: data.xData, + }, + ], + yAxis: [ + { + type: "value", + axisTick: { + show: false, + }, + max: max + 0.5, + min: min - 1, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + show: true, + color: '#fff', + interval: 0.5, + }, + splitLine: { + show: false, + lineStyle: { + color: "#57617B", + }, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(137, 189, 27, 0.6)", + }, + { + offset: 0.8, + color: "rgba(137, 189, 27, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(137,189,27)", + }, + }, + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(0, 136, 212, 0.6)", + }, + { + offset: 0.8, + color: "rgba(0, 136, 212, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + }, + }, + label: { + //图形上的文本标签 + normal: { + show: true, + position: "bottom", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + data: data.yDataTwo, + }, + { + name: data.yDataThreeName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(219, 50, 51, 0.6)", + }, + { + offset: 0.8, + color: "rgba(219, 50, 51, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + }, + }, + data: data.yDataThree, + }, + ], + }; + + if (data?.xData?.length >= 4) { + option.dataZoom.push({ + show: true, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.xData.length / 4) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + option.grid.bottom = '7%' + } + + charts.setOption(option); + $(window).resize(charts.resize); } const multipleBrokenLineAreaDiagramTwo = (data, ids) => { - let charts = echarts.init(ids); + let charts = echarts.init(ids); - function Fun() { - this.randomNum = function () { - let arr = [] - for (let i = 0; i < 12; i++) { - arr.push(parseInt(Math.random() * 100)) - } - return arr - } + function Fun() { + this.randomNum = function () { + let arr = [] + for (let i = 0; i < 12; i++) { + arr.push(parseInt(Math.random() * 100)) + } + return arr } + } - if (!data) { - data = { - xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], - yDataOne: new Fun().randomNum(), - yDataTwo: new Fun().randomNum(), - yDataOneName: '制氢量', - yDataTwoName: '发电量', - } + if (!data) { + data = { + xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + yDataOne: new Fun().randomNum(), + yDataTwo: new Fun().randomNum(), + yDataOneName: '制氢量', + yDataTwoName: '发电量', } - let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive)) - let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive)) + } + let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive)) + let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive)) - let option = { - tooltip: { - trigger: "axis", - // formatter:'{a} {c}%', - axisPointer: { - lineStyle: { - color: "#57617B", - }, - }, + let option = { + tooltip: { + trigger: "axis", + // formatter:'{a} {c}%', + axisPointer: { + lineStyle: { + color: "#57617B", }, - legend: { - icon: "rect", - itemWidth: 0.75 * vw, - itemHeight: 0.25 * vw, - itemGap: 0.75 * vw, - data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName, data.yDataFiveName], - right: "4%", + }, + }, + legend: { + icon: "rect", + itemWidth: 0.75 * vw, + itemHeight: 0.25 * vw, + itemGap: 0.75 * vw, + data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName, data.yDataFiveName], + right: "4%", + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + grid: { + top: "20%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: false, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + show: true, + color: '#fff', + interval: 0, + }, + data: data.xData, + }, + ], + yAxis: [ + { + type: "value", + axisTick: { + show: false, + }, + max: max + 1, + min: 90, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + formatter: '{value}%', + show: true, + color: '#fff', + interval: 0.5, + }, + splitLine: { + show: false, + lineStyle: { + color: "#57617B", + }, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + itemStyle: { + normal: { + color: "rgb(137,189,27)", + }, + }, + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + formatter: '{c}%', textStyle: { - fontSize: 0.75 * vw, - color: "#F1F1F3", + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, }, + }, }, - grid: { - top: "20%", - left: "3%", - right: "4%", - bottom: "3%", - containLabel: true, + data: data.yDataOne, + }, + { + name: data.yDataTwoName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, }, - dataZoom: [], - xAxis: [ - { - type: "category", - boundaryGap: false, - axisLine: { - lineStyle: { - color: "#57617B", - }, - }, - axisLabel: { - show: true, - color: '#fff', - interval: 0, - }, - data: data.xData, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + }, + }, + label: { + //图形上的文本标签 + normal: { + formatter: '{c}%', + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, }, - ], - yAxis: [ - { - type: "value", - axisTick: { - show: false, - }, - max: max + 1, - min: 90, - axisLine: { - lineStyle: { - color: "#57617B", - }, - }, - axisLabel: { - formatter: '{value}%', - show: true, - color: '#fff', - interval: 0.5, - }, - splitLine: { - show: false, - lineStyle: { - color: "#57617B", - }, - }, + }, + }, + data: data.yDataTwo, + }, + { + name: data.yDataThreeName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + }, + }, + label: { + //图形上的文本标签 + normal: { + formatter: '{c}%', + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, }, - ], - series: [ - { - name: data.yDataOneName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - itemStyle: { - normal: { - color: "rgb(137,189,27)", - }, - }, - label: { - //图形上的文本标签 - normal: { - show: true, - position: "top", - formatter: '{c}%', - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - data: data.yDataOne, + }, + }, + data: data.yDataThree, + }, + { + name: data.yDataFourName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + }, + }, + label: { + //图形上的文本标签 + normal: { + formatter: '{c}%', + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, }, - { - name: data.yDataTwoName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - itemStyle: { - normal: { - color: "rgb(0,136,212)", - }, - }, - label: { - //图形上的文本标签 - normal: { - formatter: '{c}%', - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - data: data.yDataTwo, + }, + }, + data: data.yDataFour, + }, + { + name: data.yDataFiveName, + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + }, + }, + label: { + //图形上的文本标签 + normal: { + formatter: '{c}%', + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, }, - { - name: data.yDataThreeName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - itemStyle: { - normal: { - color: "rgb(219,50,51)", - }, - }, - label: { - //图形上的文本标签 - normal: { - formatter: '{c}%', - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - data: data.yDataThree, - }, - { - name: data.yDataFourName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - itemStyle: { - normal: { - color: "rgb(0,136,212)", - }, - }, - label: { - //图形上的文本标签 - normal: { - formatter: '{c}%', - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - data: data.yDataFour, - }, - { - name: data.yDataFiveName, - type: "line", - smooth: false, - lineStyle: { - normal: { - width: 1, - }, - }, - itemStyle: { - normal: { - color: "rgb(219,50,51)", - }, - }, - label: { - //图形上的文本标签 - normal: { - formatter: '{c}%', - show: true, - position: "top", - textStyle: { - color: "#a8aab0", - fontStyle: "normal", - fontFamily: "微软雅黑", - fontSize: 0.75 * vw, - }, - }, - }, - data: data.yDataFive, - }, - ], - }; + }, + }, + data: data.yDataFive, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } // 空心饼图 const hollowPieChart = function (data, id) { - let charts = echarts.init(id); - if (!data) { - data = [ - { - value: 10, - name: "IQC1", - }, - { - value: 5, - name: "IQC2", - }, - { - value: 15, - name: "IQC3", - }, - { - value: 25, - name: "IQC4", - }, - { - value: 20, - name: "IQC5", - }, - { - value: 35, - name: "IQC6", - }, - ] - } - let option = { - color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"], - grid: { - left: '-10%', - top: '10%', - bottom: '10%', - right: '10%', - containLabel: true, + let charts = echarts.init(id); + if (!data) { + data = [ + { + value: 10, + name: "IQC1", + }, + { + value: 5, + name: "IQC2", + }, + { + value: 15, + name: "IQC3", + }, + { + value: 25, + name: "IQC4", + }, + { + value: 20, + name: "IQC5", + }, + { + value: 35, + name: "IQC6", + }, + ] + } + let option = { + color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"], + grid: { + left: '-10%', + top: '10%', + bottom: '10%', + right: '10%', + containLabel: true, + }, + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + }, + polar: {}, + angleAxis: { + interval: 1, + type: "category", + data: [], + z: 10, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + } + }, + radiusAxis: { + min: 40, + max: 120, + interval: 20, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + }, + // calculable: true, + series: [ + { + stack: "a", + type: "pie", + radius: ["20%", "80%"], + zlevel: 10, + label: { + show: false }, - tooltip: { - trigger: "item", - formatter: "{b} : {c} ({d}%)", - }, - polar: {}, - angleAxis: { - interval: 1, - type: "category", - data: [], - z: 10, - axisLine: { - show: false, - }, - axisLabel: { - show: false, - } - }, - radiusAxis: { - min: 40, - max: 120, - interval: 20, - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - }, - // calculable: true, - series: [ - { - stack: "a", - type: "pie", - radius: ["20%", "80%"], - zlevel: 10, - label: { - show: false - }, - // roseType: "area", - data: data, - }, - ], - }; + // roseType: "area", + data: data, + }, + ], + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } // 多个环形图 const percentageRingDiagram = function (data, id) { - let charts = echarts.init(id); - console.log(data) - data ??= [ - { - name: "内胆检漏", - value: 54, - }, - { - name: "安全检测", - value: 44, - }, - { - name: "成品检漏", - value: 35, - }, - { - name: "测温性能", - value: 30, - }, - { - name: "成品外观", - value: 44, - }, - ]; + let charts = echarts.init(id); + console.log(data) + data ??= [ + { + name: "内胆检漏", + value: 54, + }, + { + name: "安全检测", + value: 44, + }, + { + name: "成品检漏", + value: 35, + }, + { + name: "测温性能", + value: 30, + }, + { + name: "成品外观", + value: 44, + }, + ]; - let titleArr = [], - seriesArr = []; - let colors = [ - ["#389af4", "#dfeaff"], - ["#ff8c37", "#ffdcc3"], - ["#ffc257", "#ffedcc"], - ["#fd6f97", "#fed4e0"], - ["#a181fc", "#e3d9fe"], - ["#389af4", "#dfeaff"], - ["#ff8c37", "#ffdcc3"], - ["#ffc257", "#ffedcc"], - ["#fd6f97", "#fed4e0"], - ]; - data.forEach(function (item, index) { - titleArr.push({ - text: item.name, - x: index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", - y: index > 2 ? "93%" : "43%", - // top: '65%', - textAlign: "center", - textStyle: { - fontWeight: "normal", - fontSize: 0.8 * vw, - color: colors[index][0], - textAlign: "center", - }, - }); - seriesArr.push({ - // name: item.name, - type: "pie", - clockWise: false, - radius: [2 * vw, 2.5 * vw], - itemStyle: { - normal: { - color: colors[index][0], - shadowColor: colors[index][0], - shadowBlur: 0, - label: { - show: false, - }, - labelLine: { - show: false, - }, - }, - }, - hoverAnimation: false, - center: [ - index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", - index > 2 ? "75%" : "25%", - ], - data: [ - { - value: item.value, - label: { - normal: { - formatter: function (params) { - return params.value + "%"; - }, - position: "center", - show: true, - textStyle: { - fontSize: vw, - fontWeight: "bold", - color: colors[index][0], - }, - }, - }, - }, - { - value: 100 - item.value, - name: "invisible", - itemStyle: { - normal: { - color: colors[index][1], - }, - emphasis: { - color: colors[index][1], - }, - }, - }, - ], - }); + let titleArr = [], + seriesArr = []; + let colors = [ + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ["#a181fc", "#e3d9fe"], + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ]; + data.forEach(function (item, index) { + titleArr.push({ + text: item.name, + x: index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", + y: index > 2 ? "93%" : "43%", + // top: '65%', + textAlign: "center", + textStyle: { + fontWeight: "normal", + fontSize: 0.8 * vw, + color: colors[index][0], + textAlign: "center", + }, }); + seriesArr.push({ + // name: item.name, + type: "pie", + clockWise: false, + radius: [2 * vw, 2.5 * vw], + itemStyle: { + normal: { + color: colors[index][0], + shadowColor: colors[index][0], + shadowBlur: 0, + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + hoverAnimation: false, + center: [ + index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", + index > 2 ? "75%" : "25%", + ], + data: [ + { + value: item.value, + label: { + normal: { + formatter: function (params) { + return params.value + "%"; + }, + position: "center", + show: true, + textStyle: { + fontSize: vw, + fontWeight: "bold", + color: colors[index][0], + }, + }, + }, + }, + { + value: 100 - item.value, + name: "invisible", + itemStyle: { + normal: { + color: colors[index][1], + }, + emphasis: { + color: colors[index][1], + }, + }, + }, + ], + }); + }); - let option = { - title: titleArr, - series: seriesArr, - }; + let option = { + title: titleArr, + series: seriesArr, + }; - charts.setOption(option); - $(window).resize(charts.resize); + charts.setOption(option); + $(window).resize(charts.resize); } const percentageRingDiagramTwo = function (data, id) { - let charts = echarts.init(id); - if (!data) { - data = [ - { - name: "内胆检测", - value: 99, - }, - { - name: "安全检测", - value: 98.5, - }, - { - name: "压力检测", - value: 99.8, - }, - { - name: "温度检测", - value: 98.8, - }, - { - name: "外观检测", - value: 99, - }, - ]; - } - - let titleArr = [], - seriesArr = []; - let colors = [ - ["#389af4", "#dfeaff"], - ["#ff8c37", "#ffdcc3"], - ["#ffc257", "#ffedcc"], - ["#fd6f97", "#fed4e0"], - ["#a181fc", "#e3d9fe"], - ["#389af4", "#dfeaff"], - ["#ff8c37", "#ffdcc3"], - ["#ffc257", "#ffedcc"], - ["#fd6f97", "#fed4e0"], + let charts = echarts.init(id); + if (!data) { + data = [ + { + name: "内胆检测", + value: 99, + }, + { + name: "安全检测", + value: 98.5, + }, + { + name: "压力检测", + value: 99.8, + }, + { + name: "温度检测", + value: 98.8, + }, + { + name: "外观检测", + value: 99, + }, ]; - data.forEach(function (item, index) { - titleArr.push({ - text: item.name, - x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%", - y: '85%', - // top: '65%', - textAlign: "center", - textStyle: { - fontWeight: "normal", - fontSize: 0.8 * vw, - color: colors[index][0], - textAlign: "center", - }, - }); - seriesArr.push({ - // name: item.name, - type: "pie", - clockWise: false, - radius: [2 * vw, 2.5 * vw], - itemStyle: { - normal: { - color: colors[index][0], - shadowColor: colors[index][0], - shadowBlur: 0, - label: { - show: false, - }, - labelLine: { - show: false, - }, - }, - }, - hoverAnimation: false, - center: [ - index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%", - '50%', - ], - data: [ - { - value: item.value, - label: { - normal: { - formatter: function (params) { - return params.value + "%"; - }, - position: "center", - show: true, - textStyle: { - fontSize: vw, - fontWeight: "bold", - color: colors[index][0], - }, - }, - }, - }, - { - value: 100 - item.value, - name: "invisible", - itemStyle: { - normal: { - color: colors[index][1], - }, - emphasis: { - color: colors[index][1], - }, - }, - }, - ], - }); + } + + let titleArr = [], + seriesArr = []; + let colors = [ + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ["#a181fc", "#e3d9fe"], + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ]; + data.forEach(function (item, index) { + titleArr.push({ + text: item.name, + x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%", + y: '85%', + // top: '65%', + textAlign: "center", + textStyle: { + fontWeight: "normal", + fontSize: 0.8 * vw, + color: colors[index][0], + textAlign: "center", + }, }); + seriesArr.push({ + // name: item.name, + type: "pie", + clockWise: false, + radius: [2 * vw, 2.5 * vw], + itemStyle: { + normal: { + color: colors[index][0], + shadowColor: colors[index][0], + shadowBlur: 0, + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + hoverAnimation: false, + center: [ + index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%", + '50%', + ], + data: [ + { + value: item.value, + label: { + normal: { + formatter: function (params) { + return params.value + "%"; + }, + position: "center", + show: true, + textStyle: { + fontSize: vw, + fontWeight: "bold", + color: colors[index][0], + }, + }, + }, + }, + { + value: 100 - item.value, + name: "invisible", + itemStyle: { + normal: { + color: colors[index][1], + }, + emphasis: { + color: colors[index][1], + }, + }, + }, + ], + }); + }); - let option = { - title: titleArr, - series: seriesArr, - }; + let option = { + title: titleArr, + series: seriesArr, + }; - charts.setOption(option); - $(window).resize(charts.resize); -} \ No newline at end of file + charts.setOption(option); + $(window).resize(charts.resize); +} diff --git a/ruoyi-admin/src/main/resources/templates/broad/fp.html b/ruoyi-admin/src/main/resources/templates/broad/fp.html index a42c2b3..384552b 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/fp.html +++ b/ruoyi-admin/src/main/resources/templates/broad/fp.html @@ -357,9 +357,11 @@ - \ No newline at end of file + diff --git a/ruoyi-admin/src/main/resources/templates/broad/month.html b/ruoyi-admin/src/main/resources/templates/broad/month.html index 7153f42..bebf270 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/month.html +++ b/ruoyi-admin/src/main/resources/templates/broad/month.html @@ -92,7 +92,7 @@ $(() => { safeTitle('#safeTitle') } day() - setCronTak(day, "0 * * * * * *"); + setCronTak(day, "0 0/30 * * * * *"); }) \ No newline at end of file diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/domain/BaseProductQty.java b/ruoyi-system/src/main/java/com/ruoyi/system/domain/BaseProductQty.java index 4d9fd1b..5f12710 100644 --- a/ruoyi-system/src/main/java/com/ruoyi/system/domain/BaseProductQty.java +++ b/ruoyi-system/src/main/java/com/ruoyi/system/domain/BaseProductQty.java @@ -28,8 +28,17 @@ public class BaseProductQty extends BaseEntity /** 目标数量 */ @Excel(name = "目标数量") private Long qty; + private Long qtyB; - public void setId(Long id) + public Long getQtyB() { + return qtyB; + } + + public void setQtyB(Long qtyB) { + this.qtyB = qtyB; + } + + public void setId(Long id) { this.id = id; } diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/mapper/BroadDataMapper.java b/ruoyi-system/src/main/java/com/ruoyi/system/mapper/BroadDataMapper.java index 456ef80..cbac5a7 100644 --- a/ruoyi-system/src/main/java/com/ruoyi/system/mapper/BroadDataMapper.java +++ b/ruoyi-system/src/main/java/com/ruoyi/system/mapper/BroadDataMapper.java @@ -27,6 +27,7 @@ public interface BroadDataMapper { // 发泡线 /////////////////////////////////////////////////////////////////////////// List fp_selectOrderExecution(); + List fp_selectOrderExecutionPlan(); /////////////////////////////////////////////////////////////////////////// @@ -43,6 +44,7 @@ public interface BroadDataMapper { List fp_selectDeviceStation(); List fp_selectStationHourInfo(); + List fp_selectStationHourInfoDay(); List xk_selectStockOccupancy(); @@ -119,4 +121,6 @@ public interface BroadDataMapper { void deleteWorkTime(); void deleteBoxOutput(); + + Integer zz_countNightProductInTag(); } diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/service/IBroadDataService.java b/ruoyi-system/src/main/java/com/ruoyi/system/service/IBroadDataService.java index 3f22738..54eb907 100644 --- a/ruoyi-system/src/main/java/com/ruoyi/system/service/IBroadDataService.java +++ b/ruoyi-system/src/main/java/com/ruoyi/system/service/IBroadDataService.java @@ -43,6 +43,7 @@ public interface IBroadDataService { List fp_selectDeviceStation(); List fp_selectStationHourInfo(); + List fp_selectStationHourInfoDay(); List xk_selectStockOccupancy(); @@ -79,7 +80,7 @@ public interface IBroadDataService { List mtk_sselectQATop3(); - + Integer zz_countNightProductInTag(); List zz_selectLossInfo(int state); List mtk_selectQAZD(); @@ -98,4 +99,6 @@ public interface IBroadDataService { List pqk_selectProductInStore(); + + } diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/BroadDataServiceImpl.java b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/BroadDataServiceImpl.java index 71dd108..35e4e98 100644 --- a/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/BroadDataServiceImpl.java +++ b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/BroadDataServiceImpl.java @@ -66,6 +66,10 @@ public class BroadDataServiceImpl implements IBroadDataService public List fp_selectOrderExecution(){ return mapper.fp_selectOrderExecution(); } + + + + @Override public List fp_selectOrderExecutionPlan(){ return mapper.fp_selectOrderExecutionPlan(); @@ -85,6 +89,10 @@ public class BroadDataServiceImpl implements IBroadDataService public List fp_selectStationHourInfo() { return mapper.fp_selectStationHourInfo(); } + @Override + public List fp_selectStationHourInfoDay() { + return mapper.fp_selectStationHourInfoDay(); + } @Override public List selectFpStock() { @@ -161,6 +169,11 @@ public class BroadDataServiceImpl implements IBroadDataService return mapper.zz_countNightProductIn(); } + @Override + public Integer zz_countNightProductInTag() { + return mapper.zz_countNightProductInTag(); + } + @Override public List zz_selectLossInfo(int state) { return mapper.zz_selectLossInfo( state); diff --git a/ruoyi-system/src/main/resources/mapper/system/BaseProductQtyMapper.xml b/ruoyi-system/src/main/resources/mapper/system/BaseProductQtyMapper.xml index 1f5e32c..b546927 100644 --- a/ruoyi-system/src/main/resources/mapper/system/BaseProductQtyMapper.xml +++ b/ruoyi-system/src/main/resources/mapper/system/BaseProductQtyMapper.xml @@ -10,10 +10,11 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" + - select id, day, qty, create_time, create_by from base_product_qty + select id, day, qty,qty_b, create_time, create_by from base_product_qty @@ -25,13 +29,15 @@ union select sum(QTY3) as qty, '实际产量' as name from IMOS.BASE_BOX_OUTPUT_RECORD xhq - left join (select * from (select * from haiwei.BASE_DAY_WBTIME order by CREATE_TIME desc) where ROWNUM = 1) wb - on 1 = 1 + left join (select * + from (select * from haiwei.BASE_DAY_WBTIME order by CREATE_TIME desc) + where ROWNUM = 1) wb + on 1 = 1 where xhq.CREATE_TIME between - case when sysdate <= wb.W_END then W_START else W_END end - and - case when sysdate <= wb.W_END then W_END else B_END end - and QTY3 > 0 + case when sysdate <= wb.W_END then W_START else W_END end + and + case when sysdate <= wb.W_END then W_END else B_END end + and QTY3 > 0 select substr(name, - case - when instr(name, '/', 1, 1) = 0 then instr(name, ',', 1, 1) + 1 - else instr(name, '/', 1, 1) + 1 - end, - case - when instr(name, ',', 1, 2) = 0 then Length(name) + 1 - else instr(name, ',', 1, 2) - end - - - case - when instr(name, '/', 1, 1) = 0 then instr(name, ',', 1, 1) + 1 - else instr(name, '/', 1, 1) + 1 - end) as name, - sum(QTY3) as qty + case + when instr(name, '/', 1, 1) = 0 then instr(name, ',', 1, 1) + 1 + else instr(name, '/', 1, 1) + 1 + end, + case + when instr(name, ',', 1, 2) = 0 then Length(name) + 1 + else instr(name, ',', 1, 2) + end + - + case + when instr(name, '/', 1, 1) = 0 then instr(name, ',', 1, 1) + 1 + else instr(name, '/', 1, 1) + 1 + end) as name, + sum(QTY3) as qty from IMOS.BASE_BOX_OUTPUT_RECORD xhq - left join (select * from (select * from haiwei.BASE_DAY_WBTIME order by CREATE_TIME desc) where ROWNUM = 1) wb - on 1 = 1 + left join (select * + from (select * from haiwei.BASE_DAY_WBTIME order by CREATE_TIME desc) + where ROWNUM = 1) wb + on 1 = 1 where xhq.CREATE_TIME between case when sysdate <= wb.W_END then W_START else W_END end - and case when sysdate <= wb.W_END then W_END else B_END end - and QTY3 > 0 + and case when sysdate <= wb.W_END then W_END else B_END end + and QTY3 > 0 group by name @@ -92,12 +100,12 @@ group by Store_Code select name, qty from ( - select '19:30' as name, sum(QTY3) as qty,1 as ord + select '19:30' as name, sum(QTY3) as qty, 1 as ord from IMOS.BASE_BOX_OUTPUT_RECORD ippb left join ( select W_END as day1, W_END + interval '1' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) where qt = 1 ) t1 on 1 = 1 - where ippb.CREATE_TIME >= day1 and ippb.CREATE_TIME < day2 - union - select '20:30' as name, sum(QTY3) as qty, 2 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - -- 2022-07-28 20:30:00 - select W_END + interval '1' HOUR as day1, W_END + interval '2' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 - union - select '21:30' as name, sum(QTY3) as qty, 3 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - -- 2022-07-28 21:30:00 - select W_END + interval '2' HOUR as day1, W_END + interval '3' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 - union - select '22:30' as name, sum(QTY3) as qty, 4 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - -- 2022-07-28 22:30:00 - select W_END + interval '3' HOUR as day1, W_END + interval '4' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 - union - select '23:30' as name, sum(QTY3) as qty, 5 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - -- 2022-07-28 23:30:00 - select W_END + interval '4' HOUR as day1, W_END + interval '5' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 + where ippb.CREATE_TIME >= day1 + and ippb.CREATE_TIME < day2 + union + select '20:30' as name, sum(QTY3) as qty, 2 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + -- 2022-07-28 20:30:00 + select W_END + interval '1' HOUR as day1, W_END + interval '2' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 + union + select '21:30' as name, sum(QTY3) as qty, 3 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + -- 2022-07-28 21:30:00 + select W_END + interval '2' HOUR as day1, W_END + interval '3' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 + union + select '22:30' as name, sum(QTY3) as qty, 4 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + -- 2022-07-28 22:30:00 + select W_END + interval '3' HOUR as day1, W_END + interval '4' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 + union + select '23:30' as name, sum(QTY3) as qty, 5 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + -- 2022-07-28 23:30:00 + select W_END + interval '4' HOUR as day1, W_END + interval '5' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 - union - select '00:30' as name, sum(QTY3) as qty, 6 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - -- 2022-07-29 00:30:00 - select W_END + interval '5' HOUR as day1, W_END + interval '6' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 + union + select '00:30' as name, sum(QTY3) as qty, 6 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + -- 2022-07-29 00:30:00 + select W_END + interval '5' HOUR as day1, W_END + interval '6' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 - union - select '01:30' as name, sum(QTY3) as qty, 7 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - -- 2022-07-29 01:30:00 - select W_END + interval '6' HOUR as day1, W_END + interval '7' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 + union + select '01:30' as name, sum(QTY3) as qty, 7 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + -- 2022-07-29 01:30:00 + select W_END + interval '6' HOUR as day1, W_END + interval '7' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 - union - select '02:30' as name, sum(QTY3) as qty, 8 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - select W_END + interval '7' HOUR as day1, W_END + interval '8' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 + union + select '02:30' as name, sum(QTY3) as qty, 8 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + select W_END + interval '7' HOUR as day1, W_END + interval '8' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 - union - select '03:30' as name, sum(QTY3) as qty, 9 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - select W_END + interval '8' HOUR as day1, W_END + interval '9' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 + union + select '03:30' as name, sum(QTY3) as qty, 9 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + select W_END + interval '8' HOUR as day1, W_END + interval '9' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 - union - select '04:30' as name, sum(QTY3) as qty, 10 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - select W_END + interval '9' HOUR as day1, W_END + interval '10' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 + union + select '04:30' as name, sum(QTY3) as qty, 10 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + select W_END + interval '9' HOUR as day1, W_END + interval '10' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 - union - select '05:30' as name, sum(QTY3) as qty, 11 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - select W_END + interval '10' HOUR as day1, W_END + interval '11' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 + union + select '05:30' as name, sum(QTY3) as qty, 11 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + select W_END + interval '10' HOUR as day1, W_END + interval '11' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 - union - select '06:30' as name, sum(QTY3) as qty, 12 as ord - from IMOS.BASE_BOX_OUTPUT_RECORD ippb - left join ( - select W_END + interval '11' HOUR as day1, W_END + interval '12' HOUR as day2 - from (select W_END, row_number() over (order by CREATE_TIME desc) as qt from haiwei.BASE_DAY_WBTIME) - where qt = 1 - ) t1 on 1 = 1 - where ippb.CREATE_TIME > - = day1 and ippb.CREATE_TIME < - day2 - ) - order by ord + union + select '06:30' as name, sum(QTY3) as qty, 12 as ord + from IMOS.BASE_BOX_OUTPUT_RECORD ippb + left join ( + select W_END + interval '11' HOUR as day1, W_END + interval '12' HOUR as day2 + from (select W_END, row_number() over (order by CREATE_TIME desc) as qt + from haiwei.BASE_DAY_WBTIME) + where qt = 1 + ) t1 on 1 = 1 + where ippb.CREATE_TIME > + = day1 + and ippb.CREATE_TIME < + day2 + ) + order by ord + @@ -487,135 +652,241 @@ when instr(MATERIAL_NAME, '-', 1, 1) = 0 then instr(MATERIAL_NAME, ',', 1, 1) + 1 else instr(MATERIAL_NAME, '-', 1, 1) + 1 end) as name, - sum(STORE_QTY) as qty - from IMOS_LO_BIN - where MATERIAL_NAME like '发泡箱体%' - and STORE_QTY > 0 + sum(STORE_QTY) as qty + from IMOS_LO_BIN + where MATERIAL_NAME like '发泡箱体%' + and STORE_QTY > 0 group by MATERIAL_NAME
- +
+
+ +
+ +
+
+