问题:开发完成图表发现到真机微信小程序IOS无法随着页面上下滚动
解决方案:开启canvas2d
我是用的Ucharts的原生开发方式
一、在canvas上面添加type="2d“
<canvas ref="canvasRef" canvas-id="aUoYcBNsRogAoMZxIQIDzgAKlBYDkLXS" id="aUoYcBNsRogAoMZxIQIDzgAKlBYDkLXS"
type="2d"
class="charts" @touchend="tap" />
二、JS代码 百度和参考Ucharts的原生代码工具全部代码 底层不太懂 但是可以跑起来
const instance = getCurrentInstance()
const query = uni.createSelectorQuery().in(instance)
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
if (res[0]) {
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = res[0].width ;
canvas.height = res[0].height ;
uChartsInstance[id] = new uCharts({
type: "radar",
context: ctx,
width: cWidth.value ,
height: cHeight.value ,
categories: data.categories,
series: data.series,
// pixelRatio: this.pixelRatio,
animation: true,
timing: "easeOut",
duration: 1000,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [5,5,5,5],
fontSize: 13,
fontColor: "#666666",
dataLabel: false,
dataPointShape: true,
dataPointShapeType: "solid",
touchMoveLimit: 60,
enableScroll: false,
enableMarkLine: false,
legend: {
show: false,
position: "right",
lineHeight: 25,
float: "center",
padding: 5,
margin: 5,
fontSize: 13,
fontColor: "#666666",
hiddenColor: "#CECECE",
itemGap: 10
},
extra: {
radar: {
gridType: "radar",
gridColor: "#DEE5F0",
gridCount: 4,
opacity: 0.3,
max: 200,
labelShow: true,
gridEval: 1,
radius: 0,
axisLabelTofix: 0,
labelColor: "#444444",
border: true,
labelPointShow: false,
labelPointRadius: 3,
labelPointColor: "#DEE5F0",
borderWidth: 1,
linearType: "none", //custom,
},
tooltip: {
showBox: false,
}
},
});
}else{
console.error("[uCharts]: 未获取到 context");
}
}
})