修改显示

components/Chart/Chart.js

@@ -235,6 +235,7 @@ Component({
     },
     changeselect: function (e) {
       let type = e.currentTarget.dataset.type;
+      console.log(type , this.data.select)
       if (type === this.data.select) return;
       let yData = [], xData = [];
       this.data.list.map((v, i) => {

components/Chart/Chart.wxml

@@ -1,11 +1,10 @@
 <!--components/Chart/Chart.wxml-->
 <view wx:if="{{show}}" class="canvas">
   <view class="btnType" wx:if="{{btnList.length}}">
-    <view 
-    bindtap="changeselect" 
-    data-type="{{item.type}}" 
-    class="{{'chartBtn' + (item.type === select ? ' active' : '')}}" 
-    wx:for="{{btnList}}" wx:key="name">{{item.name}}</view>
+    <view bindtap="changeselect" data-type="{{item.type}}"
+      class="{{'chartBtn' + (item.type === select ? ' active' : '')}}" wx:for="{{btnList}}" wx:key="name">
+      {{item.name}}
+    </view>
   </view>
   <ec-canvas id="{{id}}" canvasId="{{canvasId}}" ec="{{ ec }}"></ec-canvas>
 </view>

components/Chart/Chart.wxss

@@ -3,10 +3,11 @@
   width: 100%;
   height: 200px;
   font-size: 14px;
+  position: relative;
 }
 .canvas .btnType{
-  float: right;
-  margin-top: -30px;
+  position: absolute;
+  top: -2em;
   border: 1px solid #1989fa;
   border-radius: 3px;
   right: 5px;

components/lineChart/lineChart.wxss

@@ -5,8 +5,8 @@
   font-size: 14px;
 }
 .canvas .btnType{
-  float: right;
-  margin-top: -30px;
+  position: absolute;
+  top: -2em;
   border: 1px solid #1989fa;
   border-radius: 3px;
   right: 5px;

components/mapChina/index.js

@@ -0,0 +1,114 @@
+// 线图
+import * as echarts from '../../ec-canvas/echarts';
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: "mychart-dom-bar"
+    },
+    id: {
+      type: String,
+      value: "mychart-bar"
+    },
+    list: {
+      type: Array,
+      value: []
+    }
+  },
+  chart: undefined,
+  ready() {
+    this.getJSON().then(data => {
+      this.setData({
+        show: true,
+        json: data,
+        ec: {
+          onInit: this.initChart.bind(this)
+        }
+      })
+    })
+  },
+
+  // 销毁组件
+  detached: function () {
+    this.chart && this.chart.dispose && this.chart.dispose();
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    show: false,
+    json: {},
+    ec: {
+      onInit: undefined,
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    getJSON: function () {
+      return new Promise((reslove, reject) => {
+        wx.request({
+          url: 'https://bigdata.smcic.net/data/map_china.json',
+          success: function (res) {
+            reslove(res.data)
+          },
+          fail: function (err) {
+            reject(err)
+          }
+        })
+      })
+    },
+    initChart: function (canvas, width, height, dpr) {
+      this.chart && this.chart.dispose && this.chart.dispose();
+      this.chart = echarts.init(canvas, null, {
+        width: wx.getSystemInfoSync().windowWidth,
+        height: 400,
+        devicePixelRatio: dpr // 像素
+      });
+      echarts.registerMap('china', this.data.json);
+      let max = this.data.list[0][0].value - 0;
+      var option = {
+        tooltip: {
+          show: true,
+          formatter: "{b}:{c}%"
+        },
+        visualMap: {
+          show: false,
+          min: 0,
+          max: max,
+          inRange: {
+            color: ['rgba(118,172,255, .2)', 'yellow']
+          }
+        },
+        series: [
+          {
+            type: "map",
+            mapType: "china",
+            geoIndex: 0,
+            zppm: 1.25,
+            scaleLimit: {
+              //滚轮缩放的极限控制
+              min: 1.25,
+              max: 6,
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                borderColor: "#76acff",//每个区域的边框色
+                areaColor: 'rgba(118,172,255, 0)'//区域背景色
+              },
+            },
+            data: this.data.list[0] || []
+          }
+        ]
+      };
+      this.chart.setOption(option);
+      return this.chart;
+    }
+  }
+})

