Browse Source

首页折线demo

luolei 5 years ago
parent
commit
0f116e1526
3 changed files with 100 additions and 11 deletions
  1. 3 1
      src/css/console.less
  2. 10 9
      src/html/console.html
  3. 87 1
      src/js/console.js

+ 3 - 1
src/css/console.less

@@ -91,10 +91,12 @@
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;
-  text-align: center;
   p {
     display: inline-block;
     font-size: 16px;
+    span {
+      font-size: 16px;
+    }
   }
   .monthYear {
     float: right;

+ 10 - 9
src/html/console.html

@@ -6,17 +6,18 @@
   <title>Document</title>
 </head>
 <body >
-    <div class="partTitle">
-      <p></p>
-      <div class="monthYear">
-        <span class="mon">本月</span>
-        <span class="year">本年</span>
-      </div> 
-    </div>
-    <div class="grayLine"></div>
+  <div class="partTitle">
+    <p><span></span>质控科数据概览</p>
+    <div class="monthYear">
+      <span class="mon">本月</span>
+      <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>
     <div class="grayLine"></div>
     <div class="pubEchart paymoney">

+ 87 - 1
src/js/console.js

@@ -16,7 +16,7 @@ $(function(){
     $(".partWrap").css({
         height:$(window).height()-38+'px'
     })
-    $(".partTitle p").html(getCookie("hospital"))
+    $(".partTitle p span").html(getCookie("hospital"))
   initConsole()//质控列表
   getBarData()//图标数据获取
   dateChange()
@@ -130,9 +130,95 @@ function getBarData(type){
             queList(result1)
             emptyCircle(result2)
             panDetail(result2)
+            lineChart()
         }
     })
 }
+//折现图
+function lineChart(dataX,dataY){
+    var myCharts = echarts.init(document.getElementById('lineChart'));
+    option = {
+        color:"#5A8EEE",
+        tooltip: {
+            trigger: 'axis'
+        },
+        toolbox: {
+            show: false,
+            feature: {
+                dataZoom: {
+                    yAxisIndex: 'none'
+                },
+                dataView: {readOnly: false},
+                magicType: {type: ['line', 'bar']},
+                restore: {
+
+                },
+                saveAsImage: {}
+            },
+            emphasis:{
+                iconStyle:{
+                    color:'red'
+                }
+            },
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            axisLabel: {//x轴刻度
+                textStyle: {
+                    color: '#333'
+                },
+                rotate:'45'
+            },
+            axisLine: {//x轴
+                lineStyle:{
+                    color:'#AAAAAA'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                formatter: '{value} °C',
+                textStyle: {
+                    color: '#333333'
+                }
+            },
+            
+            axisLine: {//y轴
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine:{//分割线
+                lineStyle:{
+                    color:'#EFF3FC'
+                }
+            }
+        },
+        series: [
+            {
+                name: '最高气温',
+                type: 'line',
+                data: [11, 11, 15, 13, 12, 13, 10],
+                // markPoint: {
+                //     data: [
+                //         {type: 'max', name: '最大值'},
+                //         {type: 'min', name: '最小值'}
+                //     ]
+                // },
+                // markLine: {
+                //     data: [
+                //         {type: 'average', name: '平均值'}
+                //     ]
+                // }
+            }
+        ]
+    };
+    myCharts.setOption(option);
+}
 //柱状图住院费用
 function barChartPay(dataX,dataY){
     var myCharts = echarts.init(document.getElementById('barChartPay'));