背景:
使用ucharts绘制折线图,当数据项多的时候,横坐标显示的文字会重合,故想到滑动
项目代码使用的是原生的代码,而非ucharts的组件:
<template>
<view>
<canvas canvas-id="chartsLine" id="chartsLine" class="w-full" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" />
</view>
</template>
1. 整体配置开启可滑动
2. X轴配置--设置最多显示的数据项
3. 设置滚动条拖拽事件
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
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);
}
注意:通常之前的canvas包含了@touchend="tap" 事件,记得删除一下
补充:动态计算最多显示项
1. 动态计算图表的屏幕显示宽度
this.$nextTick(() => {
let info = uni.createSelectorQuery().in(this).select('#chartsLine');
let that = this
info.boundingClientRect(function(data) {
that.cWidth = data.width
that.cHeight = data.height
that.getServerData()
}).exec(function(res) {
})
})
其中id为 chartsLine 的 canvas 宽度设置为父组件的百分百
2. 获取图表类别的字符串长度, 并赋予每个字符一定的宽度,显示宽度/每个类别宽度即可
// 考虑到我的类别文字长度相差不大,此处选择了第一个类别,也可自行选择合适的类别
const str = this.$props.option.categories[0]
// 默认每个字符13px
const len = str.length * 13
// 显示的数据项应为整数
this.itemCount = Math.floor(this.cWidth / len)
3. 动态设置显示数据项
效果: