解决微信小程序使用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 () {// pieCanvasnew 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,});// ringCanvasnew 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});//lineCanvasnew 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'}});//columnCanvasnew 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),});//areaCanvasnew 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),});//radarCanvasnew 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;
}

更多专业前端知识，请上【猿2048】www.mk2048.com

解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的相关推荐

解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
解决微信小程序配置https不成功问题
解决微信小程序配置https不成功问题参考文章: (1)解决微信小程序配置https不成功问题 (2)https://www.cnblogs.com/ant-jmf17/p/8056989.html ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
解决微信小程序使用switchTab跳转后页面不刷新的问题
解决微信小程序使用switchTab跳转后页面不刷新的问题参考文章: (1)解决微信小程序使用switchTab跳转后页面不刷新的问题 (2)https://www.cnblogs.com/mmyk ...

解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的

解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的相关推荐

最新文章

热门文章