echarts

package-lock.json

@@ -1808,16 +1808,6 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594427999421&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1850,34 +1840,6 @@
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
           "dev": true
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1604507107408&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -1931,13 +1893,6 @@
             "universalify": "^0.1.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "icss-utils": {
           "version": "4.1.1",
           "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1602527330977&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -2052,16 +2007,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881757308&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -2078,32 +2023,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
-          "integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "loader-utils": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-              "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-              }
-            }
-          }
         }
       }
     },
@@ -5281,6 +5200,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "requires": {
+        "zrender": "4.3.2"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12633,6 +12560,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
+      "integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",
@@ -13723,6 +13731,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }

package.json

@@ -11,6 +11,7 @@
     "ant-design-vue": "^1.2.4",
     "compression-webpack-plugin": "^6.1.1",
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "moment": "^2.29.1",
     "register-service-worker": "^1.7.1",
     "stylus": "^0.54.8",

src/components/Duration/Duration.js

@@ -0,0 +1,53 @@
+var option = {
+  title: {
+    left: '10%',
+    text: '急救时长分析',
+  },
+  tooltip: { trigger: 'axis' },
+  legend: {
+    x: 'center',
+    y: 'bottom',
+    data: ['我院记录', '国际水准', '当前数据'],
+  },
+  grid: {
+    left: '3%',
+    // right: '4%',
+    bottom: '10%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  },
+  yAxis: {
+    type: 'value',
+    name: '秒',
+    interval: 100,
+  },
+  series: [
+    {
+      name: '我院记录',
+      type: 'line',
+      stack: '总量',
+      symbolSize: 10,
+      data: [120, 132, 101, 134, 90, 230, 210],
+    },
+    {
+      name: '国际水准',
+      type: 'line',
+      stack: '总量',
+      symbolSize: 10,
+      data: [220, 182, 191, 234, 290, 330, 310],
+    },
+    {
+      name: '当前数据',
+      type: 'line',
+      stack: '总量',
+      symbolSize: 10,
+      data: [150, 232, 201, 154, 190, 330, 410],
+    },
+  ],
+};
+
+export default option;

src/components/Duration/Duration.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div class="chart-box" :style="{ width: 'width', height: 'height' }">
+    <div id="Duration" style="width: 25%; height: 300%"></div>
+  </div>
+</template>
+<script>
+import option from './Duration.js';
+export default {
+  name: 'Duration',
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      width: '',
+      height: '',
+    };
+  },
+  mounted() {
+    this.drawLine();
+    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';
+      })();
+    };
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('Duration'));
+      // 绘制图表
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/components/Sensor/Sensor.js

@@ -0,0 +1,56 @@
+var option = {
+  title: {
+    left: '10%',
+    text: '震动传感器',
+  },
+  legend: {
+    x: 'center',
+    y: 'top',
+    data: ['传感器1', '传感器2'],
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      //y轴
+      show: false,
+    },
+    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    show: true,
+    type: 'value',
+    splitLine: { show: false }, //去除网格线
+    nameTextStyle: {
+      color: '#abb8ce',
+      show: false,
+    },
+    axisLabel: {
+      color: '#abb8ce',
+      show: false,
+    },
+    axisTick: {
+      //y轴刻度线
+      show: false,
+    },
+    axisLine: {
+      //y轴
+      show: false,
+    },
+  },
+  series: [
+    {
+      name: '传感器1',
+      data: [120, 932, 401, 534, 290, 530, 320],
+      type: 'line',
+      smooth: true,
+    },
+    {
+      name: '传感器2',
+      data: [220, 632, 101, 834, 490, 630, 220],
+      type: 'line',
+      smooth: true,
+    },
+  ],
+};
+
+export default option;

