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 = 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. 动态设置显示数据项

效果：