H5_Embedded_Page/src/view/index/index.vue

<template>
  <div style="padding-bottom: 1em">
    <table class="local_table">
      <tr>
        <td v-if="baseData.total_pv !== -1">总浏览量</td>
        <td v-if="baseData.total_pv !== -1">
          {{ baseData.total_pv | formatnum }}
        </td>
        <td v-if="baseData.total_ori !== -1">原创量</td>
        <td v-if="baseData.total_ori !== -1">
          {{ baseData.total_ori | formatnum }}
        </td>
      </tr>
      <tr>
        <td v-if="baseData.total_digg !== -1">总点赞数</td>
        <td v-if="baseData.total_digg !== -1">
          {{ baseData.total_digg | formatnum }}
        </td>
        <td v-if="baseData.total_comment !== -1">总评论数</td>
        <td v-if="baseData.total_comment !== -1">
          {{ baseData.total_comment | formatnum }}
        </td>
      </tr>
      <tr>
        <td v-if="baseData.total_forward !== -1">总转发量</td>
        <td v-if="baseData.total_forward !== -1">
          {{ baseData.total_forward | formatnum }}
        </td>
        <td v-if="baseData.live_uv !== -1">直播观看人数</td>
        <td v-if="baseData.live_uv !== -1">
          {{ baseData.live_uv | formatnum }}
        </td>
      </tr>
      <tr>
        <td v-if="baseData.live_add_fans !== -1">新增粉丝数</td>
        <td v-if="baseData.live_add_fans !== -1">
          {{ baseData.live_add_fans | formatnum }}
        </td>
        <td v-if="baseData.live_comment !== -1">直播评论数</td>
        <td v-if="baseData.live_comment !== -1">
          {{ baseData.live_comment | formatnum }}
        </td>
      </tr>
    </table>

    <br v-if="baseData.has_live_douyin_data" />
    <van-button
      v-if="baseData.has_live_douyin_data"
      plain
      hairline
      type="info"
      style="margin: 0 5px"
      size="normal"
      @click="show = true"
      round
      >直播</van-button
    >
    <br v-if="baseData.has_live_douyin_data" />
    <div v-if="cakeList.length" class="title">平台对比</div>
    <canvas
      v-if="cakeList.length"
      id="cake"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="userSort.length" class="title">账号排名</div>
    <canvas
      v-if="userSort.length"
      id="account"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="baseData.word_cloud_url" class="title">词云</div>
    <van-image v-if="baseData.word_cloud_url" :src="baseData.word_cloud_url">
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <!-- <canvas
      id="keyCloud"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas> -->
    <div v-if="douyin.length" class="title">抖音-评论排行</div>
    <canvas
      v-if="douyin.length"
      id="douyinComment"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="douyin.length" class="title">抖音-点赞排行</div>
    <canvas
      v-if="douyin.length"
      id="douyinDigg"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="douyin.length" class="title">抖音-粉丝量排行</div>
    <canvas
      v-if="douyin.length"
      id="douyinMplatformFollowers"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="kuaishou.length" class="title">快手-播放量排行</div>
    <canvas
      v-if="kuaishou.length"
      id="kuaishouPlay"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="kuaishou.length" class="title">快手-评论排行</div>
    <canvas
      v-if="kuaishou.length"
      id="kuaishouComment"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="read.length" class="title">微博-阅读量趋势</div>
    <canvas
      v-if="read.length"
      id="weiboRead"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="me.length" class="title">微博-讨论趋势</div>
    <canvas
      v-if="me.length"
      id="weiboMe"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="ori.length" class="title">微博-原创趋势</div>
    <canvas
      v-if="ori.length"
      id="weiboOri"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>
    <div v-if="yangshi.length" class="title">央视-浏览排行</div>
    <canvas
      v-if="yangshi.length"
      id="yangshiPv"
      class="canvas"
      :width="client.width"
      :height="client.height"
    ></canvas>

    <van-popup safe-area-inset-bottom v-model="show" round position="bottom">
      123
    </van-popup>
  </div>
</template>

<style scoped></style>