src/components/Sensor/Sensor.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div class="chart-box" :style="{ width: 'width', height: 'height' }">
+    <div id="Sensor" style="width: 25%; height: 300%"></div>
+  </div>
+</template>
+<script>
+import option from './Sensor.js';
+export default {
+  name: 'Sensor',
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      width: '',
+      height: '',
+    };
+  },
+  mounted() {
+    this.drawLine();
+    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';
+      })();
+    };
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('Sensor'));
+      // 绘制图表
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/components/Statistics/Statistics.js

@@ -0,0 +1,91 @@
+var option = {
+  title: {
+    left: '10%',
+    text: '急救数据统计',
+  },
+  tooltip: { trigger: 'axis' },
+  legend: [
+    {
+      x: 'center',
+      y: 'top',
+      data: ['本年', '去年'],
+    },
+    {
+      x: 'center',
+      y: 'bottom',
+      data: ['本年完成', '去年同期'],
+    },
+  ],
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: [
+    {
+      type: 'value',
+      interval: 100,
+      name: '人次',
+    },
+    {
+      type: 'value',
+      interval: 100,
+      name: '数量',
+    },
+  ],
+  series: [
+    {
+      name: '本年',
+      data: [120, 232, 301, 434, 590, 630, 720],
+      type: 'line',
+      color: 'red',
+    },
+    {
+      name: '去年',
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: 'line',
+      color: '#E87C25',
+    },
+    {
+      name: '本年完成',
+      data: [120, 232, 301, 434, 590, 630, 720],
+      yAxisIndex: 1,
+      type: 'bar',
+      color: '#FCCE10',
+      itemStyle: {
+        normal: {
+          label: {
+            show: true, //开启显示
+            position: 'top', //在上方显示
+            textStyle: {
+              //数值样式
+              color: 'black',
+              fontSize: 12,
+            },
+          },
+        },
+      },
+    },
+    {
+      name: '去年同期',
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      yAxisIndex: 1,
+      type: 'bar',
+      color: '#B5C334',
+      itemStyle: {
+        normal: {
+          label: {
+            show: true, //开启显示
+            position: 'top', //在上方显示
+            textStyle: {
+              //数值样式
+              color: 'black',
+              fontSize: 12,
+            },
+          },
+        },
+      },
+    },
+  ],
+};
+
+export default option;

src/components/Statistics/Statistics.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div class="chart-box" :style="{ width: 'width', height: 'height' }">
+    <div id="myChart" style="width: 25%; height: 300%"></div>
+  </div>
+</template>
+<script>
+import option from './Statistics.js';
+export default {
+  name: 'Statistics',
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      width: '',
+      height: '',
+    };
+  },
+  mounted() {
+    this.drawLine();
+    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';
+      })();
+    };
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('myChart'));
+      // 绘制图表
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/main.js

@@ -7,15 +7,16 @@ import router from './router';
 import store from './store';
 import './plugins/ant-design-vue.js';
 import 'common/portrait.styl';
-import './assets/icon/iconfont.css';
+import echarts from 'echarts';
-import VueDOMPurifyHTML from 'vue-dompurify-html';
-import moment from 'moment'; //导入文件
-Vue.prototype.$moment = moment; //赋值使用
 
+// Vue.use(echarts);
+Vue.prototype.$echarts = echarts;
+// import './assets/icon/iconfont.css';
+// import VueDOMPurifyHTML from 'vue-dompurify-html';
+// import moment from 'moment'; //导入文件
+// Vue.prototype.$moment = moment; //赋值使用
 Vue.config.productionTip = false;
 
-Vue.use(VueDOMPurifyHTML);
-
 window.vm = new Vue({
   router,
   store,

src/views/Index/Index.vue

@@ -1,9 +1,18 @@
 <template>
-  <div>index.vue界面</div>
+  <div>
+    <statistics />
+    <duration />
+    <sensor />
+  </div>
 </template>
 
 <script>
+import Statistics from 'components/Statistics/Statistics.vue';
+import Duration from 'components/Duration/Duration.vue';
+import Sensor from 'components/Sensor/Sensor.vue';
 export default {
+  name: 'Index',
+  components: { Statistics, Duration, Sensor },
   data() {
     return {};
   },