ucharts横向滚动条不生效问题

如果使用的是组件 Chart 展示的方法则会导致:ontouch="true" 横向滚动是不会生效的,由Chart组件改为使用默认的qiun-data-charts因为Chart组件不支持ontouch滚动 ontouch触摸屏效果开启方便触摸滚动,下面附带样式和数据格式

const chartOptsHomeWork1 = ref({
color: ['#005FFF', '#20BCA1', '#FF5700', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
padding: [15, 15, 0, 5],
enableScroll: true,
touchMoveLimit: 24,

legend: {
	show: true,
	position: 'top',
	align: 'right',// 将图例对齐到右上角
	float: 'right',// 右浮动
	itemGap: 10, // 图例项之间的间距
	formatter: (name) => name,//确保图例文本正常显示
	// 图例形状样式
	shape: {
		width: 12,
		height: 12,
		radius: 6,// 圆形图例
		lineWidth: 0
	},
	text: {
		fontSize: 12,
		fillColor: '#333'
	}
},

xAxis: {
	disableGrid: true,
	scrollShow: true,
	itemCount: 5
},

yAxis: {
	data: [{ min: 0 }],
	gridType: 'dash',// 添加网格线样式
	dashLength: 4
},

dataLabel: false,

extra: {
	column: {
		type: 'group',
		width: 10,//柱子宽度
		// margin: 18,// 柱子间距  
		seriesGap: 5,// 柱子间距 
		activeBgColor: '#000000',
		activeBgOpacity: 0.08
	},
	legend: {
		position: 'topRight',
		offsetX: -10,
		offsetY: 5
	}
}

});

const chartDataHomeWork1 = ref({
categories: [], //柱状图数据名称
series: [
{
name: '完成工单',
data: [0],
legendShape: 'circle'//设置为圆形
},
{
name: '维护站点',
data: [0],
legendShape: 'circle'//设置为圆形
},
{
name: '上报故障',
data: [0],
legendShape: 'circle'//设置为圆形
}
]
});

chartDataHomeWork1.value.series = [
		{
			name: '完成工单',
			data: dealOrderWorkHistoryList,
			legendShape: 'circle'//设置为圆形
		},
		{
			name: '维护站点',
			data: dealSiteHistoryCount,
			legendShape: 'circle'//设置为圆形
		},
		{
			name: '上报故障',
			data: faultCountCreate,
			legendShape: 'circle'//设置为圆形
		}
	];
posted @ 2025-12-23 09:34  桃花嫣然出篱笑  阅读(0)  评论(0)    收藏  举报