echarts_demo
/
index4.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>院长视图(第四张)</title>
  <link rel="stylesheet" type="text/css" href="./resources/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="./resources/css/style1.css" />
  <script type="text/javascript" src="./resources/js/jquery.min.js"></script>
  <script type="text/javascript" src="./resources/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./resources/js/tangram-min.js"></script>
  <script type="text/javascript" src="./resources/js/tangram-ext.js"></script>
  <script type="text/javascript" src="./resources/js/baiduTemplate.js"></script>
  <script type="text/javascript" src="./resources/js/echarts.js"></script>
  <script type="text/javascript" src="./resources/js/jquery.slimscroll.min.js"></script>

</head>
<body>
<div id="body_main" class="bean_body">
  <div id="bean_header">
    <div class="head_title">院长实时视图</div>
    <div class="head_time">
      <span>日期：</span>
      <span id="getTime"></span>
    </div>
  </div>
  <div id="bean_main">
    <div style="width:100%;height:50%;">
      <table class="bean_btn_line per_100">
        <tr>
          <td class="E_chunk_line">
            <div class="E_chunk_boxDiv">
              <div class="E_chunk_title"><span>门诊量</span></div>
              <div id="real_LINE" class="E_chunk_main">

              </div>
            </div>
          </td>
          <td class="E_chunk_line">
            <div class="E_chunk_boxDiv">
              <div class="E_chunk_title"><span>住院手术</span></div>
              <div id="surgery_LINE" class="E_chunk_main">

              </div>
            </div>
          </td>
          <td class="E_chunk_line">
            <div class="E_chunk_boxDiv">
              <div class="E_chunk_title"><span>门诊手术</span></div>
              <div id="cure_LINE" class="E_chunk_main">

              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div style="width:100%;height:50%;padding:10px;">
      <div class="E_chunk_boxDiv">
        <div class="E_chunk_title"><span>年收入</span></div>
        <div class="E_chunk_main">
          <table class="money_rate per_100">
            <tr>
              <td class="rate_chunk">
                <div id="boxDiv_box" class="E_chunk_main">

                </div>
              </td>
              <td class="rate_chunk">
                <div id="rate_BAR" class="E_chunk_main">

                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!--当前实时收入-->
<script id="IncGrid_tpl" type="text/template">
  <div style="width:100%;height:50%;padding: 15px 5px 5px;">
    <table class="per_100">
      <tr class="per_100">
        [%
        for(var i in data){
        var item;
        if(i<=3){
        item = data[i];
        if(item.name=="总收入"){ %]
        <td>
          <div class="BoxBox">
            <div class="inc_name">[%= item.name %]</div>
            <div style="margin:10px 0;">￥[%= item.money %]</div>
            <div></div >
            <div></div >
          </div>
        </td>
        [%}else{%]
        <td>
          <div class="BoxBox">
            <div class="inc_name">[%= item.name %]</div >
            <div>￥[%= item.money %]</div >
            <div class="progress" title="符合率：[%= item.rate %]%">
              <div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar" aria-valuenow="[%= item.rate %]" aria-valuemin="0" aria-valuemax="100" style="width:[%= item.rate %]%;"></div>
            </div>
            <div>占总收入[%= item.rate %]%</div >
          </div>
        </td>
        [%}}}%]
      </tr>
    </table>
  </div>
  <div style="width:100%;height:50%;padding: 15px 5px 5px;">
    <table class="per_100">
      <tr class="per_100">
        [%
        for(var i in data){
        var item2;
        if(i>3){
        item2 = data[i];
        %]
        <td>
          <div class="BoxBox">
            <div class="inc_name">[%= item2.name %]</div >
            <div>￥[%= item2.money %]</div >
            <div class="progress" title="符合率：[%= item2.rate %]%">
              <div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar" aria-valuenow="[%= item2.rate %]" aria-valuemin="0" aria-valuemax="100" style="width:[%= item2.rate %]%;"></div>
            </div>
            <div>占总收入[%= item2.rate %]%</div >
          </div>
        </td>
        [%}}%]
      </tr>
    </table>
  </div>
</script>

