luolei 5 年之前
父節點
當前提交
18c79eafb1
共有 3 個文件被更改,包括 687 次插入140 次删除
  1. 194 65
      src/css/console.less
  2. 86 16
      src/html/console.html
  3. 407 59
      src/js/console.js

+ 194 - 65
src/css/console.less

@@ -6,13 +6,12 @@
 .barChartPay {
   width: 100%;
   height: 300px;
-  padding: 0 15px;
 }
 .emptyCircle {
-  width: 45%;
+  width: 35%;
   height: 200px;
   float: left;
-  margin-top: 56px;
+  margin-top: 32px;
 }
 .partAll {
   background-color: #fff;
@@ -132,79 +131,39 @@
   margin-right: 0;
 }
 .pubEchart {
-  width: 50%;
+  width: 100%;
   display: inline-block;
   margin-bottom: 10px;
   background-color: #fff;
+  border-top: 10px solid #f5f5f5;
+}
+.pubEchartB {
+  width: 55%;
+  display: inline-block;
+  margin-bottom: 10px;
+  background-color: #fff;
+  border-top: 10px solid #f5f5f5;
+  border-left: 10px solid #f5f5f5;
+  box-sizing: border-box;
 }
 .paymoney {
-  border-right: 5px solid #f5f5f5;
   box-sizing: border-box;
 }
 .dept {
-  border-left: 5px solid #f5f5f5;
   box-sizing: border-box;
 }
