layui-admin/admin/static/js/chart/wavypolyline.js

layui.use(["index", "api", "tpl", "dialog", "laypage", "laydate"], function () {
  var $ = layui.$,
    table = layui.table,
    element = layui.element,
    form = layui.form,
    admin = layui.admin,
    laydate = layui.laydate,
    laypage = layui.laypage;
  var wavypolylineChart = echarts.init(
    document.getElementById("wavypolylineChart")
  );
  var refreshNextTime = 0;
  var intervalsTime = 0; //刷新时间频率
  var myRefreshTimeOut = "";
  var where = {};

  var LIST_TABLE_ID = "listTable";
  var LIST_TABLE_DATA = [
    {
      id: 1,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 2,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 3,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 4,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
  ];
  var LIST_TABLE_COLS = [
    {
      field: "id",
      title: "id",
      align: "center",
    },
    {
      field: "name",
      title: "名称",
      align: "center",
    },
    {
      field: "createTime",
      title: "创建时间",
      align: "center",
      templet: function (d) {
        return layui.util.toDateString(d.createTime, "yyyy-MM-dd");
      },
    },
  ];
  init();

  function init() {
    getChartData();
    getTableData();
    refreshTime();
  }

  function stopRefreshTime() {
    clearTimeout(myRefreshTimeOut);
  }
  function refreshTime() {
    if (intervalsTime == 0) {
      stopRefreshTime();
    }
    var nowTime = new Date().getTime();
    if (nowTime > refreshNextTime) {
      refreshNextTime = nowTime + parseInt(intervalsTime);
      getChartData();
      getTableData();
      if (intervalsTime > 0) {
        refreshTime();
      }
    } else {
      if (intervalsTime > 0) {
        myRefreshTimeOut = window.setTimeout(function () {
          refreshTime();
        }, intervalsTime);
      }
    }
  }
  function getChartData() {
    var responseTimeOptions = {
      xAxisData: ["100", "200", "50", "300", "100", "100", "200", "50", "300", "100"],
      seriesData: [100, 200, 50, 300, 100, 100, 200, 50, 300, 100],
    }; //api 请求数据
    renderWavypolylineChart(responseTimeOptions);
  }
  function renderWavypolylineChart({ xAxisData, seriesData }) {
    var option = {
      xAxis: {
        type: "category",
        boundaryGap: false,
        name: "响应时长/ms",
        nameLocation: "end",
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: "#454b5026",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#454b5026"],
            width: 1,
            type: "solid",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "请求个数",
        nameLocation: "end",
        axisLine: {
          lineStyle: {
            color: "#454b5026",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#454b5026"],
            width: 1,
            type: "solid",
          },
        },
      },
      textStyle: {
        color: "#a5aaaf",
      },
      series: [
        {
          data: seriesData,
          type: "line",
          showBackground: false,
          symbol: "none", //去掉折线图中的节点
          smooth: true,
          areaStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1289ff4d"
                  },
                  {
                    offset: 0.7,
                    color: "rgba(255, 255, 255, 1)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#1289ff",
            },
          },
        },
      ],
    };

    wavypolylineChart.setOption(option);
  }
  function getTableData() {
    var tableRenderOptions = {
      elem: "#" + LIST_TABLE_ID,
      data: LIST_TABLE_DATA,
      even: "false",
      defaultToolbar: [],
      page: false,
      cols: [LIST_TABLE_COLS],
      where: where,
    };
    table.render(tableRenderOptions);
    laypage.render({
      elem: "pages",
      count: 100,
      layout: ["count", "prev", "page", "next", "limit", "refresh", "skip"],
      jump: function (obj) {
        console.log(obj);
      },
    });
  }
});