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

流氓也是种气质 _Cookie

于 2024-01-02 11:11:29 发布

阅读量1.4k

点赞数 9

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/qq_37550440/article/details/135335687

版权

uni-app 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

效果图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'