1

src/xt_pages/qcd/basicInformationAnalysis.vue

@@ -18,6 +18,19 @@
             >{{ item.label }}</li>
           </ul>
         </div>
+        <label class="title">
+          <span class="name">查看范围</span> :
+        </label>
+        <div class="time">
+          <ul class>
+            <li
+              :class="item.state == way ? 'active' : ''"
+              @click="selectWay(item.state)"
+              v-for="item in wayArr"
+              :key="item.value"
+            >{{ item.label }}</li>
+          </ul>
+        </div>
         <label class="title">
              <span class="name">日期查询</span> :
         </label>
@@ -49,7 +62,7 @@
           :picker-options="pickerOptions"
         ></el-date-picker>
       </div>
-      <div class="cell clearfix" style="align-items:normal">
+      <div v-if="way == 0" class="cell clearfix" style="align-items:normal">
         <div style="float:left">
           <div class="infoBox">
             <div class="infoOne">
@@ -260,6 +273,12 @@
           </div>
         </div>
       </div>
+      <div style="margin-bottom:20px;">
+        <line-chart :options="bar"></line-chart>
+      </div>
+      <div>
+        <line-chart :options="bar"></line-chart>
+      </div>
     </div>
   </div>
 </template>
@@ -268,16 +287,19 @@
 
 <script>
 const moment = require('moment')
+import echarts from "echarts";
 import { GetOICData } from "@/api/qcd";
 import PieChart from "../qcd/components/BarChart";
 import { uParseTime } from "@/utils/tools";
 import BreadCrumb from "@/xt_pages/components/bread-crumb";
+import LineChart from "../qcd/components/LineChart";
 import {getDialysisModeType,getTotalLapseCount,getTotalSexCount,getTotalInfectiousCount,getTotalAgeCount,getTotalDialysisCount} from "@/api/common/common"
 export default {
   name: "dialysisTotal",
   components: {
     PieChart,
-    BreadCrumb
+    BreadCrumb,
+    LineChart
   },
   data() {
     return {
@@ -324,6 +346,98 @@ export default {
       rollOutTotal:0,
       outTotal:0,
       dialysisAge:[],
+
+      way: 0,
+      wayArr: [
+        { value: 0, label: "统计表", state: 0 },
+        { value: 1, label: "统计图", state: 1 }
+      ],
+      bar: {
+        title: {
+          text: "ECharts 入门示例"
+        },
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: "{value} %"
+          },
+          show: false
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            data: [],
+            barWidth: 30,
+            label: {
+              normal: {
+                show: true,
+                position: "top"
+              }
+            },
+            //配置样式
+            itemStyle: {
+              //通常情况下：
+
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+              normal: {
+                color: function(params) {
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
+                  var colorList = [
+                    ["#A9E0F3", "#9FBDFC"],
+
+                    ["#FFD7C0", "#FF9994"]
+                  ];
+
+                  var index = params.dataIndex;
+                  if (params.dataIndex >= colorList.length) {
+                    index = params.dataIndex % colorList.length;
+                  }
+
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: colorList[index][0] },
+                    // { offset: 0.5, color: colorList[index][1] },
+                    { offset: 1, color: colorList[index][1] }
+                  ]);
+                },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
+
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.2)"
+              }
+            }
+          }
+        ],
+        dataZoom: [
+          {
+            // Y轴固定,让内容滚动
+            type: 'slider',
+            show: false,
+            xAxisIndex: [0],
+            start: 1,
+            end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
+            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+          },
+          {
+            type: 'inside',
+            xAxisIndex: [0],
+            start: 1,
+            end: 20,
+            zoomLock: true // 锁定区域禁止缩放
+          }
+        ]
+      }
     };
   },
   methods: {
@@ -610,6 +724,9 @@ export default {
 
          }
       })
+    },
+    selectWay(index){
+      this.way = index
     }
   },
   created() {