|
@@ -0,0 +1,713 @@
|
|
|
+<!-- 网站普查指标监测 -->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="js/echarts.min.js"></script>
|
|
|
+ <link rel="stylesheet" type="text/css" href="style/html.css" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="style/base.css" />
|
|
|
+ </head>
|
|
|
+ <body class="black-bg">
|
|
|
+ <!-- 头部 Start -->
|
|
|
+ <div class="header flex-row flex-y-center">
|
|
|
+ <h1>市政府网站访问情况监测</h1>
|
|
|
+ </div>
|
|
|
+ <!-- 头部 End -->
|
|
|
+ <!-- 内容 Start -->
|
|
|
+ <div class="container">
|
|
|
+ <!-- 正文 Start -->
|
|
|
+ <div class="content m-t-20">
|
|
|
+ <div class="content-list flex-row" style="top: 0; flex-wrap: wrap">
|
|
|
+ <!-- 网站普查要素 -->
|
|
|
+ <div class="content-list-left w40 flex-col">
|
|
|
+ <div
|
|
|
+ class="content-list-body height-41"
|
|
|
+ style="width: auto; padding: 0"
|
|
|
+ >
|
|
|
+ <div class="fw-tit"><span>市政府网站十日内点击量</span></div>
|
|
|
+ <div
|
|
|
+ id="chart-panel"
|
|
|
+ style="width: 100%; height: 33vh; margin-top: 10px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-list-left w50 flex-col">
|
|
|
+ <div
|
|
|
+ class="content-list-body height-41"
|
|
|
+ style="width: auto; padding: 0"
|
|
|
+ >
|
|
|
+ <div class="fw-tit">
|
|
|
+ <span>全国各省访问吉林市政府网站排名</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="chart-panel2"
|
|
|
+ style="width: 100%; height: 33vh; margin-top: 10px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-list-left w40 flex-col m-t-20">
|
|
|
+ <div
|
|
|
+ class="content-list-body height-41"
|
|
|
+ style="width: auto; padding: 0"
|
|
|
+ >
|
|
|
+ <div class="fw-tit"><span>门户网站栏目浏览量排名</span></div>
|
|
|
+ <div
|
|
|
+ id="chart-panel3"
|
|
|
+ style="width: 100%; height: 34vh; margin-top: 10px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-list-left w50 flex-col m-t-20 ">
|
|
|
+ <div
|
|
|
+ class="content-list-body height-41"
|
|
|
+ style="width: auto; padding: 0;overflow: hidden;"
|
|
|
+ >
|
|
|
+ <div class="fw-tit"><span>每日最受欢迎信息排名</span></div>
|
|
|
+ <div class="day-list" style="height: 26vh; overflow-y: scroll;">
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ <div class="day-list-con flex-row">
|
|
|
+ <div class="list-index">1</div>
|
|
|
+ <div class="list-text">磐石市委书记于技群调研疫情防控、项目建设、秸秆焚烧、村级集体经济</div>
|
|
|
+ <div class="list-click-num">567</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 正文 End -->
|
|
|
+ </div>
|
|
|
+ <!-- 内容End -->
|
|
|
+
|
|
|
+ <!-- echarts1 -->
|
|
|
+ <script type="text/javascript">
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById("chart-panel"));
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ show: false,
|
|
|
+ text: "多线图",
|
|
|
+ textStyle: {
|
|
|
+ align: "center",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ },
|
|
|
+ top: "5%",
|
|
|
+ left: "center",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(0, 255, 233,0)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: "rgba(255, 255, 255,1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(0, 255, 233,0)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "15%",
|
|
|
+ left: "5%",
|
|
|
+ right: "10%",
|
|
|
+ bottom: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ // show: true,
|
|
|
+ color: "#f00",
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f00",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 20,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: "rgba(255,255,255,1)",
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ console.log(params);
|
|
|
+ return "2021.11." + params;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [
|
|
|
+ "1",
|
|
|
+ "2",
|
|
|
+ "3",
|
|
|
+ "4",
|
|
|
+ "5",
|
|
|
+ "6",
|
|
|
+ "7",
|
|
|
+ "8",
|
|
|
+ "9",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "12",
|
|
|
+ "13",
|
|
|
+ "14",
|
|
|
+ "15",
|
|
|
+ "16",
|
|
|
+ "17",
|
|
|
+ "18",
|
|
|
+ "19",
|
|
|
+ "20",
|
|
|
+ "21",
|
|
|
+ "22",
|
|
|
+ "23",
|
|
|
+ "24",
|
|
|
+ "25",
|
|
|
+ "26",
|
|
|
+ "27",
|
|
|
+ "28",
|
|
|
+ "29",
|
|
|
+ "30",
|
|
|
+ "31",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ min: 0,
|
|
|
+ // max: 140,
|
|
|
+ splitNumber: 4,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ["#fff"],
|
|
|
+ opacity: 0.06,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 20,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: "rgba(255,255,255,1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "注册总量",
|
|
|
+ type: "line",
|
|
|
+ smooth: true, //是否平滑
|
|
|
+ showAllSymbol: true,
|
|
|
+ // symbol: 'image://./static/images/guang-circle.png',
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 10,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#FFBC0D",
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0)",
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowOffsetY: 5,
|
|
|
+ shadowOffsetX: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false, //圆点上方数值
|
|
|
+ position: "top",
|
|
|
+ textStyle: {
|
|
|
+ color: "rgb(218 255 232)",
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FFBC0D",
|
|
|
+ borderColor: "rgb(108,78,0)",
|
|
|
+ borderWidth: 1,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0)",
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowOffsetY: 2,
|
|
|
+ shadowOffsetX: 2,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(255,188,13, 0.4)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(255,188,13, 0)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 30, 32, 32, 32, 32, 38, 32, 33, 36, 32, 32, 32, 34, 32, 32, 32,
|
|
|
+ 39, 32, 32, 32, 32, 32, 33, 32, 32, 23, 32, 32, 32, 32, 32,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ if (option) {
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <!-- echarts2 -->
|
|
|
+ <script type="text/javascript">
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById("chart-panel2"));
|
|
|
+ var data1 = [
|
|
|
+ "50",
|
|
|
+ "60",
|
|
|
+ "30",
|
|
|
+ "50",
|
|
|
+ "60",
|
|
|
+ "30",
|
|
|
+ "50",
|
|
|
+ "60",
|
|
|
+ "40",
|
|
|
+ "60",
|
|
|
+ "20",
|
|
|
+ "40",
|
|
|
+ "60",
|
|
|
+ ];
|
|
|
+ var datacity = [
|
|
|
+ "北京",
|
|
|
+ "江苏",
|
|
|
+ "浙江",
|
|
|
+ "河北",
|
|
|
+ "福建",
|
|
|
+ "辽宁",
|
|
|
+ "湖北",
|
|
|
+ "河南",
|
|
|
+ "广东",
|
|
|
+ "安徽",
|
|
|
+ "吉林",
|
|
|
+ "内蒙古",
|
|
|
+ ];
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器,坐标轴触发有效
|
|
|
+ type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "3%",
|
|
|
+ bottom: "3%",
|
|
|
+ top: "10%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ //坐标轴刻度标签的相关设置。
|
|
|
+ interval: 0, //设置为 1,表示『隔一个标签显示一个标签』
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ color: "#ACCFFF",
|
|
|
+ fontStyle: "normal",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#344B83",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#344B83",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ //坐标轴刻度标签的相关设置。
|
|
|
+ interval: 0, //设置为 1,表示『隔一个标签显示一个标签』
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ color: "#ACCFFF",
|
|
|
+ fontStyle: "normal",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ rotate: 30,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#344B83",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: datacity,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: "10",
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#45CAED",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(6, 176, 203, 0.59)",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: data1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ if (option) {
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <!-- echarts3 -->
|
|
|
+ <script type="text/javascript">
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById("chart-panel3"));
|
|
|
+
|
|
|
+ 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 = [
|
|
|
+ "1.政务",
|
|
|
+ "2.市政府",
|
|
|
+ "3.市情况",
|
|
|
+ "4.互动",
|
|
|
+ "5.政策",
|
|
|
+ "6.办事",
|
|
|
+ "7.新闻",
|
|
|
+ "8.法规",
|
|
|
+ "初二",
|
|
|
+ "初三",
|
|
|
+ "高一",
|
|
|
+ "高二",
|
|
|
+ "高三",
|
|
|
+ "1",
|
|
|
+ "2",
|
|
|
+ "3",
|
|
|
+ "4",
|
|
|
+ "5",
|
|
|
+ "6",
|
|
|
+ "7",
|
|
|
+ "8",
|
|
|
+ "9",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "12",
|
|
|
+ "13",
|
|
|
+ "14",
|
|
|
+ "15",
|
|
|
+ "16",
|
|
|
+ "17",
|
|
|
+ "18",
|
|
|
+ "19",
|
|
|
+ "20",
|
|
|
+ "21",
|
|
|
+ "22",
|
|
|
+ "23",
|
|
|
+ "24",
|
|
|
+ "25",
|
|
|
+ "26",
|
|
|
+ ];
|
|
|
+ var pageNum = 1,
|
|
|
+ pageSize = 10;
|
|
|
+ var baseRows = getPageList(yLabel, pageNum, pageSize);
|
|
|
+
|
|
|
+ let yData = [];
|
|
|
+ baseRows.forEach((item) => {
|
|
|
+ yData.push(Math.random() * 1000);
|
|
|
+ });
|
|
|
+ let bgData = [];
|
|
|
+ for (let i in yData) {
|
|
|
+ bgData.push(2000);
|
|
|
+ }
|
|
|
+
|
|
|
+ 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: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#9aeced",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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) => {
|
|
|
+ yData.push(Math.random() * 1000);
|
|
|
+ });
|
|
|
+ //x轴
|
|
|
+ bgData.splice(0, 1);
|
|
|
+ rows.forEach((item) => {
|
|
|
+ bgData.push(2000);
|
|
|
+ });
|
|
|
+
|
|
|
+ myChart.setOption({
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ data: baseRows,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: yData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "人数",
|
|
|
+ data: yData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "背景",
|
|
|
+ data: bgData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ if (option) {
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|