修改

ruoyi-admin/src/main/resources/templates/websiteAccess.html

@@ -517,7 +517,7 @@
         yData.splice(0, 1);
         rows.forEach((item,index) => {
           baseRows.push(item)
-          yData.push(dataSourceThree.browseList[index]);
+          yData.push(yData[index]);
           console.log(item,dataSourceThree.browseList[index])
         });
         console.log("dataSourceThree.browseList",yData)
@@ -547,7 +547,7 @@
             },
           ],
         });
-      }, 3000);
+      }, 1000);
 
       if (option) {
         myChart.setOption(option);
@@ -850,6 +850,202 @@
         if (10018 == JSON.parse(res).code) {
           message = JSON.parse(res).data
           console.log("message",message)
+          // 基于准备好的dom，初始化echarts实例
+          var myChart = echarts.init(document.getElementById("chart-panel3"));
+          console.log("message",message)
+          function getPageList(arrays, pageNum, pageSize) {
+            //计算分页页数
+            pageNum = pageNum - 1;
+            const dataList = [];
+            const pageRows = arrays.length;
+            const pageTotal = (pageRows + pageSize - 1) / pageSize;
+            //循环判断值
+            let startIndex = pageNum <= 0 ? 0 : pageNum * pageSize;
+            let endIndex =
+                    (pageNum + 1) * pageSize > pageRows
+                            ? pageRows
+                            : (pageNum + 1) * pageSize;
+            if (startIndex > pageRows) return dataList;
+            for (startIndex; startIndex < endIndex; startIndex++) {
+              dataList.push(arrays[startIndex]);
+            }
+            return dataList;
+          }
+
+          let yLabel = message.columnRankingList;
+          var pageNum = 1,
+                  pageSize = 10;
+          var baseRows = getPageList(yLabel, pageNum, pageSize);
+          console.log("baseRows",baseRows)
+          let yData = [];
+          baseRows.forEach((item,index) => {
+            // baseRows.push(item)
+            yData.push(message.browseList[index]);
+          });
+          let bgData = [];
+          for (let i in yData) {
+            bgData.push(400);
+          }
+
+          var option = {
+            grid: {
+              left: "5%",
+              right: "5%",
+              bottom: "5%",
+              top: "5%",
+              containLabel: true,
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "none",
+              },
+              formatter: function (params) {
+                return (
+                        params[0].name +
+                        "<br/>" +
+                        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
+                        params[0].seriesName +
+                        " : " +
+                        params[0].value +
+                        " <br/>"
+                );
+              },
+            },
+            xAxis: {
+              show: false,
+              type: "value",
+            },
+            yAxis: [
+              {
+                type: "category",
+                inverse: true,
+                axisLabel: {
+                  show: true,
+                  margin: 15,
+                  textStyle: {
+                    color: "#fff",
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisTick: {
+                  show: false,
+                },
+                axisLine: {
+                  show: false,
+                },
+                data: baseRows,
+              },
+              {
+                type: "category",
+                inverse: true,
+                axisTick: "none",
+                axisLine: "none",
+                show: true,
+                axisLabel: {
+                  margin: 15,
+                  textStyle: {
+                    color: "#9aeced",
+                    fontSize: "15",
+                  },
+                },
+                data: yData,
+              },
+            ],
+            series: [
+              {
+                name: "人数",
+                type: "bar",
+                zlevel: 1,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: [0, 30, 30, 0],
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "#52d8da",
+                      },
+                      {
+                        offset: 1,
+                        color: "#57dcde",
+                      },
+                    ]),
+                    shadowBlur: 0,
+                    shadowColor: "rgba(87,220,222,0.7)",
+                  },
+                },
+                barWidth: 10,
+                data: yData,
+              },
+              {
+                name: "背景",
+                type: "bar",
+                barWidth: 10,
+                barGap: "-100%",
+                data: bgData,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(29,38,106,0.3)",
+                    barBorderRadius: [0, 30, 30, 0],
+                  },
+                },
+              },
+            ],
+          };
+
+          setInterval(() => {
+            pageNum++;
+            var rows = getPageList(yLabel, pageSize + pageNum, 1);
+            if (rows.length == 0) {
+              pageSize = 0;
+              pageNum = 0;
+              return;
+            }
+            //原始数组
+            baseRows.splice(0, 1);
+            // baseRows.push(...rows);
+            //原始数组y刻度值
+            yData.splice(0, 1);
+            rows.forEach((item,index) => {
+              baseRows.push(item)
+              yData.push(yData[index]);
+              console.log(item,message.browseList[index])
+            });
+            console.log("dataSourceThree.browseList",yData)
+            //x轴
+            bgData.splice(0, 1);
+            rows.forEach((item) => {
+              bgData.push(400);
+            });
+
+            myChart.setOption({
+              yAxis: [
+                {
+                  data: baseRows,
+                },
+                {
+                  data: yData,
+                },
+              ],
+              series: [
+                {
+                  name: "人数",
+                  data: yData,
+                },
+                {
+                  name: "背景",
+                  data: bgData,
+                },
+              ],
+            });
+          }, 1000);
+
+          if (option) {
+            myChart.clear()
+            myChart.setOption(option);
+          }
         }
         if (10019 == JSON.parse(res).code) {
           message = JSON.parse(res).data