提交

src/view/index/index.vue

@@ -64,7 +64,29 @@
       :width="client.width"
       :height="client.height"
     ></canvas>
-    <div v-if="userSort.length" class="title">账号排名</div>
+    <div v-if="userSort.length" class="title">
+      账号排名
+      <div class="btngroup" @click="accountChange">
+        <van-button
+          :type="accountBtn === 'digg_count' ? 'info' : 'default'"
+          data-type="digg_count"
+          size="mini"
+          >点赞</van-button
+        >
+        <van-button
+          :type="accountBtn === 'comment_count' ? 'info' : 'default'"
+          data-type="comment_count"
+          size="mini"
+          >评论</van-button
+        >
+        <van-button
+          :type="accountBtn === 'forward_count' ? 'info' : 'default'"
+          data-type="forward_count"
+          size="mini"
+          >转发</van-button
+        >
+      </div>
+    </div>
     <canvas
       v-if="userSort.length"
       id="account"
@@ -172,7 +194,13 @@
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.btngroup {
+  float: right;
+  padding-right: 5px;
+  display: inline-block;
+}
+</style>
 
 <script>
 import { getAllPlatform, getPlatform, getList } from "@/api/getList.js";
@@ -198,6 +226,7 @@ export default {
   },
   data() {
     return {
+      accountBtn: "digg_count", // 点赞-digg_count；评论-comment；转发-forward
       initCanvas: {
         cake: undefined,
         account: undefined,
@@ -217,6 +246,12 @@ export default {
       yangshi: [],
       cakeList: [],
       show: false,
+      value1: 0,
+      option1: [
+        { text: "全部商品", value: 0 },
+        { text: "新款商品", value: 1 },
+        { text: "活动商品", value: 2 },
+      ],
     };
   },
   created() {
@@ -356,6 +391,13 @@ export default {
         });
       });
     },
+    accountChange(e) {
+      let T = e.path[0].getAttribute("data-type");
+      if (T === this.accountBtn) return;
+      this.accountBtn = T;
+      let list = this.userSort.sort((a, b) => b[T] - a[T]);
+      this.account(list, T, "account");
+    },
     cake(list) {
       let data = list.map(v => {
         return {
@@ -444,11 +486,17 @@ export default {
           value: v[key],
         });
       }
-      // Step 1: 创建 Chart 对象
-      const chart = new F2.Chart({
-        id,
-        pixelRatio: window.devicePixelRatio, // 指定分辨率
-      });
+      let chart = undefined;
+      if (this.initCanvas[id]) {
+        chart = this.initCanvas[id];
+        chart.clear();
+      } else {
+        // Step 1: 创建 Chart 对象
+        chart = new F2.Chart({
+          id,
+          pixelRatio: window.devicePixelRatio, // 指定分辨率
+        });
+      }
 
       chart.legend(false);
       chart.axis("value", {
@@ -476,6 +524,7 @@ export default {
       data.forEach(function(obj) {
         const point = chart.getPosition(obj);
         let val = filters.formatNum(obj.value);
+        console.log(group.getBBox(obj));
         group.addShape("text", {
           attrs: {
             x: point.x,
@@ -487,7 +536,7 @@ export default {
           },
         });
       });
-      this.initCanvas[id] = chart;
+      !this.initCanvas[id] && (this.initCanvas[id] = chart);
     },
     line(list, key, id) {
       let data = [];
@@ -532,9 +581,8 @@ export default {
         },
       });
       chart.tooltip({
-        showTitle: true
+        showTitle: true,
       });
-
       chart
         .area()
         .position("name*value")