提交

src/pages/home/chart.vue

+<template lang='pug'>
+#chart(:style="{ width: '100%', height: '90%' }")
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.chart()
+  },
+  methods: {
+    chart() {
+      let dom = document.getElementById('chart')
+      if (!dom) return
+      let myCharts = this.$echarts.init(dom)
+      let option = {
+        // color:['#D0F0FF'],
+        title: {
+          text: '温度'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '3%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            // type: 'category',
+            type: 'time',
+            boundaryGap: false
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '订单数量',
+            type: 'line',
+            stack: '总量',
+            smooth: true,
+            // label: {
+            //   show: true,
+            //   position: 'top'
+            // },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#21ACFC' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#fff' // 100% 处的颜色
+                  }
+                ])
+              }
+            },
+            lineStyle: {
+              color: '#21ACFC'
+            },
+            itemStyle: {
+              normal: {
+                color: '#13B0FF'
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [
+              ['2019-8-14 8:00:00', 70],
+              ['2019-8-14 8:00:01', 60],
+              ['2019-8-14 8:00:02', 30],
+              ['2019-8-14 8:00:03', 79],
+              ['2019-8-14 8:00:06', 10],
+              ['2019-8-14 8:00:20', 31]
+            ]
+          }
+        ]
+      }
+      myCharts.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/home/page.vue

@@ -93,7 +93,8 @@
                 </el-col>
               </el-row>
               <div style="height: calc(100% - 130px)">
-                <energy-total-charts></energy-total-charts>
+                <!-- <energy-total-charts></energy-total-charts> -->
+                <chart></chart>
               </div>
             </div>
           </card-list>
@@ -114,13 +115,15 @@
 import cardList from '../components/cardList'
 import energyTotalCharts from '../components/energyTotalCharts'
 import myPies from '../components/myPies'
+import chart from './chart'
 // import CardList from './compontents/cardList.vue';
 export default {
   name: 'home',
   components: {
     cardList,
     energyTotalCharts,
-    myPies
+    myPies,
+    chart
   },
   data() {
     return {