引入ecarts实现数据面板月销售趋势

package.json

@@ -40,7 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
-    "echarts": "5.4.0",
+    "echarts": "^5.4.1",
     "element-ui": "2.15.10",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

src/views/index.vue

@@ -89,10 +89,11 @@
         <el-col :span="14">
           <el-card>
             <div class="card-title">月销售趋势</div>
+            <div ref="chart" class="chart"></div>
           </el-card>
         </el-col>
         <el-col :span="10" class="rank">
-          <el-card>
+          <el-card class="h-100">
             <div class="top">
               <div class="card-title">商品销售TOP5</div>
               <el-dropdown class="select-day">
@@ -117,6 +118,15 @@
 </template>
 
 <script>
+
+import * as echarts from 'echarts/core';
+import { GridComponent, TooltipComponent } from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, UniversalTransition]);
+
+
 export default {
   name: "Index",
   data() {
@@ -131,9 +141,42 @@ export default {
       })
     };
   },
+  mounted() {
+    // this.$nextTick(() => {
+    this.initChart()
+    // })
+  },
   methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
+    initChart() {
+      let myChart = echarts.init(this.$refs.chart);
+      let option;
+
+      option = {
+        xAxis: {
+          type: 'category',
+          data: Array.from(new Array(12).keys()).map(item => `${item + 1}月`)
+        },
+        yAxis: {
+          type: 'value'
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis'
+        },
+        series: [
+          {
+            data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
+            type: 'line'
+          },
+          {
+            data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
+            type: 'line'
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
+
     }
   }
 };
@@ -249,6 +292,10 @@ export default {
     &>.bottom {
       margin-top: 10px;
 
+      .h-100 {
+        height: 100%;
+      }
+
       &>.rank {
         .top {
           display: flex;
@@ -260,6 +307,10 @@ export default {
           }
         }
       }
+
+      .chart {
+        height: 400px;
+      }
     }
 
   }