MiniPrograms_Activity/pages/live/components/douyin/douyin.js

// pages/live/components/douyin/douyin.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ""
    },
    season:{
      type: Number,
      value: 1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    error: "",
    detail: "",
    diglogTitle: "",
    headData: {},
    lineList: [],
    region: [],
    series: []
  },
  ready() {
    this.getData()
  },
  /**
   * 组件的方法列表
   */
  methods: {
    formatNumber: function (val) {
      let out = val;
      if (val >= 1000 && val < 10000) {
        out = (val / 1000).toFixed(2) - 0 + "千"
      } else if (val >= 10000 && val < 100000000) {
        out = (val / 10000).toFixed(0) - 0 + "万"
      } else if (val >= 100000000) {
        out = (val / 100000000).toFixed(2) - 0 + "亿"
      }
      return out
    },
    getData: function () {
      let _this = this;
      wx.showLoading();
      wx.request({
        url: app.baseUrl + '/live-result',
        data: {
          topic: this.data.title,
          platform: "douyin",
          season: this.data.season
        },
        success: function (res) {
          wx.hideLoading()
          if (res.statusCode !== 200) return wx.showToast({
            title: '请重启小程序',
            icon: "error"
          })
          let oriData = res.data || {};
          let region = [];
          let trend = oriData.trend || {};
          let RealTimeTraffic = {
            title: "实时流量",
            subTitle: "",
            id: 'id' + 10,
            canvasId: 'canvasId' + 10,
            type: "line",
            yType: "value",
            xType: "time",
            peopleList: []
          };
          let RealTimePersonTime = {
            title: "观看人次",
            subTitle: "",
            id: 'id' + 11,
            canvasId: 'canvasId' + 11,
            type: "line",
            yType: "value",
            xType: "time",
            peopleList: []
          };
          let AddUpFans = {
            title: "累计粉丝量",
            subTitle: "",
            id: 'id' + 12,
            canvasId: 'canvasId' + 12,
            type: "line",
            yType: "value",
            xType: "time",
            peopleList: []
          };
          let LikeTheTrend = {
            title: "点赞走势",
            subTitle: "",
            id: 'id' + 13,
            canvasId: 'canvasId' + 13,
            type: "line",
            yType: "value",
            xType: "time",
            peopleList: []
          };
          // 实时流量
          RealTimeTraffic.subTitle = "在线人数峰值：" + _this.formatNumber((trend.user || {}).user_count || 0) + "  出现时间：" + _this.formatNumber((trend.user || {}).crawl_date || "") + " 平均人数：" + _this.formatNumber((trend.user || {}).avg_user_count || 0);
          // 观看人次
          RealTimePersonTime.subTitle = _this.formatNumber((trend.user || {}).stats_user_composition_from_my_follow_count || 0) + "人来自关注页面 " + _this.formatNumber((trend.user || {}).stats_user_composition_from_video_detail_count || 0) + "人来自视频推荐";
          // 累计粉丝量
          AddUpFans.subTitle = "粉丝峰值：" + _this.formatNumber((trend.fans || {}).club_info_total_fans_count || 0) + " 出现在：" + _this.formatNumber((trend.fans || {}).crawl_date || "");
          // 点赞走势
          LikeTheTrend.subTitle = "点赞峰值：" + _this.formatNumber((trend.like || {}).add_like_count || 0) + " 出现在：" + _this.formatNumber((trend.like || {}).crawl_date || "");
          // 趋势图数据
          for (let i = 0; i < (trend.webcastTrendList || []).length; i++) {
            const v = (trend.webcastTrendList || [])[i];
            let time = v.crawl_date.split(" ")[1] || "";
            RealTimeTraffic.peopleList.push({
              value: _this.formatNumber(v.user_count || 0),
              time: time
            });
            RealTimePersonTime.peopleList.push({
              value: _this.formatNumber(v.stats_total_user || 0),
              time: time
            });
            AddUpFans.peopleList.push({
              value: _this.formatNumber(v.club_info_total_fans_count || 0),
              time: time
            });
            LikeTheTrend.peopleList.push({
              value: _this.formatNumber(v.like_count || 0),
              time: time
            });
          }
          // 基础数据  
          let base = {
            msg_count: (oriData.webcastMessageList ? oriData.webcastMessageList.count || 0 : 0),
            like_count: (trend.like || {}).add_like_count || 0,
            total_fans_count: (trend.fans || {}).club_info_total_fans_count || 0,
            peopel_time: (trend.user || {}).stats_total_user || 0
          }
          // 来源城市
          let city = oriData.city || []
          for (let i = 0; i < city.length; i++) {
            const element = city[i] || {};
            region.push({
              name: element.key || "",
              value: element.count || 0
            })
          }
          // 性别比
          let gender = [];
          let oriGender = oriData.gender || [];
          for (let i = 0; i < oriGender.length; i++) {
            const v = oriGender[i];
            gender.push({
              name: v.key == "1" ? "男" : "女",
              value: v.count
            })
          }
          let p = {
            headData: base,
            region: [],
            series: [],
            lineList: []
          }
          region.length && p.region.push(region);
          if (gender.length)
            p.series = [
              {
                type: 'pie',
                label: {
                  position: 'inner',
                  fontSize: 14,
                },
                data: gender,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ];
          AddUpFans.peopleList.length && p.lineList.push(AddUpFans);
          LikeTheTrend.peopleList.length && p.lineList.push(LikeTheTrend);
          RealTimeTraffic.peopleList.length && p.lineList.push(RealTimeTraffic);
          RealTimePersonTime.peopleList.length && p.lineList.push(RealTimePersonTime);
          _this.setData(p)

        },
        fail: function (err) {
          wx.hideLoading()
          wx.showToast({
            title: '请重启小程序',
            icon: "error"
          })
        },
      })
    }
  }
})