效果图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,
}
},
},
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
若需调整样式需要在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'