components/mapChina/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
+}

components/mapChina/index.wxml

@@ -0,0 +1,3 @@
+<view class="canvas" wx:if="{{show}}" >
+  <ec-canvas id="{{id}}" canvasId="{{canvasId}}" ec="{{ ec }}"></ec-canvas>
+</view>

components/mapChina/index.wxss

@@ -0,0 +1,6 @@
+/* components/pie/pie.wxss */
+.canvas,ec-canvas {
+  width: 100%;
+  height: 400px;
+  font-size: 14px;
+}

ec-canvas/ec-canvas.js

@@ -123,7 +123,14 @@ Component({
           this.chart = callback(canvas, res.width, res.height, canvasDpr);
         }
         else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
-          this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
+          let chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
+          if(chart.then){
+            chart.then(res=>{
+              this.chart = res;
+            })
+          }else{
+            this.chart = chart;
+          }
         }
         else {
           this.triggerEvent('init', {

pages/live/components/douyin/douyin.js

@@ -9,7 +9,7 @@ Component({
       type: String,
       value: ""
     },
-    season:{
+    season: {
       type: Number,
       value: 1
     }
@@ -66,7 +66,6 @@ Component({
           let trend = oriData.trend || {};
           let RealTimeTraffic = {
             title: "实时流量",
-            subTitle: "",
             id: 'id' + 10,
             canvasId: 'canvasId' + 10,
             type: "line",
@@ -76,7 +75,6 @@ Component({
           };
           let RealTimePersonTime = {
             title: "观看人次",
-            subTitle: "",
             id: 'id' + 11,
             canvasId: 'canvasId' + 11,
             type: "line",
@@ -86,7 +84,6 @@ Component({
           };
           let AddUpFans = {
             title: "累计粉丝量",
-            subTitle: "",
             id: 'id' + 12,
             canvasId: 'canvasId' + 12,
             type: "line",
@@ -96,7 +93,6 @@ Component({
           };
           let LikeTheTrend = {
             title: "点赞走势",
-            subTitle: "",
             id: 'id' + 13,
             canvasId: 'canvasId' + 13,
             type: "line",
@@ -104,41 +100,38 @@ Component({
             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),
+            v.user_count !== undefined && RealTimeTraffic.peopleList.push({
+              value: v.user_count || 0,
               time: time
             });
-            RealTimePersonTime.peopleList.push({
-              value: _this.formatNumber(v.stats_total_user || 0),
+            v.stats_total_user !== undefined && RealTimePersonTime.peopleList.push({
+              value: v.stats_total_user || 0,
               time: time
             });
-            AddUpFans.peopleList.push({
-              value: _this.formatNumber(v.club_info_total_fans_count || 0),
+            v.club_info_total_fans_count !== undefined && AddUpFans.peopleList.push({
+              value: v.club_info_total_fans_count || 0,
               time: time
             });
-            LikeTheTrend.peopleList.push({
-              value: _this.formatNumber(v.like_count || 0),
+            v.like_count !== undefined && LikeTheTrend.peopleList.push({
+              value: v.like_count || 0,
               time: time
             });
           }
           // 基础数据  
+          let core_date = oriData.core_data || {};
           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
+            like_count: core_date.like_count || 0,
+            total_fans_count: core_date.add_fans_count || 0,
+            peopel_time: (trend.user || {}).stats_total_user || 0,
+            avg_user_count: core_date.avg_user_count || 0,
+            max_user_count: core_date.max_user_count || 0,
+            turn_rate: (core_date.turn_rate || 0)*100
           }
           // 来源城市
           let city = oriData.city || []
@@ -146,7 +139,7 @@ Component({
             const element = city[i] || {};
             region.push({
               name: element.key || "",
-              value: element.count || 0
+              value: ((element.rate || 0) * 100).toFixed(2) - 0
             })
           }
           // 性别比
@@ -170,9 +163,10 @@ Component({
             p.series = [
               {
                 type: 'pie',
+                radius: ['0%', '50%'],
                 label: {
-                  position: 'inner',
-                  fontSize: 14,
+                  position: "outside",
+                  formatter: '{b}\n{d}% ',
                 },
                 data: gender,
                 emphasis: {
@@ -189,7 +183,6 @@ Component({
           RealTimeTraffic.peopleList.length && p.lineList.push(RealTimeTraffic);
           RealTimePersonTime.peopleList.length && p.lineList.push(RealTimePersonTime);
           _this.setData(p)
-
         },
         fail: function (err) {
           wx.hideLoading()

pages/live/components/douyin/douyin.json

@@ -5,6 +5,7 @@
     "mp-toptips": "weui-miniprogram/toptips/toptips",
     "lineChart": "/components/lineChart/lineChart",
     "chart" : "/components/Chart/Chart",
-    "pie": "/components/pie/pie"
+    "pie": "/components/pie/pie",
+    "mapChina": "/components/mapChina/index"
   }
 }

pages/live/components/douyin/douyin.wxml

@@ -6,36 +6,51 @@
 <view class="liveData">
   <view class="topTable">
     <view class="liveDataTable title">
-      <view data-introduce="total_fans_count" bindtap="showDetail" class="liveDataItem">
-        粉丝数
+      <view wx:if="{{ headData.peopel_time != -1  }}" data-introduce="peopel_time" bindtap="showDetail"
+        class="liveDataItem liveDataItemRigh">
+        直播观看人次：
         <!-- <text class="show">?</text> ： -->
       </view>
       <view data-introduce="like_count" bindtap="showDetail" class="liveDataItem">
-        直播点赞数
+        直播点赞数：
+        <!-- <text class="show">?</text> ： -->
+      </view>
+      <view data-introduce="avg_user_count" bindtap="showDetail" class="liveDataItem">
+        平均在线人数：
+        <!-- <text class="show">?</text> ： -->
+      </view>
+      <view data-introduce="turn_rate" bindtap="showDetail" class="liveDataItem">
+        转粉率：
         <!-- <text class="show">?</text> ： -->
       </view>
     </view>
     <view class="liveDataTable">
-      <view class="liveDataItem">{{filter.valueFormat(headData.total_fans_count)}}</view>
+      <view wx:if="{{ headData.peopel_time != -1  }}" class="liveDataItem">{{filter.valueFormat(headData.peopel_time)}}
+      </view>
       <view class="liveDataItem">{{filter.valueFormat(headData.like_count)}}</view>
+      <view class="liveDataItem">{{filter.valueFormat(headData.avg_user_count)}}</view>
+      <view class="liveDataItem">{{filter.valueFormat(headData.turn_rate)}}%</view>
     </view>
     <view class="liveDataTable title">
       <view wx:if="{{ headData.msg_count != -1  }}" data-introduce="msg_count" bindtap="showDetail"
         class="liveDataItem liveDataItemRigh">
-        直播评论数
+        直播评论数：
         <!-- <text class="show">?</text> ： -->
       </view>
-      <view wx:if="{{ headData.peopel_time != -1  }}" data-introduce="peopel_time" bindtap="showDetail"
-        class="liveDataItem liveDataItemRigh">
-        直播观看人数
+      <view data-introduce="total_fans_count" bindtap="showDetail" class="liveDataItem">
+        新增粉丝数：
+        <!-- <text class="show">?</text> ： -->
+      </view>
+      <view data-introduce="total_fans_count" bindtap="showDetail" class="liveDataItem">
+        最大在线人数：
         <!-- <text class="show">?</text> ： -->
       </view>
     </view>
     <view class="liveDataTable">
       <view wx:if="{{ headData.msg_count != -1  }}" class="liveDataItem">{{filter.valueFormat(headData.msg_count)}}
       </view>
-      <view wx:if="{{ headData.peopel_time != -1  }}" class="liveDataItem">{{filter.valueFormat(headData.peopel_time)}}
-      </view>
+      <view class="liveDataItem">{{filter.valueFormat(headData.total_fans_count)}}</view>
+      <view class="liveDataItem">{{filter.valueFormat(headData.max_user_count)}}</view>
     </view>
   </view>
 
@@ -46,12 +61,12 @@
   <view class="itemView">
     <pie id="pie001" wx:if="{{series.length}}" canvasId="douyinpie001" list="{{series}}" />
   </view>
-  <chart wx:if="{{region.length && region[0].length}}" list="{{region}}" id="{{'douyinid' + 1}}"
-    canvasId="{{'douyincanvasId' + 1}}" yType="value" xType="name" />
+  <!-- <chart wx:if="{{region.length && region[0].length}}" list="{{region}}" id="{{'douyinid' + 1}}"
+    canvasId="{{'douyincanvasId' + 1}}" yType="value" xType="name" /> -->
+  <mapChina wx:if="{{region.length && region[0].length}}" id="{{'douyinMap' + 1}}" canvasId="{{'douyinMapID' + 1}}" list="{{region}}"></mapChina>
 
   <view class="itemView" wx:for="{{lineList}}" wx:key="id">
     <view wx:if="item.peopleList.length" class="localCells">{{item.title}}</view>
-    <view wx:if="item.peopleList.length" class="subTitle">{{item.subTitle}}</view>
     <lineChart id="{{'douyin'+item.id}}" wx:if="item.peopleList.length" canvasId="{{'douyin'+item.canvasId}}"
       type="{{item.type}}" list="{{item.peopleList || []}}" yType="{{item.yType}}" xType="{{item.xType}}"
       color="{{item.color}}" />

pages/live/components/kuaishou/kuaishou.js

@@ -105,15 +105,15 @@ Component({
             time.getHours() > 9 ? formatTime += time.getHours() + ":": formatTime += '0' + time.getHours() + ":";
             time.getMinutes() + 1 > 9 ? formatTime += (time.getMinutes() + 1) + ":": formatTime += '0' + (time.getMinutes() + 1) + ":";
             time.getSeconds() > 9 ? formatTime += time.getSeconds(): formatTime += '0' + time.getSeconds();
-            RealTimeWatch.peopleList.push({
+            v.watch !== undefined && RealTimeWatch.peopleList.push({
               value: v.watch || 0,
               time:formatTime
             });
-            AddUpBsc.peopleList.push({
+            v.bsc !== undefined && AddUpBsc.peopleList.push({
               value: v.bsc || 0,
               time:formatTime
             });
-            LikeTheBsuc.peopleList.push({
+            v.bsuc !== undefined && LikeTheBsuc.peopleList.push({
               value: v.bsuc || 0,
               time:formatTime
             });
@@ -128,7 +128,7 @@ Component({
             const element = city[i] || {};
             region.push({
               name: element.Name || "",
-              value: element.Ratio
+              value: element.Ratio - 0
             })
           }
           // 性别比
@@ -176,9 +176,10 @@ Component({
             p.series = [
               {
                 type: 'pie',
+                radius: ['0%', '50%'],
                 label: {
-                  position: 'inner',
-                  fontSize: 14,
+                  position: "outside",
+                  formatter: '{b}\n{d}% ',
                 },
                 data: gender,
                 emphasis: {

pages/live/components/kuaishou/kuaishou.json

@@ -5,6 +5,7 @@
     "mp-toptips": "weui-miniprogram/toptips/toptips",
     "lineChart": "/components/lineChart/lineChart",
     "chart" : "/components/Chart/Chart",
-    "pie": "/components/pie/pie"
+    "pie": "/components/pie/pie",
+    "mapChina": "/components/mapChina/index"
   }
 }

pages/live/components/kuaishou/kuaishou.wxml

@@ -38,14 +38,15 @@
   <view class="itemView">
     <view class="subTitle">直播时间：{{headData.live_time}}</view>
   </view>
-  <view class="itemView">
+  <view class="itemView"  wx:if="{{series.length || oriList.length || (region.length && region[0].length)}}" >
     <view class="localCells">观众来源</view>
   </view>
 
   <pie id="pie001" wx:if="{{series.length}}" canvasId="kuaishoupie002" list="{{series}}" />
   <pie id="pie001" wx:if="{{oriList.length}}" canvasId="kuaishoupie002" list="{{oriList}}" />
-  <chart wx:if="{{region.length && region[0].length}}" yCompany="%" list="{{region}}" id="{{'id' + 1}}"
-    canvasId="{{'kuaishou' + 1}}" yType="value" xType="name" />
+  <!-- <chart wx:if="{{region.length && region[0].length}}" yCompany="%" list="{{region}}" id="{{'id' + 1}}"
+    canvasId="{{'kuaishou' + 1}}" yType="value" xType="name" /> -->
+  <mapChina wx:if="{{region.length && region[0].length}}" id="{{'douyinid' + 1}}" canvasId="{{'douyincanvasId' + 1}}" list="{{region}}"></mapChina>
 
   <view class="itemView" wx:for="{{lineList}}" wx:key="id">
     <view wx:if="item.peopleList.length" class="localCells">{{item.title}}</view>

pages/live/live.js

@@ -37,7 +37,6 @@ Page({
       "img": "kuaishou",
       "type": "kuaishou",
     })
-    console.log(options)
     this.setData({
       title: options.title,
       select: options.type,

pages/live/live.json

@@ -2,5 +2,6 @@
   "usingComponents": {
     "kuaishou": "./components/kuaishou/kuaishou",
     "douyin": "./components/douyin/douyin"
-  }
+  },
+  "disableScroll":true
 }

pages/live/live.wxml

@@ -1,19 +1,17 @@
 <!--pages/live/live.wxml-->
-<view>
-  <scroll-view style="height: 92vh" scroll-y="{{true}}">
+<view style="height:100%">
+  <scroll-view style="height: 92%" scroll-y="{{true}}">
     <kuaishou wx:if="{{select === 'kuaishou'}}" title="{{title}}" season="{{season}}"></kuaishou>
     <douyin wx:if="{{select === 'douyin'}}" title="{{title}}"  season="{{season}}"></douyin>
   </scroll-view>
 
   <cover-view class="nabar" wx:if="{{isdou || iskuai}}">
     <cover-view class="navarItem" wx:for="{{list}}" wx:key="text" data-index="{{item.type}}" bindtap="tabChange">
-      <cover-image style="width: 1.5em;height:1.5em;margin: 0 auto" src="../../assets/{{item.img}}.png"></cover-image>
-      <cover-view wx:if="{{item.type != select}}">
+      <cover-image wx:if="{{item.type != select}}" style="width: 1.5em;height:1.5em;margin: 0 auto" src="../../assets/{{item.img}}.png"></cover-image>
+      <cover-image wx:if="{{item.type == select}}" style="width: 1.5em;height:1.5em;margin: 0 auto" src="../../assets/{{item.img}}_act.png"></cover-image>
+      <cover-view style="{{item.type == select ? 'color:red' : ''}}">
         {{item.text}}
       </cover-view>
-      <cover-view wx:if="{{item.type == select}}">
-        <cover-view class="select"></cover-view>
-      </cover-view>
     </cover-view>
   </cover-view>
 </view>