按钮组

src/view/index/components/btnGroup/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="btngroup">
+    <van-button
+      v-if="weibo && weibo['6m'][type] && weibo['6m'][type].length"
+      :type="readType === '6m' ? 'info' : 'default'"
+      @click="() => selectClick('6m')"
+      size="mini"
+    >
+      1小时
+    </van-button>
+    <van-button
+      v-if="weibo && weibo['24h'][type] && weibo['24h'][type].length"
+      :type="readType === '24h' ? 'info' : 'default'"
+      @click="() => selectClick('24h')"
+      size="mini"
+    >
+      24小时
+    </van-button>
+    <van-button
+      v-if="weibo && weibo['7d'][type] && weibo['7d'][type].length"
+      :type="readType === '7d' ? 'info' : 'default'"
+      @click="() => selectClick('7d')"
+      size="mini"
+    >
+      7天
+    </van-button>
+    <van-button
+      v-if="weibo && weibo['30d'][type] && weibo['30d'][type].length"
+      :type="readType === '30d' ? 'info' : 'default'"
+      @click="() => selectClick('30d')"
+      size="mini"
+    >
+      30天
+    </van-button>
+  </div>
+</template>
+
+<style scoped>
+.btngroup {
+  float: right;
+  padding-right: 5px;
+  display: inline-block;
+}
+</style>
+
+<script>
+import { Button as vanButton } from "vant";
+import "vant/lib/button/style";
+export default {
+  components: {
+    vanButton,
+  },
+  props: {
+    type: {
+      type: String,
+      value: "",
+    },
+    weibo: {
+      type: Object,
+      value: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      readType: "30d",
+    };
+  },
+  created() {},
+  methods: {
+    selectClick(key) {
+      if (key === this.readType) return;
+      this.$emit("changeBtn", { key, type: this.type }, () => {
+        this.readType = key;
+      });
+    },
+  },
+};
+</script>

src/view/index/index.vue

@@ -146,7 +146,10 @@
       :width="client.width"
       :height="client.height"
     ></canvas>
-    <div v-if="read.length" class="title">微博-阅读量趋势</div>
+    <div v-if="read.length" class="title">
+      微博-阅读量趋势
+      <btn-group @changeBtn="changeBtn" :weibo="weibo" type="read" />
+    </div>
     <canvas
       v-if="read.length"
       id="weiboRead"
@@ -154,7 +157,10 @@
       :width="client.width"
       :height="client.height"
     ></canvas>
-    <div v-if="me.length" class="title">微博-讨论趋势</div>
+    <div v-if="me.length" class="title">
+      微博-讨论趋势
+      <btn-group @changeBtn="changeBtn" :weibo="weibo" type="me" />
+    </div>
     <canvas
       v-if="me.length"
       id="weiboMe"
@@ -162,7 +168,10 @@
       :width="client.width"
       :height="client.height"
     ></canvas>
-    <div v-if="ori.length" class="title">微博-原创趋势</div>
+    <div v-if="ori.length" class="title">
+      微博-原创趋势
+      <btn-group @changeBtn="changeBtn" :weibo="weibo" type="me" />
+    </div>
     <canvas
       v-if="ori.length"
       id="weiboOri"
@@ -216,12 +225,16 @@ import "vant/lib/image/style";
 import "vant/lib/popup/style";
 import "vant/lib/button/style";
 import F2 from "@antv/f2/lib/index-all";
+
+import btnGroup from "./components/btnGroup/index";
+
 export default {
   components: {
     vanImage,
     vanLoading,
     vanPopup,
     vanButton,
+    btnGroup,
     live,
   },
   data() {
@@ -489,15 +502,15 @@ export default {
       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.destroy();
+        chart = undefined;
       }
 
+      // Step 1: 创建 Chart 对象
+      chart = new F2.Chart({
+        id,
+        pixelRatio: window.devicePixelRatio, // 指定分辨率
+      });
       chart.legend(false);
       chart.axis("value", {
         label: function label(text) {
@@ -523,20 +536,18 @@ export default {
       const group = canvas.addGroup();
       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,
             y: point.y + offset,
-            text: val,
+            text: filters.formatNum(obj.value),
             textAlign: "center",
             textBaseline: "bottom",
             fill: "#808080",
           },
         });
       });
-      !this.initCanvas[id] && (this.initCanvas[id] = chart);
+      this.initCanvas[id] = chart;
     },
     line(list, key, id) {
       let data = [];
@@ -548,10 +559,17 @@ export default {
           value: v[key],
         });
       }
-      const chart = new F2.Chart({
-        id,
-        pixelRatio: window.devicePixelRatio,
-      });
+      let chart = undefined;
+      if (this.initCanvas[id]) {
+        chart = this.initCanvas[id];
+        chart.clear();
+      } else {
+        chart = new F2.Chart({
+          id,
+          pixelRatio: window.devicePixelRatio,
+        });
+      }
+
       chart.source(data, {
         name: {
           tickCount: 3,
@@ -597,6 +615,40 @@ export default {
       chart.render();
       this.initCanvas[id] = chart;
     },
+    changeBtn(obj, call) {
+      if (obj.key === "6m") {
+        // 更新请求
+        getList({
+          topic_name: this.baseData.topic_name,
+          time: obj.key,
+          season: this.$route.query.season,
+        }).then(res => {
+          this.weibo = res || {};
+          let weiboSelect = this.weibo[obj.key] || {
+            me: [],
+            read: [],
+            ori: [],
+          };
+          this[obj.type] = weiboSelect[obj.type] || [];
+          this.$nextTick(() => {
+            let id = "weiboMe";
+            if (obj.type === "read") id = "weiboRead";
+            if (obj.type === "ori") id = "weiboOri";
+            this[obj.type].length && this.line(this[obj.type], "value", id);
+            call && call();
+          });
+        });
+        return;
+      }
+      let list = this.weibo[obj.key][obj.type];
+      if (!list || !list.length) return;
+      this[obj.type] = list || [];
+      let id = "weiboMe";
+      if (obj.type === "read") id = "weiboRead";
+      if (obj.type === "ori") id = "weiboOri";
+      this[obj.type].length && this.line(this[obj.type], "value", id);
+      call && call();
+    },
   },
 };
 </script>