layui-admin/admin/static/js/chart/ecg.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 refreshNextTime = 0;
  var intervalsTime = 0;//刷新时间频率
  var myRefreshTimeOut = "";
  var where = {};

  var ecgChart = echarts.init(document.getElementById("ecgChart"));
  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: "我是一个备注",
    },
    {
      id: 5,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 6,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 7,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 8,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 9,
      name: "我的名字",
      ip: "192.168.10.123",
      port: "3306",
      sid: "student_info",
      username: "student",
      password: "12345678",
      createTime: 1590560278000,
      fz: 1,
      type: 1,
      remark: "我是一个备注",
    },
    {
      id: 10,
      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: ["4000", "3000", "5000", "6500", "4800"],
      seriesData: [110, 250, 239, 124, 47],
    }; //api 请求数据
    rendErecgChart(responseTimeOptions);
  }
  function rendErecgChart({ xAxisData, seriesData }) {
    var xAxisData = [];
    var yAxisData = [];
    for (var i = 500; i > 0; i--) {
      xAxisData.push(i + "秒前");
    }
    for (i = 1; i < 501; i++) {
      yAxisData.push(null);
    }
    var totalFlowRateOption = {
      animation: false,
      title: {
        text: '总流量（kbps）'/*,      
        left:"110px"*/ },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      grid: {
        left: 50/*"50px"*/,
        right: 15/*"15px"*/
      },
      legend: {
        data: ['当前流量']
      },
      xAxis: {
        boundaryGap: false,
        data: xAxisData,
        nameLocation: "end",
        axisLine: {
          lineStyle: {
            color: "#454b5026",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#454b5026"],
            width: 1,
            type: "solid",
          },
        },
      },
      textStyle: {
        color: "#a5aaaf",
      },
      yAxis: {
        boundaryGap: false, nameLocation: "end",
        axisLine: {
          lineStyle: {
            color: "#454b5026",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#454b5026"],
            width: 1,
            type: "solid",
          },
        },
      },
      series: {
        symbol: "none",/*去掉小圆点*/
        name: '当前流量',
        type: 'line',
        data: yAxisData,
        showBackground: false,
        itemStyle: {
          normal: {
            color: "#1289ff",
          },
        },
      }
    };

    ecgChart.setOption(totalFlowRateOption);

    setInterval(function () {
      yAxisData.push(Math.round(Math.random() * 1000));
      if (yAxisData.length > 500) {
        yAxisData.shift();
      }
      ecgChart.setOption(totalFlowRateOption);
    }, 1000);
  }
  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);
      },
    });
  }
});