applet/edition1.0.0/pages/liveBoard/index.js

// pages/liveBoard/index.js
import * as echarts from '../../components/ec-canvas/echarts';
const app = getApp()
Page({
  //页面的初始数据
  data: {
    time_arr: {
      'liveDetailTime':null,
      'ShowGoodsTime':null,
      'todayShowDetailTime':null,
      'getRewardTime':null,
      'getVulgarTycoonTime':null,
      'getbarrageListTime':null,
      'getGiftListTime':null},
    live_stream_id: "",
    detailInfo:{},
    ec: {
      lazyLoad: true
    },
    goodsTrendInfo:{
      isCommoditySales:false,
      isRewardTrend:false
    },
    goodsListInfo:{},
    barrageData:{
      list:[],
      total:-1,
      barrage_direction:'top',
      barrage_marquee:0
    },
    giftData:{
      list:[],
      total:-1
    },
    vulgarTycoonData:{//土豪数据
      list:[]
    },
    goodsStatisticsData:{//商品趋势图
      checkDrawPie:1,
      checkPriceTrend:1,
      checkChannelTrend:1
    },
    barrageTime:10000,//弹幕轮训时间10s
    otherTime:30000,//其他轮训时间30s
    isLiveOne:false,//是否是第一次进入此次直播展板
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('onLoad')
    console.log(options)
    this.setData({
      'live_stream_id': options.live_stream_id,
      'user_id': options.user_id,
    })
    this.liveDetail();
  },
  onShow: function () {
    if(this.data.live_stream_id == ''){
      return;
    }
    console.log('onShow')
    for(var i in this.data.time_arr){
      clearTimeout(this.data.time_arr[i])
    }
    this.liveDetail();
  },
  getStatus(){//判断弹幕是否开启
    app.func.req('/api/kwai/barrageScrapeStatus','post',{
      'liveStreamId':this.data.live_stream_id,
      'user_id':this.data.user_id
    },(res) => {
      if(res&& res.errno == 0){
          if(res.rst.barrageScrapeStatus!=2){//爬取中：2  爬取开始或结束：0
            this.addBarrageScrape()//开启弹幕爬取
          }else if(res.rst.hasBarrage){//是否开启过弹幕监测，为true时开启过
            this.getbarrageList();
            this.getGiftList();
          }
      }else {
      }
    },(err)=>{
      console.log(err)
    })
  },
  addBarrageScrape() {// 开启弹幕监测
    app.func.req('/api/kwai/addBarrageScrape','post',{
      'liveStreamId':this.data.live_stream_id
    },(res) => {
      if(res.auno == 4403 || res.errno == 4003){
        this.setData({
          barrageData:Object.assign(this.data.barrageData,{'hasAuno':true})
        })
        this.setData({
          giftData:Object.assign(this.data.giftData,{'hasAuno':true})
        })
        return;
      }
      if(res&& res.errno == 0){
        this.getbarrageList();
        this.getGiftList();
      }else if(res.errno!=4003){
        wx.showToast({
          title: '弹幕开启失败！',
          icon: 'none',
          duration: 2000
        })
      }
    },(err)=>{
      console.log(err)
    })
  },
  liveDetail(){//直播详情
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    app.func.req('/v2/api/show/showDetailInfo','get',{
      'live_stream_id':this.data.live_stream_id,
      'user_id':this.data.user_id
    },(res) => {
      if(res && res.errno == 0){
        //成功
        var data = res.rst;
        if(data.minute){
          data = Object.assign(data, {'minutes_CN':this.formatDuring(data.minute)})
        }
        this.setData({
          detailInfo: data
        })
        if(!this.data.isLiveOne){
          console.log('第一次进入此次直播展板')
          this.todayShowDetail();
          this.ShowGoods();
          this.getReward();
          this.getVulgarTycoon();
          this.getStatus();//判断弹幕是否开启
        }
        this.setData({
          isLiveOne:true
        })
        this.userGoodsStatistics();//数据趋势
        this.timeOut('liveDetailTime',this.data.otherTime,'liveDetail')
      }else{
        wx.showToast({
          title: res.err,
          icon: 'none',
          duration: 2000
        })
      }
    },(err)=>{
      wx.hideLoading()
      this.timeOut('liveDetailTime',this.data.otherTime,'liveDetail')
    })
  },
  ShowGoods(){// 直播商品列表
    var that = this;
    app.func.req('/v2/api/kwai/showGoods','post',{
      'page': 1,
      'user_id':'',
      'pagesize': 999,
      'name':'',
      'stime':'',
      'etime':'',
      'top_cid': 0,//分类id
      'title':'',
      'commodity_id':'',
      'live_stream_id': this.data.live_stream_id,
      'user_id': this.data.user_id,
      'sort':5 //上架时间
    },(res) => {
        if(res.auno == 4403 || res.errno == 4003){
          this.setData({
            goodsListInfo:Object.assign(this.data.goodsListInfo,{'hasAuno':true})
          })
          return;
        }
        if(res&& res.errno == 0){
            var data=res.rst.data;
            this.setData({
              goodsListInfo:Object.assign(this.data.goodsListInfo,{'goodsList':data})
            })
            this.timeOut('ShowGoodsTime',this.data.otherTime,'ShowGoods')
        }else if(res.errno!=4003){
          wx.showToast({
            title: res.err,
            icon: 'none',
            duration: 2000
          })
        }
    },(err)=>{
      this.timeOut('ShowGoodsTime',this.data.otherTime,'ShowGoods')
    })
  },
  todayShowDetail() {// 直播趋势接口
    // clearTimeout(this.timerTrend)
    app.func.req('/api/kwai/todayShowDetail','post',{
      'liveStreamId':this.data.live_stream_id,
      'user_id':this.data.user_id,
    },(res) => {
      if(res.auno==4403||res.errno==4003) {
        this.setData({
          goodsTrendInfo:Object.assign(this.data.goodsTrendInfo,{'hasAuno':true})
        })
          return
      }
      if (res && res.errno == 0) {
        var watching_count_record = res.rst?res.rst.watching_count_record : {}; //在线人数曲线
        var watching_count_record_arr = { keyes: [], value: [] };
        for (let item in watching_count_record) {
            watching_count_record_arr.keyes.push(item);
            watching_count_record_arr.value.push(watching_count_record[item]);
        }

        var like_count_record = res.rst?res.rst.like_count_record : {}; //点赞数
        var like_count_record_arr = { keyes: [], value: [] };
        for (let item in like_count_record) {
            like_count_record_arr.keyes.push(item);
            like_count_record_arr.value.push(like_count_record[item]);
        }

        var reward_count_record = res.rst?res.rst.reward_count_record : {}; //打赏数
        var reward_count_record_arr = { keyes: [], value: [] };
        for (let item in reward_count_record) {
            reward_count_record_arr.keyes.push(item);
            reward_count_record_arr.value.push(reward_count_record[item]);
        }

        var live_commodity_sum_record = res.rst?res.rst.live_commodity_sum_record : {}; //商品销量
        this.setData({
          goodsTrendInfo:Object.assign(this.data.goodsTrendInfo,{'isCommoditySales':Object.keys(live_commodity_sum_record).length==0})
        })
        var live_commodity_sum_record_arr = { keyes: [], value: [] };
        for (var item in live_commodity_sum_record) {
            live_commodity_sum_record_arr.keyes.push(item);
            live_commodity_sum_record_arr.value.push(
              live_commodity_sum_record[item]
            );
        }
        if(!this.data.goodsTrendInfo.isCommoditySales){
          this.CommoditySales(live_commodity_sum_record_arr); //商品销量
        }
        this.OnlineNumber(watching_count_record_arr); //在线人数
        this.timeOut('todayShowDetailTime',this.data.otherTime,'todayShowDetail')
      } else if(res.errno!=4003){
        wx.showToast({
          title: res.err,
          icon: 'none',
          duration: 2000
        })
      }
    },(err)=>{
      this.timeOut('todayShowDetailTime',this.data.otherTime,'todayShowDetail')
    });
  },
  CommoditySales(data) {//商品销量曲线
    var echartsComponnet = this.selectComponent('#commoditySales')
      echartsComponnet.init((canvas, width, height, dpr) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr 
        });
        var _this = this;
        var option = {
            tooltip: {
            trigger: "axis",
            formatter: function(params) {
              var result = params[0].name + "\n";
              params.forEach((item,index)=>{
                result += item.seriesName + '：' + app.func.NumberHandle(item.value,2)
              })
              return result;
            }
            },
            grid: {
                left: "6%",
                right: "8%",
                bottom: "0",
                top: "5%",
                bottom: "5%",
                containLabel: true
            },
            xAxis: [
            {
                type: "category",
                boundaryGap: false,
                data: data.keyes.map((item) => {
                    return item.split(" ")[1]
                }),
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff' 
                    }
                },
                axisTick: { // X轴线 刻度线
                    show: false,
                    length: 10,
                    lineStyle: {
                        color: 'red',
                        type: 'solid',
                        width: 2
                    }
                },
            }
            ],
            yAxis: [
            {
                type: "value",
                splitLine:{
                    show: true, // X轴线 颜色类型的修改
                    lineStyle: {
                        type: 'solid',
                        color: '#4E588A'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#fff' 
                  },
                  formatter: function(params) {
                    var result = params;
                    return app.func.NumberHandle(result);
                  }
                },
            }
            ],
            series: [
            {
                name: "商品销量",
                type: "line",
                itemStyle: {
                    normal: {
                        color: '#83FFF4',
                        // borderColor: "#83FFF4" //拐点边框颜色
                    }
                },
                smooth: true,
                // smooth: 0.6,
                symbol: "none",
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(41,244,241,.23)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(47,74,166,.33)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                data: data.value
            }
            ]
        };
        Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  OnlineNumber(data) {//在线人数曲线
    var echartsComponnet = this.selectComponent('#onlineNumber')
      echartsComponnet.init((canvas, width, height, dpr) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr 
        });
        var _this = this;
        var option = {
          tooltip: {
          trigger: "axis",
          formatter: function(params) {
            var result = params[0].name + "\n";
            params.forEach((item,index)=>{
              result += item.seriesName + '：' + app.func.NumberHandle(item.value,2)
            })
            return result;
          }
          },
          grid: {
              left: "6%",
              right: "8%",
              bottom: "0",
              top: "5%",
              bottom: "5%",
              containLabel: true
          },
          xAxis: [
          {
              type: "category",
              boundaryGap: false,
              data: data.keyes.map((item) => {
                  return item.split(" ")[1]
              }),
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#fff' 
                  }
              },
              axisTick: { // X轴线 刻度线
                  show: false,
                  length: 10,
                  lineStyle: {
                      color: 'red',
                      type: 'solid',
                      width: 2
                  }
              },
          }
          ],
          yAxis: [
          {
              type: "value",
              splitLine:{
                  show: true, // X轴线 颜色类型的修改
                  lineStyle: {
                      type: 'solid',
                      color: '#4E588A'
                  }
              },
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff' 
                },
                formatter: function(params) {
                  var result = params;
                  return app.func.NumberHandle(result);
                }
              },
          }
          ],
          series: [
          {
              name: "在线人数",
              type: "line",
              itemStyle: {
                  normal: {
                      color: '#83FFF4',
                      // borderColor: "#83FFF4" //拐点边框颜色
                  }
              },
              smooth: true,
              // smooth: 0.6,
              symbol: "none",
              areaStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: 'rgba(41,244,241,.23)' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'rgba(47,74,166,.33)' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                  }
              },
              data: data.value
          }
          ]
        };
        Chart.setOption(option);
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return Chart;
        });
  },
  getReward() {//送礼榜单趋势接口
    app.func.req('/v2/api/show/showtopinfo','get',{
      'show_id':this.data.live_stream_id,
      'user_id':this.data.user_id,
    },(res) => {
        if(res.auno==4403||res.errno==4003) {
          this.setData({
            goodsTrendInfo:Object.assign(this.data.goodsTrendInfo,{'hasAuno2':true})
          })
          return;
        }
        if(res&&res.errno==0) {
            var data=res.rst
            var rewardObj = {
                timeArr: [],
                incrCount: [],
                incrSum: [],
                countArr: [],
                sumArr: []
            }
            data.forEach((item) => {
                rewardObj.timeArr.push(item.count_at);
                rewardObj.incrCount.push(item.new_reward_count);
                rewardObj.incrSum.push(item.new_reward_sum);
                rewardObj.countArr.push(item.reward_count);
                rewardObj.sumArr.push(item.reward_sum);
            })
            this.setData({
              goodsTrendInfo:Object.assign(this.data.goodsTrendInfo,{'isRewardTrend':rewardObj.timeArr.length==0})
            })
            this.drawReward(rewardObj);
            this.timeOut('getRewardTime',this.data.otherTime,'getReward')
        }else if(res.errno != '4003' && res.errno != '4403'){
          wx.showToast({
            title: res.err,
            icon: 'none',
            duration: 2000
          })
        }
    },(err)=>{
      this.timeOut('getRewardTime',this.data.otherTime,'getReward')

    })
  },
  drawReward(data) {//打赏趋势曲线
    var rewardObj = data;
    var echartsComponnet = this.selectComponent('#rewardNumber')
      echartsComponnet.init((canvas, width, height, dpr) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr 
        });
        var _this = this;
        var option = {
          tooltip: {
              trigger: "axis",
              formatter: function(params) {
                var result = params[0].name + "\n";
                params.forEach((item,index)=>{
                  result += item.seriesName + '：' + app.func.NumberHandle(item.value,2)
                })
                return result;
              }
          },
          grid: {
              left: "6%",
              right: "8%",
              bottom: "0",
              top: "5%",
              bottom: "5%",
              containLabel: true
          },
          xAxis: [
          {
              type: "category",
              boundaryGap: false,
              data: rewardObj.timeArr.map((item) => {
                  return item.split(" ")[1];
              }),
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#fff' 
                  }
              },
              axisTick: { // X轴线 刻度线
                  show: false,
                  length: 10,
                  lineStyle: {
                      color: 'red',
                      type: 'solid',
                      width: 2
                  }
              },
          }
          ],
          yAxis: [
          {
              splitLine:{
                  show: true, // X轴线 颜色类型的修改
                  lineStyle: {
                      type: 'solid',
                      color: '#4E588A'
                  }
              },
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff' 
                },
                formatter: function(params) {
                  var result = params;
                  return app.func.NumberHandle(result);
                }
              },
          }
          ],
          series: [
          {
              name: "打赏金额",
              type: "line",
              itemStyle: {
                  normal: {
                      color: '#83FFF4',
                  }
              },
              smooth: true,
              // smooth: 0.6,
              symbol: "none",
              areaStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: 'rgba(41,244,241,.23)' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'rgba(47,74,166,.33)' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                  }
              },
              data: rewardObj.sumArr
          }
          ]
        };
        Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  getbarrageList() {// 弹幕列表
    app.func.req('/api/kwai/barrageList','post',{
      'liveStreamId':this.data.live_stream_id,
      'user_id': this.data.user_id,
      'type': 1,//左侧弹幕
      'page': 1,
      'pagesize': 100
    },(res) => {
      if(res.auno == 4403 || res.errno == 4003){
        this.setData({
          barrageData:Object.assign(this.data.barrageData,{'hasAuno':true})
        })
      }
        if(res&& res.errno == 0){
            var arr = res.rst.data;
            var obj = {};
            arr = arr.reduce(function(item,next){
                obj[next.created_at+next.kwai_id]?'':obj[next.created_at+next.kwai_id] = true&&item.push(next);
                return item;
            },[]);
            this.setData({
              barrageData:Object.assign(this.data.barrageData,{
                list: arr.reverse(),
                total:res.rst.pageInfo.total
              })
            })
          this.barrageAnimation('contentDiv1','contentTrDiv1','animationData')
          this.timeOut('getbarrageListTime',this.data.barrageTime, 'getbarrageList')
        }else if(res.errno!=4003){
          wx.showToast({
            title: res.err,
            icon: 'none',
            duration: 2000
          })
        }
    },(err)=>{
      this.timeOut('getbarrageListTime',this.data.barrageTime,'getbarrageList')
    })
  },
  getGiftList(){//礼物弹幕列表
    app.func.req('/api/kwai/barrageList','post',{
      'liveStreamId':this.data.live_stream_id,
      'user_id': this.data.user_id,
      'type': 2,//礼物弹幕
      'page': 1,
      'pagesize': 100
    },(res) => {
      if(res.auno == 4403 || res.errno == 4003){
        this.setData({
          giftData:Object.assign(this.data.giftData,{'hasAuno':true})
        })
      }
        if(res&& res.errno == 0){
          var arr = res.rst.data;
          var obj = {};
          arr = arr.reduce(function(item,next){
              obj[next.created_at+next.kwai_id]?'':obj[next.created_at+next.kwai_id] = true&&item.push(next);
              return item;
          },[]);
          this.setData({
            giftData:Object.assign(this.data.giftData,{
              list: arr.reverse(),
              total:res.rst.pageInfo.total
            })
          })
          this.barrageAnimation('contentDiv2','contentTrDiv2','animationData2')
          this.timeOut('getGiftListTime',this.data.barrageTime,'getGiftList')
        }else if(res.errno!=4003){
          wx.showToast({
            title: res.err,
            icon: 'none',
            duration: 2000
          })
        }
    },(err)=>{
      this.timeOut('getGiftListTime',this.data.barrageTime,'getGiftList')
    })
  },
  getVulgarTycoon() {//土豪送礼列表
    app.func.req('/v2/api/show/showtopuserinfo','get',{
      'show_id':this.data.live_stream_id,
      'user_id':this.data.user_id,
    },(res) => {
      if(res.auno == 4403 || res.errno == 4003){
        this.setData({
          vulgarTycoonData:Object.assign(this.data.vulgarTycoonData,{'hasAuno':true})
        })
        return;
      }
        if(res&&res.errno==0) {
            var data=res.rst
            this.setData({
              vulgarTycoonData:{
                list:data
              }
            })
          this.timeOut('getVulgarTycoonTime',this.data.otherTime,'getVulgarTycoon')
        }else if(res.errno!=4003){
          wx.showToast({
            title: res.err,
            icon: 'none',
            duration: 2000
          })
        }
    },(err)=>{
      this.timeOut('getVulgarTycoonTime',this.data.otherTime,'getVulgarTycoon')

    })
  },
  userGoodsStatistics() {//商品统计--趋势
    if(this.data.goodsStatisticsData.hasAuno){//防止刷新直播详情接口的时候，趋势接口在无权限的时候跟着更新，浪费资源
      return;
    }
    app.func.req('/v2/api/kwai/goodsStatistics','post',{
      'user_id':this.data.detailInfo.user_id,
      'live_stream_id':this.data.live_stream_id
    },(res) => {
      wx.hideLoading()
        if(res.auno==4403||res.errno==4003) {
          this.setData({
            goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'hasAuno':true})
          })
        }
        this.dataObj = res.rst;
        if(res&&res.errno==0) {
          this.setData({
            goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'dataObj':res.rst})
          })
            if(!res.rst.category||res.rst.category.length == 0){
                this.setData({
                  goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'goodsStatisticsFlag':false})
                })
            }else {
              this.setData({
                goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'goodsStatisticsFlag':true})
              })
                var categoryName = [],categoryPercent = [];
                res.rst.category.forEach((item,index) => {
                    categoryName.push(item.name)
                    categoryPercent.push({'value':item.percent,'name':item.name})
                });
            }
            var priceName = [],priceData = [];
            if(res.rst.price&&res.rst.price.length){
              this.setData({
                goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'priceEchartsLoding':true})
              })
                res.rst.price.forEach((item,index) => {
                    priceName.push(item.price)
                    priceData.push(item.percent)
                });
            }else{
              this.setData({
                goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'priceEchartsLoding':false})
              })
            }

            if(!res.rst.channel||res.rst.channel.length == 0){
                this.setData({
                  goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'channelEchartsLoding':false})
                })
            }else {
              this.setData({
                goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{'channelEchartsLoding':true})
              })
                var channelName = [],channelData = [];
                res.rst.channel.forEach((item,index) => {
                    channelName.push(item.name)
                    channelData.push({'value':item.percent,'name':item.name})
                });
            }

            if(this.data.goodsStatisticsData.goodsStatisticsFlag){
              this.setData({
                goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
                  'checkDrawPie':1
                })
              })
              this.drawPie(categoryName,categoryPercent)//类别分析
            }
            if(this.data.goodsStatisticsData.priceEchartsLoding){
              this.setData({
                goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
                  'checkPriceTrend':1
                })
              })
              this.drawPrice(priceName,priceData)//价格分布
            }
            if(this.data.goodsStatisticsData.channelEchartsLoding){
              this.setData({
                goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
                  'checkChannelTrend':1
                })
              })
              this.drawChannel(channelName,channelData)//商品来源分布
            }
        }else if(res.errno != 4003){
          wx.showToast({
            title: res.err,
            icon: 'none',
            duration: 2000
          })
        }
    },(err)=>{
      wx.hideLoading()
    })
  },
  drawPie(name,data) {//分类占比
    var colorArr = ['#2296F3','#FF5A7B','#BCA4FC',"#F6564A","#FF936B","#9CCCFF","#FFACB8","#B7EEA8","#FFB89D","#FCE500","#9F9F9F",'#78ADF9'];
    for(var i = 0; i<data.length; i++){
        if(i>=colorArr.length){
            colorArr.push('rgba(' + [
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 200),
                Math.round(Math.random() * 160),
                0.8
            ].join(',') + ')')
        }
    }
    data = data.splice(0,12)
    var echartsComponnet = this.selectComponent('#typeDis')
      echartsComponnet.init((canvas, width, height, dpr) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr 
        });
      var option = {
        color:colorArr,
        tooltip: {
            show: true,
            formatter: "{b}: {c}%"
        },
        grid: {
            top: '0%',
            left:'10%',
            right:'10%',
            bottom: '30%'
        },
        series: [{
            center: ['50%', '50%'],
            radius: ['40%', '60%'],
            minShowLabelAngle: 4,
            minAngle: 18,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap:true,////是否启用防止标签重叠策略
            label: {
                normal: {
                    formatter(v) {
                        let text =  v.name + '' + Math.round(v.percent)+'%'
                        return text
                    },//文字换行
                    show: true,
                    position: 'outside',
                }
            },
            labelLine: {
                show: true
            },
            label: {
                normal: {
                    formatter(v) {
                        let text =  v.name 
                        return text
                    },//文字换行
                    show: true,
                    position: 'outside',
                }
            },
            avoidLabelOverlap: false,
            type: 'pie',
            data: data
            
        }]
    };
    Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  drawPrice(name,data) {//价格分布
    var echartsComponnet = this.selectComponent('#priceDis')
      echartsComponnet.init((canvas, width, height, dpr) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr 
        });
    var option = {
        color:["#57C2FF"],
        tooltip: {
            trigger: 'axis',
            formatter: "{b}: {c}%",
        },//展示数据
        grid: {
            left: "6%",
            right: "8%",
            bottom: "0",
            top: "5%",
            bottom: "5%",
            containLabel: true
        },
        xAxis:[
            {
                type:"category",
                data:name,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff' 
                    }
                },
                axisTick: { // X轴线 刻度线
                    show: false,
                    length: 10,
                    lineStyle: {
                        color: 'red',
                        type: 'solid',
                        width: 2
                    }
                },
            }
        ],
        yAxis: [
            {
                type: "value",
                splitLine:{
                    show: true, // X轴线 颜色类型的修改
                    lineStyle: {
                        type: 'solid',
                        color: '#4E588A'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff' 
                }
                },
            }
        ],
        series: [{
            type: 'bar',
            barWidth: '20',
            data:data,
            itemStyle:{
                // color:'#78ADF9',
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#53FAF9' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#1E56FE' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                barBorderRadius: [4,4,4,4],
                borderType:'dotted'
            }
        }]
      };
      Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  drawChannel(name,data) {//商品来源分析
    var colorArr = ['#2296F3','#FF5A7B','#BCA4FC',"#F6564A","#FF936B","#9CCCFF","#FFACB8","#B7EEA8","#FFB89D","#FCE500","#9F9F9F",'#78ADF9'];
    for(var i = 0; i<data.length; i++){
        if(i>=colorArr.length){
            colorArr.push('rgba(' + [
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 200),
                Math.round(Math.random() * 160),
                0.8
            ].join(',') + ')')
        }
    }
    data = data.splice(0,12)
    var echartsComponnet = this.selectComponent('#channel')
      echartsComponnet.init((canvas, width, height, dpr) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr 
        });
      var option = {
        color:colorArr,
        tooltip: {
            show: true,
            formatter: "{b}: {c}%"
        },
        grid: {
            top: '0%',
            left:'10%',
            right:'10%',
            bottom: '30%'
        },
        series: [{
            center: ['50%', '50%'],
            radius: ['40%', '60%'],
            minShowLabelAngle: 4,
            minAngle: 18,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap:true,////是否启用防止标签重叠策略
            label: {
                normal: {
                    formatter(v) {
                        let text =  v.name + '' + Math.round(v.percent)+'%'
                        return text
                    },//文字换行
                    show: true,
                    position: 'outside',
                }
            },
            labelLine: {
                show: true
            },
            label: {
                normal: {
                    formatter(v) {
                        // let text =  v.name + '' + Math.round(v.percent)+'%'
                        let text =  v.name
                        return text
                    },//文字换行
                    show: true,
                    position: 'outside',
                }
            },
            avoidLabelOverlap: false,
            type: 'pie',
            data: data
            
        }]
    };
    Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  checkDrawPie(e) {//分类占比 type 切换
    var checkType = e.currentTarget.dataset.type;
    this.setData({
      goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
        'checkDrawPie':checkType
      })
    })
    if(this.data.goodsStatisticsData.hasAuno){
      return
    }
    if(!this.data.goodsStatisticsData.dataObj.category||this.data.goodsStatisticsData.dataObj.category.length == 0){
        this.setData({
          goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
            'goodsStatisticsFlag':false
          })
        })
    }else {
        var categoryName = [],categoryPercent = [];
        var data = checkType==1?this.data.goodsStatisticsData.dataObj.category:checkType==2?this.data.goodsStatisticsData.dataObj.categoryBySellCount:this.data.goodsStatisticsData.dataObj.categoryBySellMoney
        data.forEach((item,index) => {
            categoryName.push(item.name)
            categoryPercent.push({'value':item.percent,'name':item.name})
        });
    }
    if(this.data.goodsStatisticsData.goodsStatisticsFlag){
      this.drawPie(categoryName,categoryPercent)//类别分析
    }
  },
  checkPriceTrend(e) {//价格分布 type 切换
    var priceType = e.currentTarget.dataset.type;
    this.setData({
      goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
        'checkPriceTrend':priceType
      })
    })
    if(this.data.goodsStatisticsData.hasAuno){
      return
    }
    var priceName = [],priceData = [];
    if(this.data.goodsStatisticsData.dataObj.price&&this.data.goodsStatisticsData.dataObj.price.length){
        var data = priceType==1?this.data.goodsStatisticsData.dataObj.price:priceType==2?this.data.goodsStatisticsData.dataObj.priceBySellCount:this.data.goodsStatisticsData.dataObj.priceBySellMoney
        data.forEach((item,index) => {
            priceName.push(item.price)
            priceData.push(item.percent)
        });
    }else{
      this.setData({
        goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
          'priceEchartsLoding':false
        })
      })
    }
    if(this.data.goodsStatisticsData.priceEchartsLoding){
      this.drawPrice(priceName,priceData)
    }
  },
  checkChannelTrend(e) {//商品来源分布 type 切换
    var sourceType = e.currentTarget.dataset.type;
    this.setData({
      goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
        'checkChannelTrend':sourceType
      })
    })
    if(this.data.goodsStatisticsData.hasAuno){
      return
    }
    if(!this.data.goodsStatisticsData.dataObj.channel||this.data.goodsStatisticsData.dataObj.channel.length == 0){
        this.setData({
          goodsStatisticsData:Object.assign(this.data.goodsStatisticsData,{
            'channelEchartsLoding':false
          })
        })
    }else {
        var data = sourceType==1?this.data.goodsStatisticsData.dataObj.channelBySellCount:sourceType==2?this.data.goodsStatisticsData.dataObj.channelBySellCount:this.data.goodsStatisticsData.dataObj.channelBySellMoney
        var channelName = [],channelData = [];
        data.forEach((item,index) => {
            channelName.push(item.name)
            channelData.push({'value':item.percent,'name':item.name})
        });
    }
    if(this.data.goodsStatisticsData.channelEchartsLoding){
      this.drawChannel(channelName,channelData)
    }
  },
  // 将毫秒转换成几天
  formatDuring(mss) {
    // 分钟*60*1000=毫秒
    mss = mss*60*1000;
    var days = parseInt(mss / (1000 * 60 * 60 * 24))+'天';
    var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))+'小时';
    var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60))+'分钟';
    return (parseInt(days)>0?days:'') + (parseInt(hours)>0?hours:'') + (parseInt(minutes)>0?minutes:'');
  }, 
  timeOut(timer_name,time,fun){//公共开启定时器方法
    if(this.data.detailInfo.enable == 1){
      clearTimeout(this.data.time_arr[timer_name])
      var time_arr = this.data.time_arr;
      time_arr[timer_name] = setTimeout(()=>{
        this[fun]()
      },time)
      this.setData({
        time_arr:time_arr
      })
    }
  },
  util: function (obj) {//弹幕动画效果
    var continueTime = (parseInt(obj.list / obj.container) + 1) * 1500;
    var setIntervalTime = 50 + continueTime;

    var animation = wx.createAnimation({
      duration: 200,  //动画时长
      timingFunction: "linear", //线性
      delay: 0  //0则不延迟
    });
    this.animation = animation;
    animation.translateY(10).step({ duration: 50, timingFunction: 'step-start' }).translateY(-obj.list + obj.container).step({ duration: continueTime });
    this.setData({
      [obj.animation_name]: animation.export()
    })
    setTimeout(() => {
      animation.translateY(0).step({ duration: 50, timingFunction: 'step-start' })
      this.setData({
        [obj.animation_name]: animation.export()
      })
    }, setIntervalTime)
  },
  barrageAnimation(frame,scroll_frame,animation) {
    if(this.data.detailInfo.enable != 1){
      return;
    }
    var obj = new Object();
    //创建节点选择器
    var query = wx.createSelectorQuery();
    query.select('.'+frame).boundingClientRect()
    query.select('.'+scroll_frame).boundingClientRect()
    query.exec((res) => {
      obj.container = res[0].height; // 框的height
      obj.list = res[1].height; // list的height
      obj.animation_name = animation;//动画的名称
      this.util(obj);
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onHide')
    for(var i in this.data.time_arr){
      clearTimeout(this.data.time_arr[i])
    }
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('onUnload')
    console.log(this.data.time_arr)
    for(var i in this.data.time_arr){
      clearTimeout(this.data.time_arr[i])
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})