diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/IndexController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/IndexController.java index 2568f55..fc564e3 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/IndexController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/IndexController.java @@ -127,10 +127,10 @@ public class IndexController { @GetMapping("/getAlarmAmount") @ResponseBody public String getAlarmAmount(){ - return "{\n" + - " \"yAxis\": [\"设备高温\", \"设备振动\", \"烟雾火情\", \"环境大风\"],\n" + - " \"data\": [60, 132, 89, 100]\n" + - "}"; + return "{\n" + + " \"yAxis\": [\"设备高温\", \"设备振动\", \"烟雾火情\", \"环境大风\", \"测试一\", \"测试二\", \"测试三\", \"测试四\", \"测试五\", \"测试六\"],\n" + + " \"data\": [60, 132, 89, 100,15,23,22,60, 132, 89]\n" + + "}"; } /** diff --git a/ruoyi-admin/src/main/resources/static/css/lot-ui/lot-indexStyle.css b/ruoyi-admin/src/main/resources/static/css/lot-ui/lot-indexStyle.css index 7918a42..6052553 100644 --- a/ruoyi-admin/src/main/resources/static/css/lot-ui/lot-indexStyle.css +++ b/ruoyi-admin/src/main/resources/static/css/lot-ui/lot-indexStyle.css @@ -114,7 +114,7 @@ span{ } .right-top{ - top: 9.5%; + top: 9%; } .right-bottom{ diff --git a/ruoyi-admin/src/main/resources/static/img/IotIndex-background.png b/ruoyi-admin/src/main/resources/static/img/IotIndex-background.png index dbf3227..187b14a 100644 Binary files a/ruoyi-admin/src/main/resources/static/img/IotIndex-background.png and b/ruoyi-admin/src/main/resources/static/img/IotIndex-background.png differ diff --git a/ruoyi-admin/src/main/resources/static/js/Iot-ui/iotIndex.js b/ruoyi-admin/src/main/resources/static/js/Iot-ui/iotIndex.js index 2129fce..8e87bdc 100644 --- a/ruoyi-admin/src/main/resources/static/js/Iot-ui/iotIndex.js +++ b/ruoyi-admin/src/main/resources/static/js/Iot-ui/iotIndex.js @@ -136,7 +136,31 @@ function barChats(datas, id) { bottom: '5%', containLabel: true }, - + /*dataZoom: [ + { + /!*此方法需将grid的right设为23% + type: 'slider', + show: true, + yAxisIndex:[0], + right:'5%', + start:0, + end:80*!/ + type: 'inside', + yAxisIndex: [0], + start: 0, + end: 80 + } + ],*/ + dataZoom: [ + //滑动条 + { + yAxisIndex: 0, //这里是从X轴的0刻度开始 + show: false, //是否显示滑动条，不影响使用 + type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 4, // 一次性展示5个。 + }, + ], xAxis: { type: 'value', show: true, @@ -254,7 +278,154 @@ function barChats(datas, id) { } ] }; - charts.setOption(options); + + /*let charts = echarts.init(id); + let Xdata = ['63.27','27.90','33.52','17.98','42.25','24.54','33.96','11.73','72.58','45.36',]; + let Ydata = ['西安市','铜川市','咸阳市','汉中市','商洛市','安康市','渭南市','宝鸡市','延安市','榆林市',]; + + let option ={ + title: { + text:'测试数据', + textStyle: { + fontSize: 12, + color: '#E4765D', //标题颜色 + }, + subtext:'', + subtextStyle: { + fontSize: 12, + color: '#E4765D', //副标题标题颜色 + }, + }, + color: ["#3398DB"], + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: { + //坐标轴类型(类目轴) + name: "", + type: "value", + axisLabel: { + show: false, + }, + + //是否显示坐标轴刻度 + axisTick: { show: false }, + //坐标轴线线的颜色 + axisLine: { + show: false, + }, + + //是否显示网格线 + splitLine: { + show: false, + } + }, + + dataZoom: [ + //滑动条 + { + yAxisIndex: 0, //这里是从X轴的0刻度开始 + show: false, //是否显示滑动条，不影响使用 + type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 4, // 一次性展示5个。 + }, + ], + yAxis: [ + { + type: "category", + inverse: true, //是否是反向坐标轴 + data:Ydata, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', + }, + formatter: function (value, index) { + var value; + // if判断转换值 + return value; + }, + }, + offset: 10, + nameTextStyle: { + fontSize: 15, + }, + splitLine: { show: false }, + axisTick: { show: false }, + //坐标轴线线的颜色 + axisLine: { + show: true, + lineStyle: { + color: '#0E3B57', + type: 'solid', + width: 1, + }, + }, + }, + + ], + series: [ + { + name: "用煤量", + type: "bar", + barMaxWidth: 10, + // barWidth: "60%", + data: Xdata, + barWidth:8, + barGap: 10, + smooth: true, + label: { + normal: { + show: false, + position: 'right', + offset: [5, -2], + textStyle: { + color: '#F68300', + fontSize: 13, + }, + }, + }, + itemStyle: { + emphasis: { + barBorderRadius: 7, + }, + //颜色渐变 + normal: { + barBorderRadius: 7, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + {offset: 0, color: '#040C3B'}, + {offset: 0.5, color: '#6D3F46'}, + {offset: 1, color: '#E4765D'} + ]), + }, + }, + + }, + ], + };*/ + + //自动滚动 + this.timeOut=setInterval(()=>{ + if (options.dataZoom[0].endValue == datas.data.length ) { + options.dataZoom[0].endValue = 4; + options.dataZoom[0].startValue = 0; + } else { + options.dataZoom[0].endValue = options.dataZoom[0].endValue + 1; + options.dataZoom[0].startValue = options.dataZoom[0].startValue + 1; + } + charts.setOption(options); + },2000); $(window).resize(charts.resize); } diff --git a/ruoyi-admin/src/main/resources/templates/iot-ui/index.html b/ruoyi-admin/src/main/resources/templates/iot-ui/index.html index c088bb1..c7a9410 100644 --- a/ruoyi-admin/src/main/resources/templates/iot-ui/index.html +++ b/ruoyi-admin/src/main/resources/templates/iot-ui/index.html @@ -32,11 +32,11 @@ -
+
125
-
+
124