H5_Embedded_Page/src/view/liveKuaishou/index.vue

<template>
  <div class="yukang">
    <van-cell-group>
      <van-cell :title="'直播时间：' + base.live_time" />
    </van-cell-group>
    <div class="mainBody" style="padding-bottom: 50px">
      <div>
        <van-row>
          <van-col span="12" class="van-hairline--right">
            <div class="title">
              性别
            </div>
            <canvas
              ref="chart"
              :width="canvasRegion.width / 2"
              :height="canvasRegion.height"
            ></canvas>
          </van-col>
          <van-col span="12">
            <div class="title">
              年龄
            </div>
            <canvas
              ref="chartage"
              :width="canvasRegion.width / 2"
              :height="canvasRegion.height"
            ></canvas>
          </van-col>
        </van-row>
        <b-canvas
          keyName="value"
          :transposed="true"
          :height="300"
          :legend="true"
          :list="platformSort"
        ></b-canvas>
      </div>
      <!-- 实时走势 -->
      <c-canvas
        v-if="BulletChat.peopleList.length"
        :showListBtn="true"
        :list="BulletChat.peopleList"
      ></c-canvas>
      <c-canvas
        v-if="ScreenMan.peopleList.length"
        :list="ScreenMan.peopleList"
        :showListBtn="true"
      ></c-canvas>
      <c-canvas
        v-if="flow.peopleList.length"
        :showListBtn="true"
        :list="flow.peopleList"
      ></c-canvas>
    </div>
  </div>
</template>

<script>
import cCanvas from "@/components/chart";
import bCanvas from "@/components/bChart";
import { getlive } from "@/api/getList.js";
import {  Col as vanCol, Row as vanRow, Cell as vanCell, CellGroup  as vanCellGroup } from "vant";
import "vant/lib/cell/style";
import "vant/lib/cell-group/style";
import "vant/lib/col/style";
import "vant/lib/row/style";
import F2 from "@antv/f2";

