坐标轴未从零开始

src/components/bChart.vue

@@ -30,13 +30,13 @@ export default {
       type: Boolean,
       default: false,
     },
-    height:{
+    height: {
       type: Number,
-      default: document.body.clientHeight / 3
+      default: document.body.clientHeight / 3,
     },
-    transposed:{
-      type: Boolean,// 是否反转坐标轴
-      default: false
+    transposed: {
+      type: Boolean, // 是否反转坐标轴
+      default: false,
     },
     className: {
       // 多柱状图
@@ -85,12 +85,12 @@ export default {
     });
   },
   watch: {
-    list:{
-      deep:true,
-      handler: function(){
+    list: {
+      deep: true,
+      handler: function() {
         this.init();
-      }
-    }
+      },
+    },
   },
   methods: {
     init() {
@@ -99,7 +99,7 @@ export default {
       let count = list.length > 10 ? 10 : list.length;
       let barWidth = (document.body.clientWidth - 100) / count;
       barWidth > 40 && (barWidth = 40);
-      this.transposed && (barWidth = 10)
+      this.transposed && (barWidth = 10);
       list.sort((a, b) => {
         return b[this.keyName] - a[this.keyName];
       });
@@ -126,15 +126,15 @@ export default {
         label: function label(text) {
           // 只显示每一年的第一天
           const textCfg = {};
-          if(text >= 100000000){
-            textCfg.text = text / 100000000 + "亿"
-          }else if(text >= 10000){
-            textCfg.text = text / 10000 + "万"
-          } else{
-            textCfg.text = text
+          if (text >= 100000000) {
+            textCfg.text = text / 100000000 + "亿";
+          } else if (text >= 10000) {
+            textCfg.text = text / 10000 + "万";
+          } else {
+            textCfg.text = text;
           }
           return textCfg;
-        }
+        },
       });
       if (this.className) {
         this.chart.scale("nickname", {
@@ -147,15 +147,15 @@ export default {
           showCrosshairs: false,
           layout: "vertical",
           snap: true,
-          onChange: (obj) => {
+          onChange: obj => {
             const legend = this.chart.get("legendController").legends.top[0];
             const tooltipItems = obj.items;
             const legendItems = legend.items;
             const map = {};
-            legendItems.forEach(function (item) {
+            legendItems.forEach(function(item) {
               map[item.name] = JSON.parse(JSON.stringify(item));
             });
-            tooltipItems.forEach(function (item) {
+            tooltipItems.forEach(function(item) {
               const name = item.name;
               const value = item.value;
               if (map[name]) {
@@ -164,7 +164,7 @@ export default {
             });
             let keys = Object.keys(map);
             let listVal = [];
-            keys.map((v) => {
+            keys.map(v => {
               listVal.push(map[v]);
             });
             legend.setItems(listVal);
@@ -177,7 +177,17 @@ export default {
         this.chart
           .interval()
           .position("nickname*" + this.keyName)
-          .color(x,["#4992ff", "#38f385", "#f45c64", "#58e0f4", "#0da17c", "#fc7b2e", "#8339df", "#f467f9", "#fddd60"])
+          .color(x, [
+            "#4992ff",
+            "#38f385",
+            "#f45c64",
+            "#58e0f4",
+            "#0da17c",
+            "#fc7b2e",
+            "#8339df",
+            "#f467f9",
+            "#fddd60",
+          ])
           .size(barWidth);
       } else {
         this.chart.tooltip({
@@ -185,7 +195,7 @@ export default {
           triggerOn: ["touchstart"],
           showCrosshairs: false,
           snap: true,
-          onShow: (obj) => {
+          onShow: obj => {
             const items = obj.items;
             items[0].name = null;
           },
@@ -194,14 +204,24 @@ export default {
         });
         this.chart
           .interval()
-          .size(barWidth)
           .position(x + "*" + this.keyName)
-          .color(x,["#4992ff", "#38f385", "#f45c64", "#58e0f4", "#0da17c", "#fc7b2e", "#8339df", "#f467f9", "#fddd60"]);
+          .size(barWidth)
+          .color(x, [
+            "#4992ff",
+            "#38f385",
+            "#f45c64",
+            "#58e0f4",
+            "#0da17c",
+            "#fc7b2e",
+            "#8339df",
+            "#f467f9",
+            "#fddd60",
+          ]);
       }
       // 反正坐标
-       this.chart.coord({
-        transposed: this.transposed
-      })  
+      this.chart.coord({
+        transposed: this.transposed,
+      });
       // Step 4: 渲染图表
       this.chart.render();
       // 绘制柱状图文本

src/view/liveKuaishou/index.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="yukang">
-    <head-tabs :data="base"></head-tabs>
-    <van-divider content-position="left">
-      直播时间：{{ base.live_time }}
-    </van-divider>
+    <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">
-            <van-divider style="margin-bottom: 0">
+          <van-col span="12" class="van-hairline--right">
+            <div class="title">
               性别
-            </van-divider>
+            </div>
             <canvas
               ref="chart"
               :width="canvasRegion.width / 2"
@@ -18,9 +17,9 @@
             ></canvas>
           </van-col>
           <van-col span="12">
-            <van-divider style="margin-bottom: 0">
+            <div class="title">
               年龄
-            </van-divider>
+            </div>
             <canvas
               ref="chartage"
               :width="canvasRegion.width / 2"
@@ -57,12 +56,12 @@
 </template>
 
 <script>
-import headTabs from "@/components/liveHead.vue";
 import cCanvas from "@/components/chart";
 import bCanvas from "@/components/bChart";
 import { getlive } from "@/api/getList.js";
-import { Divider as vanDivider, Col as vanCol, Row as vanRow } from "vant";
-import "vant/lib/divider/style";
+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";
@@ -70,10 +69,10 @@ import F2 from "@antv/f2";
 export default {
   name: "App",
   components: {
-    headTabs,
+    vanCellGroup,
+    vanCell,
     cCanvas,
     bCanvas,
-    vanDivider,
     vanCol,
     vanRow,
   },
@@ -104,17 +103,10 @@ export default {
       topic: q.title,
       platform: q.platform,
     }).then(res => {
-      console.log(res);
       let oriData = res || {};
       let trend = oriData.trend || {};
       this.base = {
-        live_time: oriData.detail ? oriData.detail.time || "" : "",
-        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,
+        live_time: oriData.detail ? oriData.detail.time || "" : ""
       };
       let gender = [];
       let oriGender = oriData.fans.gender || [];
@@ -143,7 +135,7 @@ export default {
       oriCity.map(v => {
         cityList.push({
           nickname: v.Name.replace("市", ""),
-          value: v.Ratio,
+          value: v.Ratio.toFixed(2) - 0,
         });
       });
       this.platformSort = cityList;
@@ -201,7 +193,6 @@ export default {
       // 趋势图数据
       for (let i = 0; i < (oriData.detail.watch || []).length; i++) {
         const v = (oriData.detail.watch || [])[i];
-        console.log(v);
         let time = this.formatTime(v.x);
         flow.peopleList.push({
           value: v.watch || 0,
@@ -279,7 +270,6 @@ export default {
       chart.render();
     },
     formatTime(time) {
-      console.log(time);
       let t = new Date(time);
       let hour = t.getHours();
       let min = t.getMinutes();
@@ -337,5 +327,9 @@ export default {
       }
     }
   }
+  .title{
+    color: #323233;
+    font-size: 14px;
+  }
 }
 </style>