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

<!DOCTYPE html>
<html>

<head>

  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css" media="all">
  <script src="echarts/echarts.min.js" charset="utf-8"></script>
  <script src="js/layui-v2.5.6/layui/layui.all.js"></script>
  <style type="text/css">
    .clear_box::after {
      content: "";
      display: block;
      clear: both;
    }

    .div_float {
      width: 50%;
      float: left;
    }

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

<body>
  <div class="sjzs_top">

  </div>
  <div class="sjzs_cont clear_box">
    <div class="div_float">
      <div id="main" style="width: 800px;height:400px;margin: 0 auto;"></div>
    </div>
    <div class="div_float">
      <div id="main1" style="width: 800px;height:400px;margin: 0 auto;"></div>
    </div>
  </div>

  <table id="demo" class="layui-hide" lay-filter="xk"></table>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
  </script>

  <script type="text/javascript">
    layui.use('table', function() {
      var table = layui.table;
      table.render({
        elem: '#demo',
        // url: 'files/jclb.json' //数据接口[123, 265, 372, 274][84, 182, 213, 56]
        //   ,
        "data": [{
            "a": "二屯镇",
            "b": "811",
            "d": "542",
            "e": "267",
            "f": "12"
          },
          {
            "a": "黄河涯镇",
            "b": "640",
            "d": "475",
            "e": "156",
            "f": "9"
          },
          {
            "a": "赵虎镇",
            "b": "471",
            "d": "362",
            "e": "103",
            "f": "6"
          },
          {
            "a": "抬头寺镇",
            "b": "403",
            "d": "304",
            "e": "98",
            "f": "1"
          },
          {
            "a": "袁桥镇",
            "b": "375",
            "d": ",278",
            "e": "69",
            "f": "1"
          }
        ],
        cellMinWidth: 80 //全局定义常规单元格的最小宽度
          ,
        page: true //开启分页
          ,
        cols: [
          [ //表头
            {
              field: 'a',
              title: 'TOP 5 乡镇'
            }, {
              field: 'b',
              title: '本月到期评价'
            }, {
              field: 'd',
              title: '已报告评价'
            }, {
              field: 'e',
              title: '未报告评价'
            }, {
              field: 'f',
              title: '已逾期评价'
            }, {
              fixed: 'right',
              title: '查看',
              width: 165,
              align: 'center',
              toolbar: '#barDemo'
            }
          ]
        ]
      });
      //监听行工具事件
      table.on('tool(xk)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
          ,
          layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'detail') {
          layer.msg('查看详情');
        }
      });
    });



    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));



    option = {
      title: {
        text: '乡镇评估情况'
      },
      color: ['#003366', '#e5323e'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['确诊', '疑似']
      },
      toolbox: {
        show: false,
        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',
        axisLabel: {
          interval: 0
        },
        axisTick: {
          show: false
        },
        data: ['二屯镇', '黄河涯镇', '赵虎镇', '抬头寺镇', '袁桥镇']
      }],
      yAxis: [{
        type: 'value'
      }],
      series: [{
          name: '已报告评价',
          type: 'bar',
          barGap: 0,
          barWidth: 35,
          data: [542, 475, 362, 304, 278]
        },
        {
          name: '未报告评价',
          type: 'bar',
          barWidth: 35,
          data: [267, 156, 103, 98, 69]
        }
      ]
    };

    myChart.setOption(option);
    var myChart1 = echarts.init(document.getElementById('main1'));


    option1 = {
      title: {
        text: '乡镇已报告评价统计',
        subtext: '统计数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['二屯镇', '黄河涯镇', '赵虎镇', '抬头寺镇', '袁桥镇']
      },
      series: [{
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [{
            name: '二屯镇',
            value: 542
          },
          {
            value: 475,
            name: '黄河涯镇'
          },
          {
            value: 362,
            name: '赵虎镇'
          },
          {
            value: 304,
            name: '抬头寺镇'
          },
          {
            value: 278,
            name: '袁桥镇'
          }
        ]
      }]
    };

    myChart1.setOption(option1);
  </script>
</body>

</html>