export default {
  name: "App",
  components: {
    vanCellGroup,
    vanCell,
    cCanvas,
    bCanvas,
    vanCol,
    vanRow,
  },
  data() {
    return {
      canvasRegion: {
        width: 0,
        height: 0,
      },
      base: {},
      platformSort: [],
      BulletChat: { peopleList: [] },
      flow: { peopleList: [] },
      ScreenMan: { peopleList: [] },
    };
  },
  mounted() {
    let w = document.body.clientWidth || 0;
    let h = document.body.clientHeight / 3;
    this.canvasRegion = {
      width: w > 1200 ? 1200 : w,
      height: h,
    };
  },
  created() {
    let q = this.$route.query;
    getlive({
      topic: q.title,
      platform: q.platform,
    }).then(res => {
      let oriData = res || {};
      let trend = oriData.trend || {};
      this.base = {
        live_time: oriData.detail ? oriData.detail.time || "" : ""
      };
      let gender = [];
      let oriGender = oriData.fans.gender || [];
      for (let i = 0; i < oriGender.length; i++) {
        const v = oriGender[i];
        gender.push({
          name: v.gender,
          percent: v.rate.replace("%", "") * 1,
          a: "1",
        });
      }
      let age = [];
      let oriAge = oriData.fans.age || [];
      for (let i = 0; i < oriAge.length; i++) {
        const v = oriAge[i];
        age.push({
          name: v.item,
          percent: v.percent * 100,
          a: "1",
        });
      }
      this.pie(gender, "chart");
      this.pie(age, "chartage");
      let cityList = [];
      let oriCity = oriData.fans.area["全部"] || [];
      oriCity.map(v => {
        cityList.push({
          nickname: v.Name.replace("市", ""),
          value: v.Ratio.toFixed(2) - 0,
        });
      });
      this.platformSort = cityList;

      let flow = {
        title: "实时流量",
        subTitle: "",
        id: "id" + 10,
        canvasId: "canvasId" + 10,
        type: "line",
        yType: "value",
        xType: "time",
        peopleList: [],
      };
      let BulletChat = {
        title: "累计粉丝量",
        subTitle: "",
        id: "id" + 12,
        canvasId: "canvasId" + 12,
        type: "line",
        yType: "value",
        xType: "time",
        peopleList: [],
      };
      let ScreenMan = {
        title: "点赞走势",
        subTitle: "",
        id: "id" + 13,
        canvasId: "canvasId" + 13,
        type: "line",
        yType: "value",
        xType: "time",
        peopleList: [],
      };
      // 实时流量
      flow.subTitle =
        "在线人数峰值：" +
        ((trend.user || {}).user_count || 0) +
        "  出现时间：" +
        ((trend.user || {}).crawl_date || "") +
        " 平均人数：" +
        ((trend.user || {}).avg_user_count || 0);
      // 累计粉丝量
      BulletChat.subTitle =
        "粉丝峰值：" +
        ((trend.fans || {}).club_info_total_fans_count || 0) +
        " 出现在：" +
        ((trend.fans || {}).crawl_date || "");
      // 点赞走势
      ScreenMan.subTitle =
        "点赞峰值：" +
        ((trend.like || {}).add_like_count || 0) +
        " 出现在：" +
        ((trend.like || {}).crawl_date || "");
      // 趋势图数据
      for (let i = 0; i < (oriData.detail.watch || []).length; i++) {
        const v = (oriData.detail.watch || [])[i];
        let time = this.formatTime(v.x);
        flow.peopleList.push({
          value: v.watch || 0,
          type: "实时流量",
          date: time,
        });
        BulletChat.peopleList.push({
          value: v.bsc || 0,
          type: "弹幕数",
          date: time,
        });
        ScreenMan.peopleList.push({
          value: v.bsuc || 0,
          type: "弹幕人数",
          date: time,
        });
      }

      this.BulletChat = BulletChat;
      this.flow = flow;
      this.ScreenMan = ScreenMan;
    });
  },
  computed: {},
  methods: {
    pie(gender, ele) {
      const chart = new F2.Chart({
        el: this.$refs[ele],
        pixelRatio: window.devicePixelRatio,
      });
      chart.source(gender, {
        percent: {
          formatter: function formatter(val) {
            return val * 100 + "%";
          },
        },
      });
      chart.legend({
        position: "right",
        itemFormatter: function itemFormatter(val) {
          return val;
        },
      });
      chart.tooltip(false);
      chart.coord("polar", {
        transposed: true,
        radius: 0.85,
      });
      chart.axis(false);
      chart
        .interval()
        .position("a*percent")
        .color("name", [
          "#1890FF",
          "#13C2C2",
          "#2FC25B",
          "#FACC14",
          "#F04864",
          "#8543E0",
        ])
        .adjust("stack")
        .style({
          lineWidth: 1,
          stroke: "#fff",
          lineJoin: "round",
          lineCap: "round",
        })
        .animate({
          appear: {
            duration: 1200,
            easing: "bounceOut",
          },
        });

      chart.render();
    },
    formatTime(time) {
      let t = new Date(time);
      let hour = t.getHours();
      let min = t.getMinutes();
      let sec = t.getSeconds();
      hour = hour > 9 ? hour : '0' + hour;
      min = min > 9 ? min : '0' + min;
      sec = sec > 9 ? sec : '0' + sec;
      return hour + ":" + min + ":" + sec;
    },
  },
};
</script>

<style lang="scss" scoped>
.yukang {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  color: #2c3e50;
  font-weight: 400;
  .title {
    width: 100%;
    padding: 10px 16px;
    box-sizing: border-box;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
  }
  .userType {
    position: relative;
    .textGroup {
      z-index: 1;
      position: absolute;
      overflow: hidden;
      top: 15px;
      right: 10px;
      font-size: 0;
      color: #1989fa;
      &::after {
        border-radius: 3px;
        border-color: #1989fa;
      }
      .text {
        padding: 0 3px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
      }
      .act {
        background-color: #1989fa;
        color: #fff;
      }
    }
  }
  .title{
    color: #323233;
    font-size: 14px;
  }
}
</style>