前端新手的个人笔记————————————————————————————————
<view>
<canvas canvas-id="stys" id="stys" class="charts" :ontouch="true"/>
</view>
看了很多都说添加:ontouch="true"就行,但还是还是不能滚动,后来花了一块钱,看了官方文档。
解决了
源代码:
<view>
<canvas canvas-id="stys" id="stys" class="charts" :ontouch="true" @touchstart="touchstart"@touchmove="touchmove" @touchend="touchend" />
</view>
methods: {
touchstart(e) {
uChartsInstance[e.target.id].scrollStart(e);
},
touchmove(e) {
uChartsInstance[e.target.id].scroll(e);
},
touchend(e) {
uChartsInstance[e.target.id].scrollEnd(e);
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
},
}
drawCharts1(id, data) {
const ctx = uni.createCanvasContext(id, this);
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: 750 / 880 * uni.getSystemInfoSync().windowWidth,
height: 500 / 800 * uni.getSystemInfoSync().windowWidth,
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,
scrollAlign: 'left',
touchMoveLimit: 24,
legend: {},
xAxis: {
disableGrid: true,
scrollShow: true,
itemCount: 7,
scrollColor: "#A6A6A6", //默认为 #A6A6A6
scrollBackgroundColor: "#EFEBEF", //默认为 #EFEBEF
},
yAxis: {
gridType: "dash",
dashLength: 2
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow"
}
}
});
},