echarts_demo
/
index3.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">
    <table id="bean_btn" class="per_100">
      <tr>
        <td class="chunk">
          <div class="chunk_grid per_100">
            <div class="tdBox">
              <p class="tdBox_p">死亡事件</p>
              <div id="death_event" class="tdBox_tab">

              </div>
            </div>
            <div class="tdBox">
              <p class="tdBox_p">不良事件</p>
              <div id="badness_event" class="tdBox_tab">

              </div>
            </div>
          </div>
        </td>
        <td class="chunk">
          <div class="chunk_pie per_100">
            <div style="width:100%;height:67%">
              <div id="PieEchart" style="width:100%;height:100%">

              </div>
            </div>
            <div style="width:100%;height:32%;">
              <div class="boxDiv">
                <div class="boxDiv_title"><span>当前实时收入</span></div>
                <div id="boxDiv_box" class="boxDiv_main">

                </div>
              </div>
            </div>
          </div>
        </td>
        <td class="chunk" style="padding-top:0px;">
          <div class="chunk_line per_100">
            <div style="width:100%;height:33.33%;padding:5px 0;">
              <div class="boxDiv">
                <div class="boxDiv_title"><span>门诊实时人次</span></div>
                <div id="real_LINE" class="boxDiv_main">

                </div>
              </div>
            </div>
            <div style="width:100%;height:33.33%;padding:5px 0;">
              <div class="boxDiv">
                <div class="boxDiv_title"><span>门诊总诊疗人次</span></div>
                <div id="cure_LINE" class="boxDiv_main">

                </div>
              </div>
            </div>
            <div style="width:100%;height:33.33%;padding:5px 0;">
              <div class="boxDiv">
                <div class="boxDiv_title"><span>住院手术例数</span></div>
                <div id="surgery_LINE" class="boxDiv_main">

                </div>
              </div>
            </div>
          </div>

        </td>
      </tr>
    </table>
  </div>
</div>
<!--死亡事件表格-->
<script id="EatGrid_tpl" type="text/template">
  <table class="per_100">
    <tr><td>姓名</td><td>性别</td><td>出院时间</td><td>事件类型</td><td>处理状态</td></tr>
    [%
    for(var i in data){
    var item = data[i];
    %]
    <tr><td>[%= item.name %]</td><td>[%= item.sex %]</td><td>[%= item.leave %]</td><td>[%= item.type %]</td><td>[%= item.state %]</td></tr>
    [%}%]
  </table>
</script>
<!--不良事件表格-->
<script id="BdnGrid_tpl" type="text/template">
  <table class="per_100">
    <tr><td>事件类型</td><td>严重程度</td><td>发生日期</td><td>处理状态</td><td>上报人</td></tr>
    [%
    for(var i in data){
    var item = data[i];
    %]
    <tr><td>[%= item.type %]</td><td>[%= item.degree %]</td><td>[%= item.happen %]</td><td>[%= item.state %]</td><td>[%= item.report %]</td></tr>
    [%}%]
  </table>