-.defect {
-  border-right: 5px solid #f5f5f5;
+.circle {
+  height: 304px;
+  width: 100%;
+  display: inline-block;
   background-color: #fff;
   box-sizing: border-box;
-  width: 45%;
-  display: inline-block;
-  height: 350px;
-  overflow: hidden;
-  .list {
-    padding: 15px 30px;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: auto;
-    height: 308px;
-  }
-  .thead {
-    td {
-      color: #51649C;
-    }
-  }
-  .qtable {
-    width: 100%;
-    overflow: auto;
-  }
-  td {
-    padding: 7px 10px;
-    i {
-      width: 17px;
-      height: 17px;
-      line-height: 17px;
-      border-radius: 8px;
-      background-color: #999;
-      color: #fff;
-      display: inline-block;
-      text-align: center;
-      font-size: 12px;
-    }
-  }
-  tr {
-    border-bottom: 1px solid #f5f5f5;
-    box-sizing: border-box;
-  }
-  .td01 {
-    width: 30px;
-  }
-  .td02 {
-    
-  }
-  .td03 {
-    width: 40px;
-  }
-  .td04 {
-    width: 40px;
-  }
+  position: relative;
 }
-.circle {
+.circleB {
   height: 350px;
-  width: 55%;
+  width: 45%;
   display: inline-block;
-  border-left: 5px solid #f5f5f5;
   background-color: #fff;
   box-sizing: border-box;
   position: relative;
@@ -214,14 +173,14 @@
   overflow: hidden;
 }
 .explainPan {
-  width: 50%;
+  width: 60%;
   float: right;
   position: absolute;
   top: 50%;
-  left: 50%;
+  right: 0;
   padding-right: 30px;
   box-sizing: border-box;
-  max-height: 300px;
+  max-height: 250px;
   overflow: auto;
   table {
     width: 100%;
@@ -241,7 +200,7 @@
       margin-right: 10px;
     }
     .deptName {
-      width: 115px;
+      width: 80px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -260,4 +219,174 @@
       width: 40px;
     }
   }
+}
+
+
+.part01 {
+  width: 28%;
+  background-color: #fff;
+  border-right: 10px solid #f5f5f5;
+  box-sizing: border-box;
+  ul {
+    padding: 40px 20px;
+    border-bottom: 10px solid #f5f5f5;
+    li {
+      float: left;
+      width: 33.33%;
+      border-left: 3px solid #F2637B;
+      height: 72px;
+      box-sizing: border-box;
+      padding-left: 12px;
+      &.li02 {
+        border-left: 3px solid #37CBCB;
+      }
+      &.li03 {
+        border-left: 3px solid #FAD336;
+      }
+    }
+  }
+  
+  .defect {
+    background-color: #fff;
+    height: 452px;
+    overflow: hidden;
+    .list {
+      padding: 15px 5px;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: auto;
+      height: 405px;
+    }
+    .thead {
+      td {
+        color: #51649C;
+      }
+    }
+    .qtable {
+      width: 100%;
+      overflow: auto;
+    }
+    td {
+      padding: 7px 10px;
+      i {
+        width: 17px;
+        height: 17px;
+        line-height: 17px;
+        border-radius: 8px;
+        background-color: #999;
+        color: #fff;
+        display: inline-block;
+        text-align: center;
+        font-size: 12px;
+      }
+    }
+    tr {
+      border-bottom: 1px solid #f5f5f5;
+      box-sizing: border-box;
+    }
+    .td01 {
+      width: 30px;
+    }
+    .td02 {
+      
+    }
+    .td03 {
+      width: 40px;
+    }
+    .td04 {
+      width: 40px;
+    }
+  }
+}
+.part02{
+  border-right: 10px solid #f5f5f5;
+  box-sizing: border-box;
+  width: 39%;
+  background-color: #fff;
+  .bingli {
+    padding: 20px;
+    li {
+      float: left;
+      width: 23%;
+      text-align: center;
+    }
+    .fst {
+      // border-right: 1px solid #E2E5EF;
+      box-sizing: border-box;
+      width: 30%;
+    }
+  }
+  .bingliLis {
+    border-top: 1px solid #E2E5EF;
+    padding: 20px 30px;
+    p {
+      text-align: center;
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+  .panPartPub {
+    width: 33.33%;
+    height: 130px;
+    float: left;
+    position: relative;
+    p {
+      text-align: center;
+      font-size: 12px;
+      font-weight: normal;
+      width: 100px;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      margin-left: -50px;
+    }
+    .fen {
+      width: 100px;
+      height: 100px;
+      position: absolute;
+      left: 50%;
+      margin-left: -50px;
+    }
+  }
+}
+.part03 {
+  width: 33%;
+  background-color: #fff;
+  .barChartLine {
+    box-sizing: border-box;
+    width: 100%;
+    height: 300px;
+  }
+  .barChartLineBox {
+    border-bottom: 10px solid #f5f5f5;
+    width: 100%;
+    padding-left: 15px;
+  }
+}
+
+.partTitlePub {
+  height: 44px;
+  line-height: 44px;
+  padding: 0 15px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #E2E5EF;
+  font-weight: bold;
+  font-size: 16px;
+  .name {
+    float: left;
+    font-size: 16px;
+  }
+  .personNum {
+    float: right;
+    color: #51649C;
+  }
+}
+
+.numShow {
+  font-size: 28px;
+  line-height: 40px;
+  font-weight: bold;
+}
+.explainNum {
+  margin-top: 8px;
 }

+ 86 - 16
src/html/console.html

@@ -13,31 +13,85 @@
       <span class="year">本年</span>
     </div> 
   </div>
-  <div id="lineChart" class="barChartPay"></div>
   <div class="grayLine"></div>
   <div class="partWrap clearfix">
-    <ul class="clearfix partAll">
+    <!-- <ul class="clearfix partAll">
 
-    </ul>
-    <div class="grayLine"></div>
-    <div class="pubEchart paymoney">
-      <p class="title">医院运行指标</p>
-      <div id="barChartPay" class="barChartPay"></div>
-    </div>
-    <div class="pubEchart dept">
-      <p class="title">医院运行指标</p>
-      <div id="barChart" class="echarts"></div>
-    </div>
-    
-    <div class="btmWrap">
-      <div class="defect fl">
-        <p class="title">缺陷排行列表</p>
+    </ul> -->
+    <div class="part01 fl">
+      <p class="partTitlePub clearfix">
+        <span class="name">出院人数统计</span>
+        <span class="personNum">总人数:0</span>
+      </p>
+      <ul class="clearfix">
+        <li>
+          <p class="numShow died">0</p>
+          <p class="explainNum">死亡人数</p>
+        </li>
+        <li class="li02">
+          <p class="numShow newborn">0</p>
+          <p class="explainNum">新生儿人数</p>
+        </li>
+        <li class="li03">
+          <p class="numShow patientNum">0</p>
+          <p class="explainNum">手术病人数</p>
+        </li>
+      </ul>
+      <div class="defect">
+        <p class="partTitlePub">各模块缺陷占比排名</p>
         <div class="list">
           <table class="qtable">
 
           </table>
         </div>
       </div>
+    </div>
+    <div class="part02 fl">
+      <ul class="bingli clearfix">
+        <li class="fst">
+          <p class="numShow">0</p>
+          <p class="explainNum">累计质控病历数</p>
+        </li>
+        <li>
+          <p class="numShow">0</p>
+          <p class="explainNum">甲级病历</p>
+        </li>
+        <li>
+          <p class="numShow">0</p>
+          <p class="explainNum">乙级病历</p>
+        </li>
+        <li>
+          <p class="numShow">0</p>
+          <p class="explainNum">丙级病历</p>
+        </li>
+      </ul>
+      <div class="bingliLis clearfix">
+        <p>病历评分等级占比</p>
+        <div class="panPartPub panPart01">
+          <div class="fen" id="fen01"></div>
+          <p>乙级占比</p>
+        </div>
+        <div class="panPartPub panPart02">
+          <div class="fen" id="fen02"></div>
+          <p>甲级占比</p>
+        </div>
+        <div class="panPartPub panPart03">
+          <div class="fen" id="fen03"></div>
+          <p>丙级占比</p>
+        </div>
+      </div>
+      <div class="pubEchart paymoney">
+        <p class="title">科室平均住院天数柱状图</p>
+        <div id="barChart" class="barChartPay"></div>
+      </div>
+    </div>
+    <div class="part03 fl">
+      <p class="partTitlePub clearfix">
+        <span class="name">各科室甲级病历占比</span>
+      </p>
+      <div class="barChartLineBox">
+        <div id="lineChart" class="barChartLine"></div>
+      </div>
       <div class="circle clearfix">
         <p class="title">各科室缺陷占比</p>
         <div id="emptyCircle" class="emptyCircle"></div>
@@ -48,6 +102,22 @@
         </div>
       </div>
     </div>
+    <div class="part04 clearfix">
+      <div class="circleB clearfix">
+        <p class="title">条目缺陷占比</p>
+        <div id="emptyCircleB" class="emptyCircle"></div>
+        <div class="explainPan explainPanB">
+          <table>
+            
+          </table>
+        </div>
+      </div>
+      
+      <div class="pubEchartB paymoney">
+        <p class="title">各科室质控评分柱状图</p>
+        <div id="barChartPay" class="barChartPay"></div>
+      </div>
+    </div>
   </div>
 </body>
 </html>

+ 407 - 59
src/js/console.js

@@ -88,16 +88,26 @@ function initConsole(result){
 }
 //获取图表数据
 function getBarData(type){
-    post('/console/mrStatistics',{
+    post('/console/mrStatistics',{//出院人数统计,各科室甲级病历占比,病历数统计
         "type": type||1//1月2年
     }).then((res)=>{
         let data = res.data;
         if(data.code == 0){
             let result = data.data
-            initConsole(result)
+            let result1 = data.data['出院人数统计']||[]
+            let result2 = data.data['各科室甲级病历占比']||[]
+            let result3 = data.data['病历数统计']||[]
+            let dataX2=[],dataY2=[];
+            for(let i = 0;i < result2.length;i++){
+                dataX2.push(result2[i].deptName)
+                dataY2.push(result2[i].firstPercent.replace('%',''))
+            }
+            personNum(result1)
+            lineChart(dataX2,dataY2)
+            setNumDetail(result3)
         }
     })
-    post('/console/averageStatistics',{//柱状数据
+    post('/console/averageStatistics',{//平均住院日,平均住院费用,各科室质控平均分
         type:type||1
     }).then((res)=>{
         let data = res.data;
@@ -109,39 +119,155 @@ function getBarData(type){
                 dataX1.push(result1[i].deptName)
                 dataY1.push(result1[i].averageValue)
             }
-            for(let i = 0;i < result2.length;i++){
-                dataX2.push(result2[i].deptName)
-                dataY2.push(result2[i].averageValue)
-            }
             barChartPay(dataX1,dataY1)
-            barChart(dataX2,dataY2)
+            barChart(result2)
         }
     })
-    post('/console/resultStatistics',{//饼图数据
+    post('/console/resultStatistics',{//各科室缺陷占比,各模块缺陷占比排行,条目缺陷占比
         type:type||1
     }).then((res)=>{
         let data = res.data;
         if(data.code == 0){
-            let result1 = data.data['缺陷排行列表']||[]
+            let result1 = data.data['各模块缺陷占比排行']||[]
             let result2 = data.data['各科室缺陷占比']||[]
+            let result3 = data.data['条目缺陷占比']||[]
             for(let i = 0;i < result2.length;i++){
                 result2[i].value = result2[i].num
             }
+            for(let i = 0;i < result3.length;i++){
+                result3[i].value = result3[i].num
+            }
             queList(result1)
             emptyCircle(result2)
+            emptyCircleB(result3)
             panDetail(result2)
-            lineChart()
+            panDetailB(result3)
         }
     })
 }
+//part01
+function personNum(data){
+    $(".personNum").html("总人数:"+data['总人数'])
+    $(".died").html(data['死亡人数'])
+    $(".newborn").html(data['新生儿人数'])
+    $(".patientNum").html(data['手术病人数'])
+}
+//part02
+function setNumDetail(data){
+    if(data.length == 0)return
+    let str = ''
+    for(let i = 0;i < data.length;i++){
+        str += `
+            <li class="${i==0?'fst':''}">
+            <p class="numShow">${data[i].num}</p>
+            <p class="explainNum">${data[i].name}</p>
+            </li>
+        `
+        if(data[i].name == '甲级病历'){
+            let tmp = []
+            data[i].value = data[i].num
+            tmp.push(data[i])
+            tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
+            part02pan(tmp,'fen01')
+        }
+        if(data[i].name == '乙级病历'){
+            let tmp = []
+            data[i].value = data[i].num
+            tmp.push(data[i])
+            tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
+            part02pan(tmp,'fen02')
+        }
+        if(data[i].name == '丙级病历'){
+            let tmp = []
+            data[i].value = data[i].num
+            tmp.push(data[i])
+            tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
+            part02pan(tmp,'fen03')
+        }
+    }
+    $('.bingli').html(str)
+}
+
+//part02pan
+function part02pan(data,dom){
+    dom = echarts.init(document.getElementById(dom));
+    $(window).resize(function(){
+        dom.resize()
+    });
+    let bgColor = '#fff';
+    let title = '总量';
+    let color = ['#37CBCB','#dedede'];
+    let echartData = data;
+    option = {
+        backgroundColor: bgColor,
+        color: color,
+        title: [{
+            text:'{val|' + echartData[0].percentStr + '}',
+            top: 'center',
+            left: 'center',
+            textStyle: {
+                rich: {
+                    val: {
+                        fontSize: 14,
+                        color: '#333',
+                        fontWeight: 'bold',
+                        padding: [10, 0]
+                    },
+                    name: {
+                        fontSize: 12,
+                        fontWeight: 'normal',
+                        color: '#777',
+                    }
+                }
+            }
+        }],
+        series: [{
+            name: '',
+            type: 'pie',
+            radius: ['70%', '90%'],
+            data: echartData,
+            hoverAnimation:false,
+            label: {
+                normal: {
+                    show:false,
+                }
+            },
+        }]
+    };      
+    dom.setOption(option);
+}
 //折现图
 function lineChart(dataX,dataY){
     var myCharts = echarts.init(document.getElementById('lineChart'));
+    $(window).resize(function(){
+        myCharts.resize()
+    });
     option = {
         color:"#5A8EEE",
         tooltip: {
-            trigger: 'axis'
+            trigger: 'axis',
+            color:'#fff',
+            formatter: function(param) {           
+                return '<div style="color:#fff;"> '+ param[0].name + "<br>" +"甲级病历占比:"+ param[0].value+"%" + "<br>"
+                '</div>'
+            }
         },
+        grid: {
+            left: '3%',
+            right: '5%',
+            bottom: '3%',
+            containLabel: true
+        },
+        title:[{
+            text: '百分比',
+            top: 15,
+            left: 0,
+            textStyle: {
+                fontSize: 14,
+                color:'#666666',
+                fontWeight: 400
+            }
+        }],
         toolbox: {
             show: false,
             feature: {
@@ -164,7 +290,7 @@ function lineChart(dataX,dataY){
         xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            data: dataX,
             axisLabel: {//x轴刻度
                 textStyle: {
                     color: '#333'
@@ -180,7 +306,7 @@ function lineChart(dataX,dataY){
         yAxis: {
             type: 'value',
             axisLabel: {
-                formatter: '{value} °C',
+                formatter: '{value} %',
                 textStyle: {
                     color: '#333333'
                 }
@@ -200,20 +326,9 @@ function lineChart(dataX,dataY){
         },
         series: [
             {
-                name: '最高气温',
+                name: '甲级病历占比:',
                 type: 'line',
-                data: [11, 11, 15, 13, 12, 13, 10],
-                // markPoint: {
-                //     data: [
-                //         {type: 'max', name: '最大值'},
-                //         {type: 'min', name: '最小值'}
-                //     ]
-                // },
-                // markLine: {
-                //     data: [
-                //         {type: 'average', name: '平均值'}
-                //     ]
-                // }
+                data: dataY,
             }
         ]
     };
@@ -304,18 +419,110 @@ function barChartPay(dataX,dataY){
     myCharts.setOption(option);
 }
 //柱状图住院日期
-function barChart(dataX,dataY){
+function barChart(data){
     var myChart = echarts.init(document.getElementById('barChart'));
-    var lengthNum = dataX.length;
     $(window).resize(function(){
         myChart.resize()
     });
+    var posList = [
+        'left', 'right', 'top', 'bottom',
+        'inside',
+        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
+        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
+    ];
+    let app = {}
+    app.configParameters = {
+        rotate: {
+            min: -90,
+            max: 90
+        },
+        align: {
+            options: {
+                left: 'left',
+                center: 'center',
+                right: 'right'
+            }
+        },
+        verticalAlign: {
+            options: {
+                top: 'top',
+                middle: 'middle',
+                bottom: 'bottom'
+            }
+        },
+        position: {
+            options: echarts.util.reduce(posList, function (map, pos) {
+                map[pos] = pos;
+                return map;
+            }, {})
+        },
+        distance: {
+            min: 0,
+            max: 100
+        }
+    };
+    app.config = {
+        rotate: 90,
+        align: 'left',
+        verticalAlign: 'middle',
+        position: 'insideBottom',
+        distance: 15,
+        onChange: function () {
+            var labelOption = {
+                normal: {
+                    rotate: app.config.rotate,
+                    align: app.config.align,
+                    verticalAlign: app.config.verticalAlign,
+                    position: app.config.position,
+                    distance: app.config.distance
+                }
+            };
+            myChart.setOption({
+                series: [{
+                    label: labelOption
+                }, {
+                    label: labelOption
+                }, {
+                    label: labelOption
+                }, {
+                    label: labelOption
+                }]
+            });
+        }
+    };
+    var labelOption = {
+        show: false,
+        position: app.config.position,
+        distance: app.config.distance,
+        align: app.config.align,
+        verticalAlign: app.config.verticalAlign,
+        rotate: app.config.rotate,
+        formatter: '{c}  {name|{a}}',
+        fontSize: 12,
+        rich: {
+            name: {
+                textBorderColor: '#fff'
+            }
+        }
+    };
+    let dataX = []
+    let data1 = []
+    let data2 = []
+    let data3 = []
+    for(let i = 0;i < data.length;i++){
+        dataX.push(data[i].name)
+        data1.push(data[i].averageValue)
+        data2.push(data[i].lastAverageValue)
+        data3.push(data[i].lastYearAverageValue)
+    }
+
+    console.log(dataX)
     option = {
-        color: ['#3398DB'],
+        color: ['#5A8EEE', '#FAD336', '#37CBCB'],
         tooltip: {
             trigger: 'axis',
-            axisPointer: {            // 坐标轴指示器,坐标轴触发有效
-                type: 'line'        // 默认为直线,可选为:'line' | 'shadow'
+            axisPointer: {
+                type: 'shadow'
             }
         },
         grid: {
@@ -324,18 +531,48 @@ function barChart(dataX,dataY){
             bottom: '3%',
             containLabel: true
         },
+        title:[{
+            text: '天数',
+            top: 15,
+            left: 10,
+            textStyle: {
+                fontSize: 14,
+                color:'#666666',
+                fontWeight: 400
+            }
+        }],
+        legend: {
+            itemWidth :8,
+            itemHeight :8,
+            right:15,
+            top:15,
+            formatter: function (name) {
+                return name;
+            }
+        },
+        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',
-                data: dataX,
-                axisTick: {
-                    alignWithLabel: true
-                },
+                axisTick: {show: false},
+                data:  dataX,
                 axisLabel: {//x轴刻度
                     textStyle: {
                         color: '#333'
                     },
-                    rotate:lengthNum>8?30:0
+                    rotate:'45'
                 },
                 axisLine: {//x轴
                     lineStyle:{
@@ -353,43 +590,43 @@ function barChart(dataX,dataY){
                 axisTick: {
                     show: false
                 },
-                axisLabel: {//y轴刻度
-                    textStyle: {
-                        color: '#333333'
-                    }
-                },
                 splitLine:{//分割线
                     lineStyle:{
                         color:'#EFF3FC'
                     }
                 }
             }
-            
         ],
-        title:[{
-            text: '平均住院日',
-            top: 15,
-            left: 10,
-            textStyle: {
-                fontSize: 14,
-                color:'#666666',
-                fontWeight: 400
-            }
-        }],
         series: [
             {
-                name: '平均住院日',
+                name: '上月',
                 type: 'bar',
-                barWidth:  lengthNum<5?'8%':'23%',
-                data: dataY
+                barGap: 0,
+                label: labelOption,
+                barWidth: '15%',
+                data: data2
+            },
+            {
+                name: '去年本月',
+                type: 'bar',
+                label: labelOption,
+                barWidth: '15%',
+                data: data3
+            },
+            {
+                name: '本月',
+                type: 'bar',
+                label: labelOption,
+                barWidth: '15%',
+                data: data1
             }
         ]
     };
     myChart.setOption(option);
-    
 }
 //空心饼图
 function emptyCircle(data){
+    console.log(data,1111111111)
     var myChart = echarts.init(document.getElementById('emptyCircle'));
     $(window).resize(function(){
         myChart.resize()
@@ -398,7 +635,101 @@ function emptyCircle(data){
     let title = '总量';
     let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
     let echartData = data;
-    console.log(echartData)
+    let total = 0;
+    for(let i = 0;i < echartData.length;i++){
+        total += echartData[i].num
+    }
+    option = {
+        backgroundColor: bgColor,
+        color: color,
+        title: [{
+            text: data.length>0?'{val|' + total + '}\n{name|' + title + '}':'',
+            top: 'center',
+            left: 'center',
+            textStyle: {
+                rich: {
+                    val: {
+                        fontSize: 24,
+                        color: '#333',
+                        fontWeight: 'bold',
+                        padding: [10, 0]
+                    },
+                    name: {
+                        fontSize: 12,
+                        fontWeight: 'normal',
+                        color: '#777',
+                    }
+                }
+            }
+        }],
+        tooltip: {
+            trigger: 'item',
+            // formatter: '{b} : {c}  ({d}%)',
+            formatter:function(item){
+                const {name, num, percentStr} = item.data
+                return `${name} : ${num} (${percentStr})`
+            }
+        },
+        series: [{
+            name: '',
+            type: 'pie',
+            radius: ['70%', '90%'],
+            data: echartData,
+            hoverAnimation:true,
+            hoverOffset:5,
+            itemStyle: {
+                normal: {
+                    borderColor: bgColor,
+                    borderWidth: 2
+                }
+            },
+            labelLine: {
+                normal: {
+                    length: 20,
+                    length2: 120,
+                    lineStyle: {
+                        color: '#e6e6e6'
+                    }
+                }
+            },
+            label: {
+                normal: {
+                    show:false,
+                    formatter: params => {
+                        return params.name == 'A类'?params.name:''
+                    },
+                    padding: [0 , -100, 25, -100],
+                    rich: {
+                        icon: {
+                            fontSize: 16
+                        },
+                        name: {
+                            fontSize: 14,
+                            padding: [0, 10, 0, 4],
+                            color: '#666666'
+                        },
+                        value: {
+                            fontSize: 18,
+                            fontWeight: 'bold',
+                            color: '#333333'
+                        }
+                    }
+                }
+            },
+        }]
+    };      
+    myChart.setOption(option);
+}
+function emptyCircleB(data){
+    var myChart = echarts.init(document.getElementById('emptyCircleB'));
+    $(window).resize(function(){
+        myChart.resize()
+    });
+    let bgColor = '#fff';
+    let title = '总量';
+    let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
+    let echartData = data;
+    console.log(data)
     let total = 0;
     for(let i = 0;i < echartData.length;i++){
         total += echartData[i].num
@@ -512,7 +843,7 @@ function panDetail(data){
     for(let i = 0;i < data.length;i++){
         strAll += `
             <tr class="explainLi">
-                <td class="deptName"><i class="tip" style="background-color:${color[i]}"></i>${data[i].name}</td>
+                <td class="deptName" title="${data[i].name}"><i class="tip" style="background-color:${color[i]}"></i>${data[i].name}</td>
                 <td class="deptNum">${data[i].num}</td>
                 <td class="percent">(${data[i].percentStr})</td>
             </tr>
@@ -522,4 +853,21 @@ function panDetail(data){
     $(".explainPan").css({
         marginTop:-($(".explainPan").height()/2-20)+'px'
     })
+}
+function panDetailB(data){
+    let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
+    let strAll = '';
+    for(let i = 0;i < data.length;i++){
+        strAll += `
+            <tr class="explainLi">
+                <td class="deptName" title="${data[i].name}"><i class="tip" style="background-color:${color[i]}"></i>${data[i].name}</td>
+                <td class="deptNum">${data[i].num}</td>
+                <td class="percent">(${data[i].percentStr})</td>
+            </tr>
+        `
+    }
+    $(".explainPanB table").html(strAll);
+    $(".explainPan").css({
+        marginTop:-($(".explainPan").height()/2-20)+'px'
+    })
 }