解決微信小程式使用wxcharts在螢幕不固定問題-開發工具裡也顯示好了佈局，為啥到真機就是亂的

.chart{ width: 100%; text-align: center; } .canvas{ /* position: absolute; top: 10%; */ width: 100%; height: 600rpx; transform: scale(0.7) }
js檔案裡設定了
width: windowWidth, height: 300, dataLabel: true
開發工具裡也顯示好了佈局，為啥到真機就是亂的？？
已解決：去掉transform scale縮放
js.
new wxCharts({
canvasId: 'ringCanvas',
type: 'ring',
legend: false,
extra: {
ringWidth: 15, //圓環的寬度
pie: {
offsetAngle: -45 //圓環的角度
}
},
series: [{
data: res.data.data.normalNum,
}, {
data: res.data.data.beLateNum,
}, {
data: res.data.data.leaveNum,
}, {
data: res.data.data.uncheckedNum,
}],
width: 320,
height: 200,
dataLabel: false
});
wxml.

wxss. .canvas { z-index: 1; position: absolute; left: 64rpx; top: 120rpx; height: 350rpx; } 還是會亂,如何解決?
 

專案中如何具體使用wx-charts

// 路徑是wxCharts檔案相對於本檔案的相對路徑
var wxCharts = require('./utils/wxcharts.js');
Page({
    ...
    onLoad: function() {
        new wxCharts({
            ...
        });
    }
});

微信小程式wx-charts自適應螢幕寬度的問題

ring chart

new wxCharts({
    canvasId: 'ringCanvas',
    type: 'ring',
    series: [{
        name: '成交量1',
        data: 15,
    }, {
        name: '成交量2',
        data: 35,
    }, {
        name: '成交量3',
        data: 78,
    }, {
        name: '成交量4',
        data: 63,
    }],
    width: 320,
    height: 200,
    dataLabel: false
});
 

// pages/wxcharts/wxcharts.js

//首先引入wxcharts.js外掛
var wxCharts = require("../../utils/wxcharts-min.js");
//定義記錄初始螢幕寬度比例，便於初始化
var windowW = 0;

Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

    // 螢幕寬度
    this.setData({
      imageWidth: wx.getSystemInfoSync().windowWidth
    });
    console.log(this.data.imageWidth);

    //計算螢幕寬度比列
    windowW = this.data.imageWidth / 375;
    console.log(windowW);

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

    // pieCanvas
    new wxCharts({
      animation: true, //是否有動畫
      canvasId: 'pieCanvas',
      type: 'pie',
      series: [{
        name: '成交量1',
        data: 15,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }],
      width: (375 * windowW),
      height: (250 * windowW),
      dataLabel: true,
    });

    // ringCanvas
    new wxCharts({
      animation: true,
      canvasId: 'ringCanvas',
      type: 'ring',
      extra: {
        ringWidth: 25,
        pie: {
          offsetAngle: -45
        }
      },
      title: {
        name: '70%',
        color: '#7cb5ec',
        fontSize: 25
      },
      subtitle: {
        name: '收益率',
        color: '#666666',
        fontSize: 15
      },
      series: [{
        name: '成交量1',
        data: 15,
        stroke: false
      }, {
        name: '成交量2',
        data: 35,
        stroke: false
      }, {
        name: '成交量3',
        data: 78,
        stroke: false
      }, {
        name: '成交量4',
        data: 63,
        stroke: false
      }],
      disablePieStroke: true,
      width: (375 * windowW),
      height: (200 * windowW),
      dataLabel: false,
      legend: false,
      padding: 0
    });

    //lineCanvas
    new wxCharts({
      canvasId: 'lineCanvas',
      type: 'line',
      categories: ['2016-1', '2017-1', '2018-1', '2019-1', '2020-1', '2021-1', '2022-1', '2023-1', '2024-1', '2025-1', '2026-1'],
      animation: true,
      background: '#f5f5f5',
      series: [{
        name: '成交量1',
        data: [16, 12, 15, 11, 13, 17, 18, 16, 15, 14],
        format: function (val, name) {
          return val.toFixed(2) + '萬';
        }
      }, {
        name: '成交量2',
        data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],
        format: function (val, name) {
          return val.toFixed(2) + '萬';
        }
      }],
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        title: '成交金額 (萬元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0
      },
      width: (375 * windowW),
      height: (200 * windowW),
      dataLabel: false,
      dataPointShape: true,
      extra: {
        lineStyle: 'curve'
      }
    });

    //columnCanvas
    new wxCharts({
      canvasId: 'columnCanvas',
      type: 'column',
      animation: true,
      categories: [2001, 2002, 2003, 2004, 2005],
      series: [{
        name: '成交量',
        data: [15.00, 20.00, 45.00, 37.00],
        format: function (val, name) {
          return val.toFixed(2) + '萬';
        }
      }, {
        name: '成交量',
        data: [6.00, 9.00, 20.00, 45.00],
        format: function (val, name) {
          return val.toFixed(2) + '萬';
        }
      }],
      yAxis: {
        format: function (val) {
          return val + '萬';
        },
        title: 'hello',
        min: 0
      },
      xAxis: {
        disableGrid: false,
        type: 'calibration'
      },
      extra: {
        column: {
          width: 15
        }
      },
      width: (375 * windowW),
      height: (200 * windowW),
    });

    //areaCanvas
    new wxCharts({
      canvasId: 'areaCanvas',
      type: 'area',
      categories: ['1', '2', '3', '4', '5', '6'],
      animation: true,
      series: [{
        name: '成交量1',
        data: [32, 45, 0, 56, 33, 34],
        format: function (val) {
          return val.toFixed(2) + '萬';
        }
      }, {
        name: '成交量2',
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
          return val.toFixed(2) + '萬';
        },
      }],
      yAxis: {
        title: '成交金額 (萬元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0,
        fontColor: '#8085e9',
        gridColor: '#8085e9',
        titleFontColor: '#f7a35c'
      },
      xAxis: {
        fontColor: '#7cb5ec',
        gridColor: '#7cb5ec'
      },
      extra: {
        legendTextColor: '#cb2431'
      },
      width: (375 * windowW),
      height: (200 * windowW),
    });

    //radarCanvas
    new wxCharts({
      canvasId: 'radarCanvas',
      type: 'radar',
      categories: ['1', '2', '3', '4', '5', '6'],
      series: [{
        name: '成交量1',
        data: [90, 110, 125, 95, 87, 122]
      }],
      width: (375 * windowW),
      height: (200 * windowW),
      extra: {
        radar: {
          max: 50
        }
      }
    });

  },
})
 

<!--pages/wxcharts/wxcharts.wxml-->
<canvas canvas-id="pieCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="ringCanvas" disable-scroll="true" class="canvas canvas2"></canvas>
<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="areaCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="radarCanvas" disable-scroll="true" class="canvas canvas2"></canvas>

.canvas {
    width: 750rpx;
    height: 500rpx;
}
.canvas2{
  height: 400rpx;
}