提交

src/components/maincomponents.vue

@@ -33,7 +33,11 @@
       <el-col :span="15">
         <div class="card">
           <div class="cardtit">传播量趋势</div>
-          <canvas id="container" style="width: 100%; height: 100%" class=""></canvas>
+          <canvas
+            id="container"
+            style="width: 100%; height: 100%"
+            class=""
+          ></canvas>
         </div>
       </el-col>
       <el-col :span="9" style="padding-left: 5px">
@@ -76,21 +80,38 @@
           </el-button>
         </el-button-group> -->
       </div>
-      <canvas id="barChart" v-if="heightBar > 0" :height="heightBar" style="width: 100%"></canvas>
+      <canvas
+        id="barChart"
+        v-if="heightBar > 0"
+        :height="heightBar"
+        style="width: 100%"
+      ></canvas>
     </div>
 
     <div class="card">
       <div class="cardtit">热点报道</div>
       <div style="padding: 10px">
         <el-table :data="platformList" style="width: 100%">
-          <el-table-column show-overflow-tooltip prop="host" label="部门"> </el-table-column>
-          <el-table-column show-overflow-tooltip prop="subTopic" label="热点话题">
+          <el-table-column show-overflow-tooltip prop="host" label="部门">
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            prop="subTopic"
+            label="热点话题"
+          >
           </el-table-column>
-          <el-table-column show-overflow-tooltip prop="playCount" label="传播量">
+          <el-table-column
+            show-overflow-tooltip
+            prop="playCount"
+            label="传播量"
+          >
             <template slot-scope="scope">
               <el-popover placement="right" width="400" trigger="hover">
                 <el-table :data="scope.row.topicDataList">
-                  <el-table-column property="platform" label="平台"></el-table-column>
+                  <el-table-column
+                    property="platform"
+                    label="平台"
+                  ></el-table-column>
                   <el-table-column property="address" label="传播量">
                     <template slot-scope="scopeSon">
                       {{ scopeSon.row.playCount | numform }}
@@ -141,10 +162,17 @@
       </div>
       <div style="padding: 20px">
         <el-table v-loading="loading" :data="userlist" style="width: 100%">
-          <el-table-column show-overflow-tooltip prop="depName" label="部门"> </el-table-column>
-          <el-table-column show-overflow-tooltip prop="name" label="账号"> </el-table-column>
-          <el-table-column show-overflow-tooltip prop="platform" label="平台"> </el-table-column>
-          <el-table-column show-overflow-tooltip prop="publishTime" label="发稿时间">
+          <el-table-column show-overflow-tooltip prop="depName" label="部门">
+          </el-table-column>
+          <el-table-column show-overflow-tooltip prop="name" label="账号">
+          </el-table-column>
+          <el-table-column show-overflow-tooltip prop="platform" label="平台">
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            prop="publishTime"
+            label="发稿时间"
+          >
           </el-table-column>
         </el-table>
         <el-pagination
@@ -163,18 +191,40 @@
       <div class="cardtit">TOP30</div>
       <div style="padding: 20px">
         <el-table v-loading="loading" :data="top" style="width: 100%">
-          <el-table-column show-overflow-tooltip prop="title" label="标题" width="300">
+          <el-table-column
+            show-overflow-tooltip
+            prop="title"
+            label="标题"
+            width="300"
+          >
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            prop="platform"
+            label="平台"
+            width="50"
+          >
           </el-table-column>
-          <el-table-column show-overflow-tooltip prop="platform" label="平台" width="50">
+          <el-table-column show-overflow-tooltip prop="depName" label="部门">
           </el-table-column>
-          <el-table-column show-overflow-tooltip prop="depName" label="部门"> </el-table-column>
-          <el-table-column show-overflow-tooltip prop="name" label="账号"> </el-table-column>
-          <el-table-column show-overflow-tooltip prop="readCount" label="阅读量" width="100">
+          <el-table-column show-overflow-tooltip prop="name" label="账号">
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            prop="readCount"
+            label="阅读量"
+            width="100"
+          >
             <template slot-scope="scope">
               {{ scope.row.readCount | numform }}
             </template>
           </el-table-column>
-          <el-table-column width="150" show-overflow-tooltip prop="publishTime" label="发稿时间">
+          <el-table-column
+            width="150"
+            show-overflow-tooltip
+            prop="publishTime"
+            label="发稿时间"
+          >
           </el-table-column>
         </el-table>
       </div>
@@ -283,7 +333,8 @@ export default {
             platform[v.platform] = pli.length;
             pli.push({ p: v.platform, val: v.playCount, a: 1 });
           } else {
-            pli[platform[v.platform]] && (pli[platform[v.platform]].val += v.playCount);
+            pli[platform[v.platform]] &&
+              (pli[platform[v.platform]].val += v.playCount);
           }
         }
         this.plays = pli.sort((a, b) => b.val - a.val);
@@ -431,7 +482,11 @@ export default {
         }
       });
 
-      linechart.area().position('dt*playCount').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth');
+      linechart
+        .area()
+        .position('dt*playCount')
+        .color('l(90) 0:#1890FF 1:#f7f7f7')
+        .shape('smooth');
       linechart
         .line()
         .position('dt*playCount')
@@ -443,6 +498,7 @@ export default {
       linechart.render();
     },
     bar1(li) {
+      console.log(barchart);
       if (barchart) {
         barchart.destroy();
         barchart = null;
@@ -484,7 +540,10 @@ export default {
       });
       barchart.tooltip(false);
 
-      barchart.interval().position('depName*readCount').color('l(180) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
+      barchart
+        .interval()
+        .position('depName*readCount')
+        .color('#70cdd0'); // 定义柱状图渐变色
       barchart.render();
       // 绘制柱状图文本
       const offset = -5;