uniapp使用ucharts 自定义Y轴显示及刻度自定义
2024-01-02 11:44:16
效果图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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!