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  桃花嫣然出篱笑  阅读(105)  评论(0)    收藏  举报