<script>
import {
  getAllPlatform,
  getPlatform,
  getList,
} from "@/api/getList.js";
import filters from "@/utils/filters/index";
import {
  Image as vanImage,
  Loading as vanLoading,
  Popup as vanPopup,
  Button as vanButton,
} from "vant";
import "vant/lib/image/style";
import "vant/lib/popup/style";
import "vant/lib/button/style";
import F2 from "@antv/f2";
export default {
  components: {
    vanImage,
    vanLoading,
    vanPopup,
    vanButton,
  },
  data() {
    return {
      initCanvas: {
        cake: undefined,
        account: undefined,
      },
      baseData: {},
      client: {
        width: 0,
        height: 0,
      },
      userSort: [],
      douyin: [],
      kuaishou: [],
      weibo: {},
      me: [],
      ori: [],
      read: [],
      yangshi: [],
      cakeList: [],
      show: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let titles = this.$route.query.title.split(" / ");
      let title =  titles[titles.length - 1];
      // let title =  encodeURIComponent(titles[titles.length - 1]);
      let clientWidth = document.body.clientWidth || 0;
      this.client = {
        width: clientWidth,
        height: (clientWidth / 16) * 9,
      };
      this.baseData = JSON.parse(this.$route.query.data);
      getAllPlatform({
        season: this.$route.query.season,
        topic_name: title,
      }).then(res => {
        this.cakeList = res || [];
        if (!this.cakeList.length) return;
        this.$nextTick(() => {
          this.cake(res || []);
        });
      });
      getPlatform({
        season: this.$route.query.season,
        topic_name: title,
        platform: "ALL",
        type: "all",
      }).then(res => {
        this.userSort = (res || []).map(v => {
          return {
            name: v.nickname,
            digg_count: v.digg_count,
            comment_count: v.comment_count,
            forward_count: v.forward_count,
          };
        });
        if (!this.userSort.length) return;
        this.$nextTick(() => {
          let list = this.userSort.sort((a, b) => b.digg_count - a.digg_count);
          this.account(list, "digg_count", "account");
        });
      });
      getPlatform({
        season: this.$route.query.season,
        topic_name: title,
        platform: "douyin",
        type: "douyin",
      }).then(res => {
        this.douyin = (res || []).map(v => {
          return {
            name: v.nickname,
            digg_count: v.digg_count,
            comment_count: v.comment_count,
            mplatform_followers_count: v.mplatform_followers_count,
          };
        });
        if (!this.douyin.length) return;
        this.$nextTick(() => {
          // 点赞
          let list = this.douyin.sort((a, b) => b.digg_count - a.digg_count);
          this.account(list, "digg_count", "douyinDigg");
          // 评论
          let listComment = this.douyin.sort(
            (a, b) => b.comment_count - a.comment_count
          );
          this.account(listComment, "comment_count", "douyinComment");
          // 粉丝量
          let listFollowers = this.douyin.sort(
            (a, b) => b.mplatform_followers_count - a.mplatform_followers_count
          );
          this.account(
            listFollowers,
            "mplatform_followers_count",
            "douyinMplatformFollowers"
          );
        });
      });
      getPlatform({
        season: this.$route.query.season,
        topic_name: title,
        platform: "kuaishou",
        type: "kuaishou",
      }).then(res => {
        this.kuaishou = (res || []).map(v => {
          return {
            name: v.nickname,
            pv: v.pv,
            comment_count: v.comment_count,
          };
        });
        if (!this.kuaishou.length) return;
        this.$nextTick(() => {
          // 播放量
          let list = this.kuaishou.sort((a, b) => b.pv - a.pv);
          this.account(list, "pv", "kuaishouPlay");
          // 评论
          let listComment = this.kuaishou.sort(
            (a, b) => b.comment_count - a.comment_count
          );
          this.account(listComment, "comment_count", "kuaishouComment");
        });
      });
      getPlatform({
        season: this.$route.query.season,
        topic_name: title,
        platform: "yangshi",
        type: "yangshi",
      }).then(res => {
        this.yangshi = (res || []).map(v => {
          return {
            name: v.nickname,
            pv: v.pv,
          };
        });
        if (!this.yangshi.length) return;
        this.$nextTick(() => {
          // 播放量
          let list = this.yangshi.sort((a, b) => b.pv - a.pv);
          this.account(list, "pv", "yangshiPv");
        });
      });
      getList({
        topic_name: title,
        time: "30d",
        season: this.$route.query.season,
      }).then(res => {
        this.weibo = res || {};
        let weiboSelect = this.weibo["30d"] || { me: [], read: [], ori: [] };
        this.me = weiboSelect.me || [];
        this.read = weiboSelect.read || [];
        this.ori = weiboSelect.ori || [];
        this.$nextTick(() => {
          this.me.length && this.line(this.me, "value", "weiboMe");
          this.read.length && this.line(this.read, "value", "weiboRead");
          this.ori.length && this.line(this.ori, "value", "weiboOri");
        });
      });
    },
    cake(list) {
      let data = list.map(v => {
        return {
          name: v.platform,
          percent: v.total_pv,
          a: "1",
        };
      });
      const chart = new F2.Chart({
        id: "cake",
        pixelRatio: window.devicePixelRatio,
      });
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            return val * 100 + "%";
          },
        },
      });
      chart.tooltip(false);
      chart.coord("polar", {
        transposed: true,
        radius: 1,
      });
      chart.axis(false);
      chart.legend({
        position: "left",
      });
      chart
        .interval()
        .position("a*percent")
        .color("name", ["#13C2C2", "#2FC25B", "#FACC14", "#F04864", "#8543E0"])
        .adjust("stack")
        .style({
          lineWidth: 1,
          stroke: "#fff",
          lineJoin: "round",
          lineCap: "round",
        })
        .animate({
          appear: {
            duration: 1200,
            easing: "bounceOut",
          },
        });

      chart.render();
      this.initCanvas.cake = chart;
    },
    account(list, key, id) {
      // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      let data = [];
      let len = list.length > 10 ? 10 : list.length;
      for (let i = 0; i < len; i++) {
        const v = list[i];

        const li = v.name.split("");
        let nickname = li
          .map((val, i) => {
            i !== 0 && (i + 1) % 2 === 0 && (val = val + "\n");
            return val;
          })
          .join("");
        data.push({
          name: nickname,
          value: v[key],
        });
      }
      // Step 1: 创建 Chart 对象
      const chart = new F2.Chart({
        id,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
      });

      chart.legend(false);
      chart.axis("value", {
        label: function label(text) {
          return { text: filters.formatNum(text) };
        },
      });

      // Step 2: 载入数据源
      chart.source(data);

      // Step 3：创建图形语法，绘制柱状图
      chart
        .interval()
        .position("name*value")
        .color("name", ["#13C2C2"]);

      // Step 4: 渲染图表
      chart.render();

      // 绘制柱状图文本
      const offset = -5;
      const canvas = chart.get("canvas");
      const group = canvas.addGroup();
      data.forEach(function(obj) {
        const point = chart.getPosition(obj);
        let val = filters.formatNum(obj.value);
        group.addShape("text", {
          attrs: {
            x: point.x,
            y: point.y + offset,
            text: val,
            textAlign: "center",
            textBaseline: "bottom",
            fill: "#808080",
          },
        });
      });
      this.initCanvas[id] = chart;
    },
    line(list, key, id) {
      let data = [];
      let len = list.length;
      for (let i = 0; i < len; i++) {
        const v = list[i];
        data.push({
          name: v.time,
          value: v[key],
        });
      }
      const chart = new F2.Chart({
        id,
        pixelRatio: window.devicePixelRatio,
      });
      chart.source(data, {
        name: {
          tickCount: 3,
          range: [0, 1],
        },
        value: {
          tickCount: 5,
          min: 0,
        },
      });

      chart.axis("name", {
        label: function label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          return textCfg;
        },
      });

      chart.axis("value", {
        label: function label(text) {
          return { text: filters.formatNum(text) };
        },
      });
      chart.tooltip({
        showCrosshairs: true,
      });

      chart
        .area()
        .position("name*value")
        .color("l(90) 0:#1890FF 1:#f7f7f7")
        .shape("smooth");
      chart
        .line()
        .position("name*value")
        .color("l(90) 0:#1890FF 1:#f7f7f7")
        .shape("smooth");
      chart.render();
      this.initCanvas[id] = chart;
    },
  },
};
</script>