uniapp + ucharts X轴数据过多，折线数据过多，Y轴出现小数过多

1、通过xAxis.labelCount 来设置显示个数

xAxis: {disableGrid: true,labelCount: 5, //设置显示个数formatter: (val) => {return val.slice(5) // x轴过长，可以截取一下}
},

2、通过 opts.dataLabel 来设置折线图上面的数据是否显示，opts.dataPointShape 来设置折线图上圆点显示

dataLabel: false, // 数据显示
dataPointShape: false, // 圆点显示
padding: [20, 15, 5, 10], // 图位置
legend: {show: true,position: "top",margin: 10, // 图例外侧填充边距，默认为5
}

3、Y轴坐标会分成五份，出现小数过多时，使用yAxis.tofix设置保留的位数，也可以yAxis.formatter讲Y轴处理成自己想要的样子

formatter: (val) => {return val + '元'
},

new uCharts({type: "line",context: ctx,width: this.cWidth,height: this.cHeight,categories: data.categories,series: data.series,animation: true,dataLabel: false, // 数据显示dataPointShape: false, // 圆点显示background: "#FFFFFF",color: ["#5470c6", "#91cc75", "#fac858", "#ee6666"],padding: [20, 15, 5, 10], // 图位置legend: {show: true,position: "top",margin: 10, // 图例外侧填充边距，默认为5},xAxis: {disableGrid: true,labelCount: 5, //默认显示个数formatter: (val) => {return val.slice(5)}},yAxis: {gridType: "dash",dashLength: 2,data: [{fontColor: '#999999',min: 0,axisLineColor: '#E6E6E6',fontSize: 10,tofix: 0, // Y轴刻度值保留的小数位数}]},extra: {line: {type: "curve",width: 2}}
})

4、如果需要完整的显示全部数据，可以选择有滚动条的折线图，官网有具体的代码可以看一下

（也可以后台传数据的时候控制一下，例如本来10分钟一条记录，改成1小时一条记录传过来，就正常显示了）

注意：以上使用的都是ucharts 原生的，使用组件的话，我没有尝试过，不确定是不是一样的，

        小程序项目，出现层级问题的话，需要开启2d，具体的可以多看看官网

 官网：uCharts官网 - 秋云uCharts跨平台图表库

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！