这线图

src/views/sylive/activity/statistics/components/area-table.vue

@@ -47,13 +47,42 @@
         </div>
       </template>
     </ele-pro-table>
+    <div style="margin-top: 40px">
+      <v-chart
+        ref="areaChart"
+        style="width: 100%; height: 500px"
+        :option="areaChartOption"
+      />
+    </div>
   </el-card>
 </template>
 
 <script>
   import { pageStatisticsArea } from '@/api/sylive/activity';
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { LineChart } from 'echarts/charts';
+  import {
+    LegendComponent,
+    GridComponent,
+    ToolboxComponent,
+    TooltipComponent
+  } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import 'echarts-wordcloud';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+  use([
+    CanvasRenderer,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    ToolboxComponent,
+    LineChart
+  ]);
 
   export default {
+    components: { VChart },
+    mixins: [echartsMixin(['areaChart'])],
     props: { data: { days: [], goods: [] } },
     data() {
       return {
@@ -130,7 +159,8 @@
             showOverflowTooltip: true,
             minWidth: 110
           }
-        ]
+        ],
+        areaChartOption: {} //折线图
       };
     },
     methods: {
@@ -142,6 +172,46 @@
         }
         const day = this.day;
         const itemId = this.itemId;
+        //更新折线图
+        pageStatisticsArea({
+          ...order,
+          page,
+          limit,
+          activityId,
+          day,
+          itemId
+        }).then((res) => {
+          console.log(res);
+          this.areaChartOption = {
+            tooltip: {
+              trigger: 'axis'
+            },
+            legend: {
+              data: res.chart.legendData
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              top: '12%',
+              bottom: '3%',
+              containLabel: true
+            },
+            toolbox: {
+              feature: {
+                saveAsImage: {}
+              }
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: res.chart.xAxisData
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: res.chart.yAxisSeries
+          };
+        });
         return pageStatisticsArea({
           ...order,
           page,
@@ -151,6 +221,7 @@
           itemId
         });
       },
+
       /* 更新选中数据 */
       updateValue() {
         this.$refs.table.reload({ page: 1 });