搜索官方文档得知是因为@touchend=“tap” @touchstart=“touchstart” @touchmove="touchmove"事件被禁止需要开始,但是这里使用的是原生的cavans无法解决,组件的话价格属性就直接加上:ontouch=‘true’,
开启氪金模式后终于看到了几个事件的写法
<canvas canvas-id="AbCanCGONoKeEpdazPGUtYqfUAAfydVV" id="AbCanCGONoKeEpdazPGUtYqfUAAfydVV" class="charts"
@touchend="tap" @touchstart="touchstart" @touchmove="touchmove" />
import uCharts from '@/utils/ucharts.js'
var uChartsInstance = {};
export default {
components: {
Count,
WybTable
},
data() {
return {
cWidth: 750,
cHeight: 500
}
},
onReady() {
//这里的 750 对应 css .charts 的 width
this.cWidth = uni.upx2px(750);
//这里的 500 对应 css .charts 的 height
this.cHeight = uni.upx2px(500);
this.getServerData();
},
methods: {
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
let res = {
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [
{
name: "成交量A",
data: [35, 8, 25, 37, 4, 20]
},
{
name: "成交量B",
data: [70, 40, 65, 100, 44, 68]
},
{
name: "成交量C",
data: [100, 80, 95, 150, 112, 132]
}
]
};
this.drawCharts('AbCanCGONoKeEpdazPGUtYqfUAAfydVV', res);
}, 500);
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: this.cWidth,
height: this.cHeight,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
padding: [15, 10, 0, 15],
enableScroll: true,
legend: {},
xAxis: {
disableGrid: true,
itemCount:2,
scrollShow:true
},
yAxis: {
gridType: "dash",
dashLength: 2
},
extra: {
line: {
type: "straight",
width: 2,
activeType: "hollow"
}
}
});
},
tap(e) {
uChartsInstance[e.target.id].scrollEnd(e);
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
},
touchstart(e){
uChartsInstance[e.target.id].scrollStart(e);
},
touchmove(e){
uChartsInstance[e.target.id].scroll(e);
}
}
}
</script>
<style lang="less" scoped>
.charts{
width: 750rpx;
height: 500rpx;
}
</style>```