layui-admin/admin/static/js/chart/histogram.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 histogramChart = echarts.init(document.getElementById("histogramChart"));
  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: ["100", "200", "50", "250", "100"],
      seriesData: [100, 700, 50, 250, 100],
    }; //api 请求数据
    renderHistogramChart(responseTimeOptions);
  }
  function renderHistogramChart({ xAxisData, seriesData }) {
    var option = {
      xAxis: {
        type: 'category',
        data: xAxisData,
        name: "响应时长/ms",
        nameLocation: "end",
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            color: "#454b5026",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#454b5026"],
            width: 1,
            type: "solid",
          },
        }
      },
      yAxis: {
        type: 'value',
        name: "请求个数",
        nameLocation: "end",
        splitNumber: 4,
        axisLine: {
          lineStyle: {
            color: "#454b5026",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#454b5026"],
            width: 1,
            type: "solid",
          },
        }
      },
      textStyle: {
        color: "#a5aaaf",
      },
      series: [{
        data: seriesData,
        type: 'bar',
        barMinWidth: '180',
        barCategoryGap: "0",
        showBackground: false,
        backgroundStyle: {
          color: 'rgba(18, 137, 255, 1)',
        },
        itemStyle: {
          normal: {
            label: {
              formatter: "{c}",
              show: true,
              position: "top",
              textStyle: {
                fontWeight: "bolder",
                fontSize: "16",
                color: "#1289ff"
              }
            },
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#1289ff",
              },
              {
                offset: 1,
                color: "#1289ff4d",
              },
            ]),
          },
        }
      }]
    };
    histogramChart.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);
      },
    });
  }
});