</script>
<!--当前实时收入-->
<script id="IncGrid_tpl" type="text/template">
  <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>[%= item.name %]</div>
            <div style="margin:10px 0;">￥[%= item.money %]</div>
            <div></div >
            <div></div >
          </div>
        </td>
        [%}else{%]
        <td>
          <div class="BoxBox">
            <div>[%= 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>
    <tr class="per_100">
      [%
      for(var i in data){
      var item2;
      if(i>3){
      item2 = data[i];
      %]
      <td>
        <div class="BoxBox">
          <div>[%= 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>
</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()*/

/*事件表格*/
function eventGrid(){
  //死亡事件表格
  var deathData={data:[
    {name:"XX",sex:"男",leave:"2017/07/17",type:"医师判定意见",state:"已完成"},
    {name:"XXX",sex:"女",leave:"2017/07/18",type:"医师判定意见2",state:"已完成"},
    {name:"XXXX",sex:"男",leave:"2017/07/19",type:"医师判定意见",state:"已完成"},
    {name:"XXX",sex:"女",leave:"2017/07/18",type:"医师判定意见2",state:"已完成"},
    {name:"XX",sex:"男",leave:"2017/07/17",type:"医师判定意见",state:"已完成"}
  ]};
  _get('death_event').innerHTML = baidu.template('EatGrid_tpl', deathData);

  //死亡事件表格
  var badnessData={data:[
    {type:"医师判定意见",degree:"Ⅳ级事件",happen:"2017/07/17",state:"未反馈",report:"匿名"},
    {type:"医师判定意见2",degree:"Ⅳ级事件2",happen:"2017/07/17",state:"未反馈",report:"匿名"},
    {type:"医师判定意见3",degree:"Ⅳ级事件3",happen:"2017/07/17",state:"未反馈",report:"匿名"},
    {type:"医师判定意见3",degree:"Ⅳ级事件3",happen:"2017/07/17",state:"未反馈",report:"匿名"},
    {type:"医师判定意见2",degree:"Ⅳ级事件2",happen:"2017/07/17",state:"未反馈",report:"匿名"},
    {type:"医师判定意见",degree:"Ⅳ级事件",happen:"2017/07/17",state:"未反馈",report:"匿名"}
  ]};
  _get('badness_event').innerHTML = baidu.template('BdnGrid_tpl', badnessData);

};

/*当前实时收入占比（饼状图）*/
//function PieEchart() {
  var pie_series = [{value: 36220, name: '药品收入', itemStyle: {normal: {color: '#0FC8FE'}}},
    {value: 22990, name: '治疗收入', itemStyle: {normal: {color: '#0188CC'}}},
    {value: 19630, name: '检查收入', itemStyle: {normal: {color: '#06B769'}}},
    {value: 7150, name: '材料收入', itemStyle: {normal: {color: '#D48265'}}},
    {value: 2510, name: '手术收入', itemStyle: {normal: {color: '#CDC354'}}},
    {value: 840, name: '麻醉收入', itemStyle: {normal: {color: '#69FED2'}}},
    {value: 10650, name: '其他收入', itemStyle: {normal: {color: '#FD8D1D'}}}
  ];
  var pie_man = echarts.init(document.getElementById('PieEchart'));
  var pie_man_option = {
    title: {text: '当前实时收入占比：', textStyle: {fontWeight: '400', fontSize: '14', color: '#fff'}},
    tooltip: {trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)"},
    legend: {orient: 'vertical', x: 'left', data: []},
    series: [{
      name: '收入占比',
      type: 'pie',
      selectedMode: 'single',
      radius: '50%',
      label: {normal: {formatter: '{b}: {d}%', position: /*'inner'*/'outside'}},
      center: ['50%', '50%'],
      data: pie_series
    }]
  };
  pie_man.setOption(pie_man_option);
//};

/*setInterval(function (){
  var data0 = pie_man_option.series[0].data;
  var arr=data0;
  data0.shift();
  for(var i=0;i<arr.length;i++){
    if(i<=3){
      arr[i].value+=5;
      data0.push(arr[i]);
    }else{
      arr[i].value+=10;
      data0.push(arr[i]);
    }
  }

  pie_man.setOption(pie_man_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();

/*setInterval(function (){
  var incomeData2=[];
  for(var i=0;i<incomeData.data.length;i++){
    if(i=0){
      incomeData.data[i].money+=55;
    }else {
      if (i <= 3) {
        incomeData.data[i].money += 5;
        incomeData.data[i].rate -= 0.01;
        incomeData2.push(incomeData.data[i]);
      } else {
        incomeData.data[i].value += 10;
        incomeData.data[i].rate += 0.01;
        incomeData2.push(incomeData.data[i]);
      }
    }
  }
  _get('boxDiv_box').innerHTML = baidu.template('IncGrid_tpl', incomeData2);

},3000);*/


/*右侧折线图*/

/*门诊实时人次（折线图）*/
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'},
  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, /*修改这线上小圆点大小*/
    label: {normal: {show: true, color: '#0FC8FE'/*修改显示值颜色*/, position: 'top'}},
    itemStyle: {normal: {color: '#0FC8FE', /*修改折线上小圆点颜色*/lineStyle: {color: '#0FC8FE'/*修改折线颜色*/}}},
    data: (function (){
      var res = [];
      var len = 0;
      while (len < 24) {
        res.push((Math.random()*150 + 5).toFixed(0) - 0);
        len++;
      }
      return res;
    })()
  }]
};
realLine.setOption(realLine_option);

setInterval(function (){
  var data0 = realLine_option.series[0].data;
  data0.shift();
  data0.push(Math.round(Math.random() * 200));
  //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 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'},
  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 = TimeState(new Date());
      var now =new Date();
      var res = [];
      var len = 24;
      while (len--) {
        //res.unshift(now);
        //var now2=new Date();
        //var now3=new Date(now2 - 3000);
        //now =TimeState(now3);

        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()*800 + 5).toFixed(0) - 0);
        len++;
      }
      return res;
    })()
  }]
};
cureLine.setOption(cureLine_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);

/*住院手术例数（折线图）*/
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 = TimeState(new Date());
      var res = [];
      var len = 24;
      while (len--) {
        res.unshift(now);
        now =TimeState(new Date(new Date() - 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: 'bar', barWidth: 6, label: {normal: {show: true, color: '#19B7CF', position: 'top'}},
      itemStyle: {normal: {color: '#19B7CF', lineStyle: {color: '#19B7CF'}}},
      data:(function (){
        var res = [];
        var len = 0;
        while (len < 24) {
          res.push((Math.random()*6).toFixed(0) - 0);
          len++;
        }
        return res;
      })()
    },
    {
      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()*10 + 10).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.round(Math.random() * 6));
  data1.shift();
  data1.push(Math.round(Math.random() * 14+6));
  //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);


/*横坐标时间函数*/
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;
};


/*function LineEchart() {
};LineEchart();*/

setInterval("getTIME()","1000");//每隔1秒调用一次函数getTIME()
setInterval("eventGrid()","1000");


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