<script type="text/javascript">
  /* 页面加载进来时触发事件 */
  $(window).resize(winresize).trigger('resize');
  $(document).ready(function(){
    var ie = T.browser.ie || 20;
    if(ie <= 8){winresize();}
  });
  var h;
  function winresize() {
    h=$(window).height();
    $('#bean_main').height(h-75);
    /*$('#body_main').css("max-height",h-0).css("overflow","auto");*/
  }

  var btnH=$(".tdBox_tab").height();
  //$('.tdBox .tdBox_tab').slimscroll({height:btnH});

  /*设置时间钟表*/
  function getTIME() {
    var d = new Date();
    var mon = d.getMonth() + 1;
    var day = d.getDate();
    var hou = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var time = (hou < 10 ? '0' : '') + hou + "点" + (min < 10 ? '0' : '') + min + "分" + (sec < 10 ? '0' : '') + sec + "秒";
    var output = d.getFullYear() + "年" + (mon < 10 ? '0' : '') + mon + "月" + (day < 10 ? '0' : '') + day + "日  " + time;

    $("#getTime").text(output);
  };
  setInterval("getTIME()","1000");//每隔1秒调用一次函数getTIME()


  /*门诊量（折线图）*/
  var realx = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
    '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
  ];
  var realy = ['5', '0', '0', '0', '0', '0', '0', '0', '38', '145', '135', '122',
    '37', '12', '25', '85', '62', '42', '17', '15', '13', '10', '15', '6'
  ];
  var realLine = echarts.init(document.getElementById('real_LINE'));
  var realLine_option = {
    tooltip: {trigger: 'axis'},
    legend: {textStyle: {color: '#fff'}, data: ['门诊人次', '门诊预约人次']},
    grid: {right: '4%', left: '4%', bottom: '5%', top: '18%', containLabel: true}, /*设置图像位置*/
    xAxis: {
      type: 'category', boundaryGap: false, /*设置图像离y轴是否有距离*/
      splitLine: {show: true, interval: 0, lineStyle: {color: 'rgba(121,173,207,.5)'}}, /*显示和修改x轴网格线颜色*/
      axisLabel: {show: true, textStyle: {color: '#fff'}}, /*修改x轴显示值颜色*/
      axisLine: {lineStyle: {color: '#fff'}},/*修改x轴线颜色*/
      data:(function (){
        var now =new Date();
        var res = [];
        var len = 24;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
          now = new Date(now - 3000);
        }
        return res;
      })()
    },
    yAxis: {
      name: '单位：人次', nameTextStyle: {color: '#fff'}, type: 'value',
      splitLine: {show: true, lineStyle: {color: 'rgba(121,173,207,.5)'}}, /*显示和修改y轴网格线颜色*/
      axisLabel: {show: true, textStyle: {color: '#fff'}}, /*修改y轴显示值颜色*/
      axisLine: {lineStyle: {color: '#fff'}}/*修改y轴线颜色*/
    },
    series: [
      {
        name: '门诊人次', type: 'line', symbolSize: 6, /*修改这线上小圆点大小*/areaStyle: {normal: {}},
        label: {normal: {show: true, color: '#40CAF9'/*修改显示值颜色*/, position: 'top'}},
        itemStyle: {normal: {color: '#40CAF9', /*修改折线上小圆点颜色*/lineStyle: {color: '#40CAF9'/*修改折线颜色*/}}},
        data: (function (){
          var res = [];
          var len = 0;
          while (len < 24) {
            res.push((Math.random()*140 + 40).toFixed(0) - 0);
            len++;
          }
          return res;
        })()
      },
      {
        name: '门诊预约人次', type: 'line', symbolSize: 6, /*修改这线上小圆点大小*/areaStyle: {normal: {}},//加阴影
        label: {normal: {show: true, color: '#C94BB7'/*修改显示值颜色*/, position: 'top'}},
        itemStyle: {normal: {color: '#C94BB7', /*修改折线上小圆点颜色*/lineStyle: {color: '#C94BB7'/*修改折线颜色*/}}},
        data: (function (){
          var res = [];
          var len = 0;
          while (len < 24) {
            res.push((Math.random()*40 + 5).toFixed(0) - 0);
            len++;
          }
          return res;
        })()
      }
    ]
  };
  realLine.setOption(realLine_option);

  setInterval(function (){
    var data0 = realLine_option.series[0].data;
    var data1 = realLine_option.series[1].data;
    data0.shift();
    data0.push((Math.random()*140 + 40).toFixed(0) - 0);
    data1.shift();
    data1.push((Math.random()*40 + 5).toFixed(0) - 0);
    //var axisData = (new Date()).toLocaleTimeString().replace(/^\D*!/,'');
    var axisData = TimeState(new Date());
    realLine_option.xAxis.data.shift();
    realLine_option.xAxis.data.push(axisData);

    realLine.setOption(realLine_option);
  },3000);

  /*住院手术（折线图）*/
  var surgeryx = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
    '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
  ];
  var surgeryy1 = ['0', '0', '0', '0', '0', '0', '0', '0', '2', '6', '8', '9',
    '9', '9', '11', '14', '16', '16', '16', '16', '16', '16', '16', '16'
  ];
  var surgeryy2 = ['0', '0', '0', '0', '0', '0', '0', '0', '2', '4', '0', '1',
    '2', '0', '2', '3', '2', '0', '0', '0', '0', '0', '0', '0'
  ];
  var surgeryLine = echarts.init(document.getElementById('surgery_LINE'));
  var surgeryLine_option = {
    tooltip: {trigger: 'axis'},
    legend: {textStyle: {color: '#fff'}, data: ['住院手术例数', '住院手术死亡例数']},
    grid: {right: '4%', left: '4%', bottom: '5%', top: '18%', containLabel: true},
    xAxis: {
      type: 'category', boundaryGap: false,
      splitLine: {show: true, interval: 0, lineStyle: {color: 'rgba(121,173,207,.5)'}},
      axisLabel: {show: true, textStyle: {color: '#fff'}},
      axisLine: {lineStyle: {color: '#fff'}},
      data:(function (){
        var now =new Date();
        var res = [];
        var len = 24;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
          now = new Date(now - 3000);
        }
        return res;
      })()
    },
    yAxis: {
      name: '单位：例', nameTextStyle: {color: '#fff'}, type: 'value',
      splitLine: {show: true, lineStyle: {color: 'rgba(121,173,207,.5)'}},
      axisLabel: {show: true, textStyle: {color: '#fff'}},
      axisLine: {lineStyle: {color: '#fff'}}
    },
    series: [
      {
        name: '住院手术例数', type: 'line', symbolSize: 6, label: {normal: {show: true, color: '#D14A61', position: 'top'}},
        itemStyle: {normal: {color: '#D14A61', lineStyle: {color: '#D14A61'}}},
        data:(function (){
          var res = [];
          var len = 0;
          while (len < 24) {
            res.push((Math.random()*20 + 5).toFixed(0) - 0);
            len++;
          }
          return res;
        })()
      },
      {
        name: '住院手术死亡例数', type: 'line', symbolSize: 6, label: {normal: {show: true, color: 'red', position: 'top'}},
        itemStyle: {normal: {color: 'red', lineStyle: {color: 'red'}}},
        data: (function (){
          var res = [];
          var len = 0;
          while (len < 24) {
            res.push((Math.random()*2 + 0).toFixed(0) - 0);
            len++;
          }
          return res;
        })()
      }
    ]
  };
  surgeryLine.setOption(surgeryLine_option);

  setInterval(function (){
    var data0 = surgeryLine_option.series[0].data;
    var data1 = surgeryLine_option.series[1].data;
    data0.shift();
    data0.push((Math.random()*20 + 5).toFixed(0) - 0);
    data1.shift();
    data1.push((Math.random()*2 + 0).toFixed(0) - 0);
    //var axisData = (new Date()).toLocaleTimeString().replace(/^\D*!/,'');
    var axisData = TimeState(new Date());
    surgeryLine_option.xAxis.data.shift();
    surgeryLine_option.xAxis.data.push(axisData);

    surgeryLine.setOption(surgeryLine_option);
  },3000);

  /*门诊手术（折线图）*/
  var curex = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
    '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
  ];
  var curey = ['5', '0', '0', '0', '0', '0', '0', '0', '138', '214', '315', '422',
    '437', '442', '525', '585', '662', '682', '717', '725', '733', '740', '755', '766'
  ];
  var cureLine = echarts.init(document.getElementById('cure_LINE'));
  var cureLine_option = {
    tooltip: {trigger: 'axis'},
    legend: {textStyle: {color: '#fff'}, data: ['门诊手术例数', '门诊手术死亡例数']},
    grid: {right: '4%', left: '4%', bottom: '5%', top: '18%', containLabel: true},
    xAxis: {
      type: 'category', boundaryGap: false,
      splitLine: {show: true, interval: 0, lineStyle: {color: 'rgba(121,173,207,.5)'}},
      axisLabel: {show: true, textStyle: {color: '#fff'}},
      axisLine: {lineStyle: {color: '#fff'}},
      data:(function (){
        var now =new Date();
        var res = [];
        var len = 24;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
          now = new Date(now - 3000);
        }
        return res;
      })()
    },
    yAxis: {
      name: '单位：例', nameTextStyle: {color: '#fff'}, type: 'value',
      splitLine: {show: true, lineStyle: {color: 'rgba(121,173,207,.5)'}},
      axisLabel: {show: true, textStyle: {color: '#fff'}},
      axisLine: {lineStyle: {color: '#fff'}}
    },
    series: [
      {
        name: '门诊手术例数', type: 'line', symbolSize: 6, label: {normal: {show: true, color: '#D06E6B', position: 'top'}},
        itemStyle: {normal: {color: '#D06E6B', lineStyle: {color: '#D06E6B'}}},
        data:  (function (){
          var res = [];
          var len = 0;
          while (len < 24) {
            res.push((Math.random()*15 + 5).toFixed(0) - 0);
            len++;
          }
          return res;
        })()
      },
      {
        name: '门诊手术死亡例数', type: 'line', symbolSize: 6, label: {normal: {show: true, color: 'red', position: 'top'}},
        itemStyle: {normal: {color: 'red', lineStyle: {color: 'red'}}},
        data:  (function (){
          var res = [];
          var len = 0;
          while (len < 24) {
            res.push((Math.random()*2 + 0).toFixed(0) - 0);
            len++;
          }
          return res;
        })()
      }
    ]
  };
  cureLine.setOption(cureLine_option);

  setInterval(function (){
   var data0 = cureLine_option.series[0].data;
   var data1 = cureLine_option.series[1].data;
   data0.shift();
   data0.push((Math.random()*15 + 5).toFixed(0) - 0);
    data1.shift();
    data1.push((Math.random()*2 + 0).toFixed(0) - 0);
   //var axisData = (new Date()).toLocaleTimeString().replace(/^\D*!/,'');
   var axisData = TimeState(new Date());
   cureLine_option.xAxis.data.shift();
   cureLine_option.xAxis.data.push(axisData);

   cureLine.setOption(cureLine_option);
   },3000);

  /*年收入*/
  function realTimeIncome(){
    var incomeData={data:[
      {name:"总收入",money:"25,994,292.24",rate:""},
      {name:"药品收入",money:"945,132.648",rate:"36.22"},
      {name:"治疗收入",money:"5,976,087.785",rate:"22.99"},
      {name:"材料收入",money:"1,848,194.178",rate:"7.15"},
      {name:"手术收入",money:"649,857.3059",rate:"2.51"},
      {name:"麻醉收入",money:"218,352.0548",rate:"0.84"},
      {name:"检查收入",money:"5,102,679.566",rate:"19.63"},
      {name:"其他收入",money:"2,638,420.662",rate:"10.65"}
    ]};
    _get('boxDiv_box').innerHTML = baidu.template('IncGrid_tpl', incomeData);

  };realTimeIncome();

  /*收入占比（柱状图）*/
  var ratex = ['药品收入', '治疗收入', '材料收入', '手术收入', '麻醉收入', '检查收入', '其他收入'];
  var ratey = ['36.22', '22.99', '7.15', '2.51', '0.84', '19.63', '10.65'];

  var rateBar = echarts.init(document.getElementById('rate_BAR'));
  var rateBar_option = {
    tooltip: {trigger: 'axis',axisPointer : {type : 'shadow'}},
    grid: {right: '14%', left: '14%', bottom: '5%', top: '18%', containLabel: true},
    xAxis: {
      type: 'category',
      splitLine: {show: false, interval: 0, lineStyle: {color: 'rgba(121,173,207,.5)'}},
      axisLabel: {show: true, textStyle: {color: '#fff'}},
      axisLine: {lineStyle: {color: '#fff'}},
      data:ratex
    },
    yAxis: {
      name: '占比(%)', nameTextStyle: {color: '#fff'}, type: 'value',
      splitLine: {show: false, lineStyle: {color: 'rgba(121,173,207,.5)'}},
      axisLabel: {show: true, textStyle: {color: '#fff'}},
      axisLine: {lineStyle: {color: '#fff'}}
    },
    series: [{
      name: '占比', type: 'bar',barWidth:25, label: {normal: {show: true, color: '#1794F7', position: 'top'}},
      itemStyle: {normal: {color: '#1794F7', lineStyle: {color: '#1794F7'}}},
      data: ratey
    }]
  };
  rateBar.setOption(rateBar_option);

  /*setInterval(function (){
   var data0 = cureLine_option.series[0].data;
   data0.shift();
   data0.push(Math.round(Math.random() * 1000));
   //var axisData = (new Date()).toLocaleTimeString().replace(/^\D*!/,'');
   var axisData = TimeState(new Date());
   cureLine_option.xAxis.data.shift();
   cureLine_option.xAxis.data.push(axisData);

   cureLine.setOption(cureLine_option);
   },3000);*/


  /*横坐标时间函数*/
  function TimeState(d) {
    var hou = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var time = (hou < 10 ? '0' : '') + hou + ":" + (min < 10 ? '0' : '') + min + ":" + (sec < 10 ? '0' : '') + sec;
    return time;
  };

</script>
</body>
</html>