ucharts图表滚动

背景：

使用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 = thisinfo.boundingClientRect(function(data) {that.cWidth = data.widththat.cHeight = data.heightthat.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. 动态设置显示数据项