<!-- 市政府网站访问情况监测 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>市政府网站访问情况监测</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>
