提交

src/components/maincomponents.vue

@@ -2,9 +2,9 @@
   <div class="maincomponents" ref="main">
     <div class="card">
       <div class="cardtit">传播数据</div>
-      <el-row style="margin: 10px 10px 0 10px;">
+      <el-row style="margin: 10px 10px 0 10px">
         <el-col :span="4">
-          <el-card class="box-card" style="text-align: center;">
+          <el-card class="box-card" style="text-align: center">
             <div class="numTitle">{{ playT | numform }}</div>
             <div class="numValue">总传播量</div>
           </el-card>
@@ -13,7 +13,7 @@
           <el-card class="box-card">
             <div class="pl">
               <div class="platform" v-for="(item, i) in plays" :key="i">
-                <div class="line" v-if="i%4 !== 0"></div>
+                <div class="line" v-if="i % 4 !== 0"></div>
                 <div class="numTitle" :style="'color:' + c[i % c.length]">
                   {{ item.val | numform }}
                 </div>
@@ -171,7 +171,7 @@
 
 <script>
 // @ is an alias to /src
-import F2 from "@antv/f2/lib/index-all";
+import F2 from '@antv/f2/lib/index-all';
 import {
   platformData,
   qushiData,
@@ -180,43 +180,43 @@ import {
   baodianList,
   zhanghaoData,
   bumenList,
-} from "@/api/index.js";
+} from '@/api/index.js';
 let linechart = null,
   barchart = null,
   piechart = null;
 
 export default {
-  name: "Maincomponents",
+  name: 'Maincomponents',
   data() {
     return {
       playT: 0,
       plays: [],
       loading: false,
       platformList: [],
-      dep: "全部",
+      dep: '全部',
       T: [],
       userlist: [],
-      type: localStorage.type || "ALL",
+      type: localStorage.type || 'ALL',
       page: 1,
       options: [],
       pageSize: 10,
       usertotal: 0,
       height: 0,
-      c: ["#FB6161", "#EC72DC", "#F98E53", "#49BED0", "#4BCA8B"],
+      c: ['#FB6161', '#EC72DC', '#F98E53', '#49BED0', '#4BCA8B'],
       heightBar: 0,
     };
   },
   filters: {
     numform(text) {
       let num = text;
-      if (isNaN(text)) num = "0";
-      if (text >= 100000000) num = (text / 100000000).toFixed(2) - 0 + "亿";
-      else if (text >= 10000) num = (text / 10000).toFixed(2) - 0 + "万";
-      else num = num + "";
+      if (isNaN(text)) num = '0';
+      if (text >= 100000000) num = (text / 100000000).toFixed(2) - 0 + '亿';
+      else if (text >= 10000) num = (text / 10000).toFixed(2) - 0 + '万';
+      else num = num + '';
       return num;
     },
   },
-  props: ["hd", "topic"],
+  props: ['hd', 'topic'],
   watch: {
     type() {
       this.bmGet();
@@ -247,8 +247,8 @@ export default {
         oMonth = oD.getMonth() + 1,
         oDay = oD.getDate();
       this.T = [
-        [oYear, oMonth, oDay].join("-") + " 00:00:00",
-        [Year, Month, Day].join("-") + " 23:59:59",
+        [oYear, oMonth, oDay].join('-') + ' 00:00:00',
+        [Year, Month, Day].join('-') + ' 23:59:59',
       ];
 
       baodianList(this.topic).then(r => {
@@ -259,7 +259,7 @@ export default {
           pli = [];
         for (let i = 0; i < (r || []).length; i++) {
           const v = (r || [])[i];
-          if (v.platform === "总传播量") {
+          if (v.platform === '总传播量') {
             this.playT = v.playCount || 0;
             continue;
           }
@@ -274,9 +274,9 @@ export default {
         this.plays = pli.sort((a, b) => b.val - a.val);
 
         if (!pli || !pli.length) {
-          document.getElementById("piechart").style.display = "none";
+          document.getElementById('piechart').style.display = 'none';
         } else {
-          document.getElementById("piechart").style.display = "block";
+          document.getElementById('piechart').style.display = 'block';
         }
         this.$nextTick(() => {
           this.pie1(pli);
@@ -285,9 +285,9 @@ export default {
       qushiData(this.topic).then(r => {
         let li = r || [];
         if (!li || !li.length) {
-          document.getElementById("container").style.display = "none";
+          document.getElementById('container').style.display = 'none';
         } else {
-          document.getElementById("container").style.display = "block";
+          document.getElementById('container').style.display = 'block';
         }
         this.$nextTick(() => {
           this.line1(li);
@@ -310,8 +310,8 @@ export default {
           };
         });
         options.unshift({
-          value: "全部",
-          label: "全部",
+          value: '全部',
+          label: '全部',
         });
         this.options = options;
       });
@@ -324,16 +324,16 @@ export default {
     },
     grtzhData() {
       this.loading = true;
-      let t = (this.T || []).length ? this.T : ["", ""];
+      let t = (this.T || []).length ? this.T : ['', ''];
       const p = {
         page: this.page,
         pageSize: this.pageSize,
         title: this.topic,
       };
-      this.dep && this.dep !== "全部" && (p.depName = this.dep);
+      this.dep && this.dep !== '全部' && (p.depName = this.dep);
       t[0] && (p.startTime = t[0]);
       t[1] && (p.endTime = t[1]);
-      if (p.endTime) p.endTime = p.endTime.replace("00:00:00", "23:59:59");
+      if (p.endTime) p.endTime = p.endTime.replace('00:00:00', '23:59:59');
       zhanghaoData(p).then(r => {
         this.loading = false;
         this.userlist = r.data || [];
@@ -356,10 +356,10 @@ export default {
     },
     numform(text) {
       let num = text;
-      if (isNaN(text)) num = "0";
-      if (text >= 100000000) num = (text / 100000000).toFixed(2) - 0 + "亿";
-      else if (text >= 10000) num = (text / 10000).toFixed(2) - 0 + "万";
-      else num = num + "";
+      if (isNaN(text)) num = '0';
+      if (text >= 100000000) num = (text / 100000000).toFixed(2) - 0 + '亿';
+      else if (text >= 10000) num = (text / 10000).toFixed(2) - 0 + '万';
+      else num = num + '';
       return num;
     },
     line1(li) {
@@ -370,7 +370,7 @@ export default {
       const that = this;
       // 传播量趋势
       linechart = new F2.Chart({
-        id: "container",
+        id: 'container',
         pixelRatio: window.devicePixelRatio,
       });
       linechart.source(li, {
@@ -381,24 +381,24 @@ export default {
           tickCount: 5,
         },
       });
-      linechart.axis("dt", {
+      linechart.axis('dt', {
         label: function label(text, index, total) {
           const textCfg = {};
           if (index === 0) {
-            textCfg.textAlign = "left";
+            textCfg.textAlign = 'left';
           } else if (index === total - 1) {
-            textCfg.textAlign = "right";
+            textCfg.textAlign = 'right';
           }
           return textCfg;
         },
       });
-      linechart.scale("playCount", {
+      linechart.scale('playCount', {
         formatter(text) {
           return that.numform(text);
         },
       });
       linechart.tooltip({
-        triggerOn: ["click"],
+        triggerOn: ['click'],
         onShow: function onShow(ev) {
           const items = ev.items;
           items[0].name = items[0].title;
@@ -409,17 +409,17 @@ export default {
 
       linechart
         .area()
-        .position("dt*playCount")
-        .color("l(90) 0:#1890FF 1:#f7f7f7")
-        .shape("smooth");
+        .position('dt*playCount')
+        .color('l(90) 0:#1890FF 1:#f7f7f7')
+        .shape('smooth');
       linechart
         .line()
-        .position("dt*playCount")
-        .color("#1890FF")
+        .position('dt*playCount')
+        .color('#1890FF')
         .style({
           lineWidth: 1,
         })
-        .shape("smooth");
+        .shape('smooth');
       linechart.render();
     },
     bar1(li) {
@@ -429,7 +429,7 @@ export default {
       }
       const that = this;
       barchart = new F2.Chart({
-        id: "barChart",
+        id: 'barChart',
         pixelRatio: window.devicePixelRatio,
         padding: [10, 50, 30, 140],
         height: this.heightBar,
@@ -440,7 +440,7 @@ export default {
           tickCount: 3,
         },
       });
-      barchart.axis("readCount", {
+      barchart.axis('readCount', {
         label: function label(text) {
           const textCfg = {};
           textCfg.text = that.numform(text);
@@ -449,7 +449,7 @@ export default {
         },
         grid: null,
       });
-      barchart.axis("depName", {
+      barchart.axis('depName', {
         label: function label(text) {
           const textCfg = {};
           textCfg.text = text;
@@ -466,24 +466,24 @@ export default {
 
       barchart
         .interval()
-        .position("depName*readCount")
-        .color("l(180) 0:#1890ff 1:#70cdd0"); // 定义柱状图渐变色
+        .position('depName*readCount')
+        .color('l(180) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
       barchart.render();
       // 绘制柱状图文本
       const offset = -5;
-      const canvas = barchart.get("canvas");
+      const canvas = barchart.get('canvas');
       const group = canvas.addGroup();
       const shapes = {};
       li.forEach(function (obj) {
         const point = barchart.getPosition(obj);
-        const text = group.addShape("text", {
+        const text = group.addShape('text', {
           attrs: {
             x: point.x + 30,
             y: point.y + offset + 13,
             text: that.numform(obj.readCount),
-            textAlign: "center",
-            textBaseline: "bottom",
-            fill: "#808080",
+            textAlign: 'center',
+            textBaseline: 'bottom',
+            fill: '#808080',
           },
         });
 
@@ -497,7 +497,7 @@ export default {
       }
       const that = this;
       piechart = new F2.Chart({
-        id: "piechart",
+        id: 'piechart',
         pixelRatio: window.devicePixelRatio,
       });
       let lis = [];
@@ -509,7 +509,7 @@ export default {
       piechart.source(lis);
       piechart.tooltip(false);
       piechart.legend(false);
-      piechart.coord("polar", {
+      piechart.coord('polar', {
         transposed: true,
         innerRadius: 0.7,
         radius: 0.85,
@@ -525,27 +525,27 @@ export default {
         },
         label2: function label2(data) {
           return {
-            text: ((data.val / that.playT) * 100).toFixed(2) + "%",
-            fill: "#808080",
-            fontWeight: "bold",
+            text: ((data.val / that.playT) * 100).toFixed(2) + '%',
+            fill: '#808080',
+            fontWeight: 'bold',
           };
         },
       });
       piechart.axis(false);
       piechart
         .interval()
-        .position("a*val")
-        .color("p", [
-          "#1890FF",
-          "#13C2C2",
-          "#2FC25B",
-          "#FACC14",
-          "#F04864",
-          "#8543E0",
-          "#3436C7",
-          "#223273",
+        .position('a*val')
+        .color('p', [
+          '#1890FF',
+          '#13C2C2',
+          '#2FC25B',
+          '#FACC14',
+          '#F04864',
+          '#8543E0',
+          '#3436C7',
+          '#223273',
         ])
-        .adjust("stack");
+        .adjust('stack');
 
       piechart.render();
     },
@@ -557,7 +557,7 @@ export default {
     },
   },
   beforeDestroy() {
-    console.log("---");
+    console.log('---');
     linechart && linechart.destroy();
     barchart && barchart.destroy();
     piechart && piechart.destroy();
@@ -604,7 +604,7 @@ export default {
   display: inline-block;
   text-align: center;
   width: 25%;
-  padding-bottom: .5em;
+  padding-bottom: 0.5em;
   position: relative;
 }
 .maincomponents .line {