首页数据统计图

src/App.vue

@@ -1,15 +1,8 @@
-<!--
- * @Author: wally
- * @email: 18603454788@163.com
- * @Date: 2021-01-28 09:32:34
- * @LastEditors: wally
- * @LastEditTime: 2021-01-29 10:57:06
--->
 <template>
   <a-config-provider :locale="zh_CN">
     <div class="d-flex flex-row flex-nowrap" id="app">
       <btn-con />
-      <router-view class="d-flex"></router-view>
+      <router-view class="flex-1"></router-view>
     </div>
   </a-config-provider>
 </template>

src/components/Echarts/Categorymap.vue

@@ -0,0 +1,100 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div style="width: 100%; height: 300px" class="chart-box">
+    <div id="Categorymap" style="height: 400px"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Categorymap',
+  data() {
+    return {
+      // msg: 'Welcome to Your Vue.js App',
+      width: '',
+      height: '',
+      timer: null,
+    };
+  },
+  mounted() {
+    this.drawLine();
+    this.timer = setInterval(() => {
+      this.drawLine();
+    }, 10000);
+    let wh = window.innerWidth;
+    let hg = window.innerHeight;
+    this.width = wh + 'px';
+    this.height = hg + 'px';
+    console.log(this.height);
+    window.onresize = () => {
+      return (() => {
+        wh = window.innerWidth;
+        hg = window.innerHeight;
+        this.width = wh + 'px';
+        this.height = hg + 'px';
+      })();
+    };
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    async drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('Categorymap'));
+      // 绘制图表
+      var option = {
+        title: {
+          left: 'center',
+          text: '各院病例分析',
+        },
+        legend: {
+          data: ['未完成', '已完成', '进行中', '废弃'],
+          top: 30,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            data: ['附属医院', '人民医院', '第五人民医院', '国药同煤总医院'],
+          },
+        ],
+        yAxis: [{ type: 'value' }],
+        series: [
+          {
+            name: '未完成',
+            type: 'bar',
+            barGap: 0,
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [320, 332, 301, 334],
+          },
+          {
+            name: '已完成',
+            type: 'bar',
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [220, 182, 191, 234],
+          },
+          {
+            name: '进行中',
+            type: 'bar',
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [150, 232, 201, 154],
+          },
+          {
+            name: '废弃',
+            type: 'bar',
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [98, 77, 101, 99],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/components/Echarts/Cisualmap.vue

@@ -0,0 +1,166 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div style="width: 100%; height: 300px" class="chart-box">
+    <div id="Cisualmap" style="height: 400px"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Cisualmap',
+  data() {
+    return {
+      // msg: 'Welcome to Your Vue.js App',
+      width: '',
+      height: '',
+      timer: null,
+    };
+  },
+  mounted() {
+    this.drawLine();
+    this.timer = setInterval(() => {
+      this.drawLine();
+    }, 10000);
+    let wh = window.innerWidth;
+    let hg = window.innerHeight;
+    this.width = wh + 'px';
+    this.height = hg + 'px';
+    console.log(this.height);
+    window.onresize = () => {
+      return (() => {
+        wh = window.innerWidth;
+        hg = window.innerHeight;
+        this.width = wh + 'px';
+        this.height = hg + 'px';
+      })();
+    };
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    async drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('Cisualmap'));
+      var data = [
+        ['2000-06-05', 116],
+        ['2000-06-06', 129],
+        ['2000-06-07', 135],
+        ['2000-06-08', 86],
+        ['2000-06-09', 73],
+        ['2000-06-10', 85],
+        ['2000-06-11', 73],
+        ['2000-06-12', 68],
+        ['2000-06-13', 92],
+        ['2000-06-14', 130],
+        ['2000-06-15', 245],
+        ['2000-06-16', 139],
+        ['2000-06-17', 115],
+        ['2000-06-18', 111],
+        ['2000-06-19', 309],
+        ['2000-06-20', 206],
+        ['2000-06-21', 137],
+        ['2000-06-22', 128],
+        ['2000-06-23', 85],
+        ['2000-06-24', 94],
+        ['2000-06-25', 71],
+        ['2000-06-26', 106],
+        ['2000-06-27', 84],
+        ['2000-06-28', 93],
+        ['2000-06-29', 85],
+        ['2000-06-30', 73],
+        ['2000-07-01', 83],
+        ['2000-07-02', 125],
+        ['2000-07-03', 107],
+        ['2000-07-04', 82],
+        ['2000-07-05', 44],
+        ['2000-07-06', 72],
+        ['2000-07-07', 106],
+        ['2000-07-08', 107],
+        ['2000-07-09', 66],
+        ['2000-07-10', 91],
+        ['2000-07-11', 92],
+        ['2000-07-12', 113],
+        ['2000-07-13', 107],
+        ['2000-07-14', 131],
+        ['2000-07-15', 111],
+        ['2000-07-16', 64],
+        ['2000-07-17', 69],
+        ['2000-07-18', 88],
+        ['2000-07-19', 77],
+        ['2000-07-20', 83],
+        ['2000-07-21', 111],
+        ['2000-07-22', 57],
+        ['2000-07-23', 55],
+        ['2000-07-24', 60],
+      ];
+
+      var dateList = data.map(function(item) {
+        return item[0];
+      });
+      var valueList = data.map(function(item) {
+        return item[1];
+      });
+      // 绘制图表
+      var option = {
+        // Make gradient line here
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+            seriesIndex: 0,
+            min: 0,
+            max: 400,
+          },
+          {
+            show: false,
+            type: 'continuous',
+            seriesIndex: 1,
+            dimension: 0,
+            min: 0,
+            max: dateList.length - 1,
+          },
+        ],
+
+        title: [
+          {
+            left: 'center',
+            text: '新建病例',
+          },
+          {
+            top: '55%',
+            left: 'center',
+            text: '已完成病例',
+          },
+        ],
+        tooltip: { trigger: 'axis' },
+        xAxis: [
+          { data: dateList },
+          {
+            data: dateList,
+            gridIndex: 1,
+          },
+        ],
+        yAxis: [{}, { gridIndex: 1 }],
+        grid: [{ bottom: '60%' }, { top: '60%' }],
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            data: valueList,
+          },
+          {
+            type: 'line',
+            showSymbol: false,
+            data: valueList,
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/components/Echarts/Piemap.vue

@@ -0,0 +1,74 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div style="width: 100%; height: 300px" class="chart-box">
+    <div id="Piemap" style="height: 300px"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Piemap',
+  data() {
+    return {
+      // msg: 'Welcome to Your Vue.js App',
+      width: '',
+      height: '',
+      timer: null,
+    };
+  },
+  mounted() {
+    this.drawLine();
+    this.timer = setInterval(() => {
+      this.drawLine();
+    }, 10000);
+    let wh = window.innerWidth;
+    let hg = window.innerHeight;
+    this.width = wh + 'px';
+    this.height = hg + 'px';
+    console.log(this.height);
+    window.onresize = () => {
+      return (() => {
+        wh = window.innerWidth;
+        hg = window.innerHeight;
+        this.width = wh + 'px';
+        this.height = hg + 'px';
+      })();
+    };
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    async drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('Piemap'));
+      // 绘制图表
+      var option = {
+        title: {
+          left: 'center',
+          text: '各医院生物样本统计',
+        },
+        legend: { top: 'bottom' },
+        series: [
+          {
+            name: '面积模式',
+            type: 'pie',
+            radius: [20, 120],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            itemStyle: { borderRadius: 8 },
+            data: [
+              { value: 40, name: '附属医院' },
+              { value: 38, name: '人民医院' },
+              { value: 32, name: '第五医院' },
+              { value: 30, name: '国药同煤总医院' },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/components/Echarts/Treemap.vue

@@ -0,0 +1,80 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div style="width: 100%; height: 300px" class="chart-box">
+    <div id="Treemap" style="height: 400px"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Treemap',
+  data() {
+    return {
+      // msg: 'Welcome to Your Vue.js App',
+      width: '',
+      height: '',
+      timer: null,
+    };
+  },
+  mounted() {
+    this.drawLine();
+    this.timer = setInterval(() => {
+      this.drawLine();
+    }, 10000);
+    let wh = window.innerWidth;
+    let hg = window.innerHeight;
+    this.width = wh + 'px';
+    this.height = hg + 'px';
+    console.log(this.height);
+    window.onresize = () => {
+      return (() => {
+        wh = window.innerWidth;
+        hg = window.innerHeight;
+        this.width = wh + 'px';
+        this.height = hg + 'px';
+      })();
+    };
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    async drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('Treemap'));
+      // 绘制图表
+      var option = {
+        title: {
+          left: 'center',
+          text: '每日病例统计',
+        },
+        series: [
+          {
+            type: 'treemap',
+            data: [
+              {
+                name: '未完成', // First tree
+                value: 50,
+              },
+              {
+                name: '已完成', // Second tree
+                value: 25,
+              },
+              {
+                name: '进行中', // Second tree
+                value: 10,
+              },
+              {
+                name: '废弃', // Second tree
+                value: 5,
+              },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/views/Index/Index.vue

@@ -1,10 +1,28 @@
 <template>
-  <div>首页数据统计图界面</div>
+  <div class="flex-wrap">
+    <div style="width: 80%; height: auto; margin: 100px 10%">
+      <treemap />
+    </div>
+    <div style="width: 80%; height: auto; margin: 100px 10%">
+      <cisualmap />
+    </div>
+    <div style="width: 80%; height: auto; margin: 100px 10%">
+      <categorymap />
+    </div>
+    <div style="width: 80%; height: auto; margin: 100px 10%">
+      <piemap />
+    </div>
+  </div>
 </template>
 
 <script>
+import Treemap from 'components/Echarts/Treemap.vue';
+import Cisualmap from 'components/Echarts/Cisualmap.vue';
+import Categorymap from 'components/Echarts/Categorymap.vue';
+import Piemap from 'components/Echarts/Piemap.vue';
 export default {
   name: 'Index',
+  components: { Treemap, Cisualmap, Categorymap, Piemap },
   data() {
     return {
       str: '',