ZhiYeJianKang/职业健康平台后端/target/dzzyb/static/quxian/xxjlcxqjcx.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学习记录查询</title>

  <script src="js/layui-v2.5.4/layui/layui.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>

  <link rel="stylesheet" type="text/css" href="./js/layui-v2.5.4/layui/css/layui.css" />
  <style type="text/css">
    .cont_daping_right {
      width: 600px;
      background: #2e3347;
      border-radius: 8px;
      padding-top: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      margin-top: 50px;
      margin-left: -40px;
    }

    .daping_box_bottom_con {
      width: 28%;
      left: 50%;
      box-sizing: border-box;
      border-radius: 8px;
      margin-top: 10px;
      padding-top: 10px;
    }

    .daping_box_bottom {
      width: 500px;
      margin: auto;
    }

    .layui-btn-primary {
      border: 1px solid #C9C9C9;
      background-color: #01b9dd !important;
      color: white !important;
    }
  </style>
</head>

<body>
  <div class="daping_box_bottom clear_box">


    <div class="cont_daping_right">
      <div id="main2" style="width: 600px;height:350px;"></div>
    </div>



  </div>
  <table id="demo" class="layui-hide" lay-filter="xk"></table>
  </table>
  <script src="js/layui-v2.5.6/layui/layui.all.js"></script>
  <script type="text/javascript">
    //基于准备好的dom，初始化echarts实例
    var myChart3 = echarts.init(document.getElementById('main2'));


    var option = {
      title: {
        text: '人数',
        left: 'left',
        textStyle: {
          color: '#FFF'
        }
      },
      color: ['#3398DB', '#00FF00', '#e5323e'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['已学习人数', '合格人数', '未学习人数']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['line', 'bar', 'stack', 'tiled']
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      xAxis: [{

        type: 'category',
        data: ['岗前培训二试题', '岗前培训一试题', '普通话培训', '基础课程一'],
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#FFF', //左边线的颜色
            width: '1' //坐标线的宽度
          }
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          show: true,
          splitNumber: 15,
          color: "#FFF",
          textStyle: {
            //fontFamily: "微软雅黑",
            fontSize: 12,
          },

        }
      }],
      yAxis: [{

        type: 'value',
        splitLine: { //分割线
          show: true,
          color: "#fff",
          lineStyle: {
            color: '#FFF'
          }
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#FFF', //左边线的颜色
            width: '1' //坐标线的宽度
          }
        },
        axisLabel: {
          interval: 0,
          rotate: 0,
          show: true,
          splitNumber: 30,
          color: "#FFF",
          textStyle: {
            //fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },







      }],
      series: [{
          name: '已学习人数',
          type: 'bar',
          barGap: 0,

          data: [30, 50, 0, 25]
        },
        {
          name: '合格人数',
          type: 'bar',

          data: [30, 48, 0, 24]
        },
        {
          name: '未学习人数',
          type: 'bar',
          label: "jfkasldj",
          data: [28, 7, 60, 15]
        }
      ]
    };




    myChart3.setOption(option);




    layui.use('table', function() {
      var table = layui.table;
      table.render({
        elem: '#demo',
        data: [{
              "xxmc": "岗前培训二试题",
              "yxxrs": "30",
              "hgrs": "30",
              "wxirs": "28",
            },
            {
              "xxmc": "岗前培训一试题",
              "yxxrs": "50",
              "hgrs": "48",
              "wxirs": "7",
            },
            {
              "xxmc": "普通话培训",
              "yxxrs": "0",
              "hgrs": "0",
              "wxirs": "60",
            },
            {
              "xxmc": "基础课程一",
              "yxxrs": "25",
              "hgrs": "24",
              "wxirs": "15",
            }
          ] //数据接口
          ,
        cellMinWidth: 80 //全局定义常规单元格的最小宽度
          ,
        cols: [
          [ //表头
            {
              field: 'xxmc',
              title: '学习名称'
            }, {
              field: 'yxxrs',
              title: '已学习人数'
            },
            {
              field: 'hgrs',
              title: '合格人数'
            }, {
              field: 'wxirs',
              title: '未学习人数'
            }
          ]
        ]
      });
    });
  </script>
</body>

</html>