uniapp使用ucharts 自定义Y轴显示及刻度自定义

发布时间:2024年01月02日

效果图1:

?效果图2:

基础配置

opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 6,
						rotateLabel: true,
						rotateAngle: -50, //旋转角度
					},
					yAxis: {
						data: [{
							min: 0,
						}],
						showTitle: true,

					},
					extra: {
						column: {
							type: "group",
							width: 8,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							// barBorderCircle: true,
						}
					},
				},

?效果图1配置:

this.opts.yAxis.data[0].tofix = 1 保留小数位数
this.opts.yAxis.data[0].min = 0
this.opts.yAxis.data[0].max = 6
this.opts.yAxis.splitNumber = 6 //刻度值分割 max/splitNumber 

?效果图2配置:?

若需调整样式需要在ucharts的配置文件中修改

yAxisWater(val) { // val 就是对应的每个刻度值
			    let level = val.toFixed()
			// let levelName = "无数据"
			let levelName ="";
			if (null == level) {
				return levelName;
			}
			switch (level * 1) {
				case 1:
					levelName = "Ⅰ类"
					break;
				case 2:
					levelName = "Ⅱ类"
					break;
				case 3:
					levelName = "Ⅲ类"
					break;
				case 4:
					levelName = "Ⅳ类"
					break;
				case 5:
					levelName = "Ⅴ类"
					break;
				case 6:
					levelName = "劣Ⅴ类"
					break;
			}
			return levelName
		},

getWaterLevelName(level) {
			// let levelName = "无数据"
			let levelName =" "
			if (null == level) {
				return levelName;
			}
			switch (level * 1) {
				case 1:
					levelName = "Ⅰ类"
					break;
				case 2:
					levelName = "Ⅱ类"
					break;
				case 3:
					levelName = "Ⅲ类"
					break;
				case 4:
					levelName = "Ⅳ类"
					break;
				case 5:
					levelName = "Ⅴ类"
					break;
				case 6:
					levelName = "劣Ⅴ类"
					break;
			}
			// levelName= ''
			return levelName
		},

?使用:

for (var i = 0; i < columnFormatDemo.series.length; i++) {
						columnFormatDemo.series[i].format = "getWaterLevelName"
					}
					

					this.opts.yAxis.data[0].format = 'yAxisWater'

文章来源:https://blog.csdn.net/qq_37550440/article/details/135335687
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。