更改目录结构

web/src/components/Cell.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="monitor">
+      <div class="monitor-left">{{ left }}</div>
+      <div class="monitor-right">{{ right }}</div>
+    </div>
+    <el-divider v-if="divider"></el-divider>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Cell",
+  props: {
+    left: {},
+    right: {},
+    divider: {type: Boolean}
+  },
+}
+</script>
+
+<style scoped>
+.monitor {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.monitor-left {
+  font-size: 14px;
+}
+
+.monitor-right {
+  font-size: 12px;
+  color: #909399;
+}
+</style>

web/src/components/LineChart.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="line-chart" :style="{height:height,width:width}"/>
+</template>
+
+<script>
+  import echarts from 'echarts'
+
+  export default {
+    name: 'LineChart',
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '350px'
+      },
+      // title,xAxis,series
+      chartData: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {}
+    },
+    mounted() {
+      this.initChart()
+    },
+    beforeDestroy() {
+    },
+    methods: {
+      initChart() {
+        let chart = echarts.init(this.$el)
+
+        const option = {
+          title: {
+            text: this.chartData.title || '折线图'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {},
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          // toolbox: {
+          //   feature: {
+          //     saveAsImage: {}
+          //   }
+          // },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: this.chartData.xname
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [],
+        };
+
+        let xdata = this.chartData.xdata
+        for (let key in xdata) {
+          // window.console.log(key);
+          let a = {
+            name: key,
+            type: 'line',
+            data: xdata[key]
+          };
+          option.series.push(a)
+        }
+
+        chart.setOption(option)
+      },
+    }
+  }
+</script>