fix chart

business/pages/datacenter/index.js

@@ -54,27 +54,25 @@ Page({
     this.analyzeclasshourGet(1);
     this.analyzeclasshourGet(2);
     this.analyzeclasscourseGet();
-  },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-    const {
-      chartData,
-      allcount,
-      count1,
-      count2,
-      count3
-    } = this.data;
     try {
       var res = wx.getSystemInfoSync();
       this.data.windowWidth = res.windowWidth;
+      this.setData({
+        windowWidth: res.windowWidth
+      })
     } catch (e) {
       console.error('getSystemInfoSync failed!');
     }
   },
 
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
   /**
    * 生命周期函数--监听页面显示
    */
@@ -185,7 +183,6 @@ Page({
     }).then((res)=>{
       const {code, data} = res;
       if(code == 200){
-        console.log(data,'data')
         this.setData({
           classCours:data.list
         })
@@ -236,6 +233,7 @@ Page({
     });
   },
   initRingChart(index,data){
+    let canvasWidth = this.data.windowWidth/3 || 125;
     this.data.ringChart[index] = new wxCharts({
       animation: true,
       canvasId: `ringCanvas${index}`,
@@ -243,31 +241,30 @@ Page({
       extra: {
         ringWidth: 14,
         pie: {
-         
+          offsetAngle: -90 
         }
       },
       title: {
-        name: `${data.course_time_rate}%`,
+        name: `${(data.course_time_rate*100).toFixed(2)}%`,
         color: '#000000',
         fontSize: 12
       },
       series: [{
-        name: '成交量1',
-        data: data.course_time_rate,
+        name: '已完成',
+        data: data.course_time_rate*100,
         stroke: false,
         color: '#FFB97A',
       }, {
-        name: '成交量2',
-        data: 100 - data.course_time_rate,
+        name: '除去已完成',
+        data: 100 - data.course_time_rate*100,
         stroke: false,
         color: '#FFEBD9',
       }],
       disablePieStroke: true,
-      width: 140,
-      height: 140,
+      width: canvasWidth,
+      height: canvasWidth,
       dataLabel: false,
       legend: false,
-      background: '#f5f5f5',
       padding: 0
     });
   }

business/pages/datacenter/index.wxml

@@ -28,21 +28,21 @@
         <view class="chart-box" wx:if="{{classCours.length>0}}">
             <view class="chart-item"  wx:if="{{classCours[0]}}">
                 <view class="canvas-box" >
-                    <canvas canvas-id="ringCanvas1" class="ringcanvas"></canvas>
+                    <canvas canvas-id="ringCanvas1" class="ringcanvas" style="width: {{windowWidth? windowWidth/3: 125}}px;height: {{windowWidth? windowWidth/3: 125}}px;"></canvas>
                 </view>
                 <view class="name" >{{classCours[0].title}}</view>
                 <view class="count" >{{classCours[0].course_time}}课时</view>      
             </view>
             <view class="chart-item" wx:if="{{classCours[1]}}">
                 <view class="canvas-box" >
-                    <canvas canvas-id="ringCanvas2" class="ringcanvas"></canvas>
+                    <canvas canvas-id="ringCanvas2" class="ringcanvas" style="width: {{windowWidth? windowWidth/3: 125}}px;height: {{windowWidth? windowWidth/3: 125}}px;"></canvas>
                 </view>
                 <view class="name" >{{classCours[1].title}}</view>
                 <view class="count" >{{classCours[1].course_time}}课时</view>      
             </view>
             <view class="chart-item"  wx:if="{{classCours[2]}}">
                 <view class="canvas-box" >
-                    <canvas canvas-id="ringCanvas3" class="ringcanvas"></canvas>
+                    <canvas canvas-id="ringCanvas3" class="ringcanvas" style="width: {{windowWidth? windowWidth/3: 125}}px;height: {{windowWidth? windowWidth/3: 125}}px;" ></canvas>
                 </view>
                 <view class="name" >{{classCours[2].title}}</view>
                 <view class="count" >{{classCours[2].course_time}}课时</view>      

business/pages/datacenter/index.wxss

@@ -4,10 +4,12 @@
     height: 200px;
 }
 .ringcanvas{
-    width:100%;
-    height: 140px;
+    width: 250rpx;
+    height: 250rpx;
+}
+.container{
+    padding-bottom: 120rpx;
 }
-.container{}
 .column-chart-box{
     padding: 0 24rpx;
 }
@@ -93,10 +95,25 @@
 .ring-chart-box .chart-box{
     display: flex;
     position: relative;
-    left: -18rpx;
 }
 .ring-chart-box .chart-box .chart-item{
-    width: 33%;
+    flex: 1;
+    overflow: hidden;
+    max-width: 33.33%;
+}
+.ring-chart-box .chart-box .chart-item .canvas-box{
+    position: relative;
+}
+.ring-chart-box .chart-box .chart-item .canvas-box::after{
+    content: '';
+    width: 180rpx;
+    height: 180rpx;
+    border: 1px solid rgba(255,185,122,1);
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
 }
 .ring-chart-box .chart-box .chart-item .name{
     font-size:24rpx;