change - 柱状图自动滚动设置

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"
+        + "}";
   }
 
   /**

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{

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) {
         }
         ]
     };
+
+    /*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);
 }
 

ruoyi-admin/src/main/resources/templates/iot-ui/index.html

@@ -32,11 +32,11 @@
     </div>
 
     <!--监控单元告警--未确认数-->
-    <div class="right right-top" style="right: 10.8%;color: #1795FF">
+    <div class="right right-top" style="right: 14%;color: #1795FF">
         <span>125</span>
     </div>
     <!--监控单元告警--总告警数-->
-    <div class="right right-top" style="right: 2.6%;color: #02F8FE">
+    <div class="right right-top" style="right: 5.5%;color: #02F8FE">
         <span>124</span>
     </div>