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'//设置为圆形
}
];
浙公网安备 33010602011771号