自定义Y轴坐标值并修改对应颜色
1.格式化Y轴文案显示
在 config-ucharts.js文件中找到formatter——自定义format配置,添加一个新的Demo
"yAxisDemo4":function(val, index, opts){
if(val==0){
return ''
}else if(val==1){
return '舒服'
}else if(val==2){
return '正常'
}else if(val==3){
return '警告'
}else if(val==4){
return '危急'
}
},
图表数据自定义(可根据需求修改)为:
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
let res = {
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [{
name: '',
legendShape: 'none',
data: [1, 2, 2, 3, 4, 2]
}, ]
};
this.chartData = JSON.parse(JSON.stringify(res));
如果data数据中(1,2,3,4)都存在,区域图可正常显示,一旦不是四种值都存在,曲线显示都会不正确,所以需要在在u-charts.js文件,第1958行左右做出如下修改:
注释for循环部分,固定range为[1,2,3,4],其他保持不变
这步的作用是将Y轴坐标固定,不让其随data数据变化而变化
var range = [1,2,3,4];
// for (var i = 0; i <= opts.yAxis.splitNumber; i++) {
// range.push(minRange + eachRange * i);
// }
2.修改基本配置opts
yAxis: {
// disabled:true,
gridType: "dash",
dashLength: 1,
splitNumber: 3,
format: 'yAxisDemo4', //1-放松,2-正常,3-关注,4-重点,
},
3.修改Y轴坐标对应颜色
在u-charts.js文件,drawYAxis方法中找到画Y轴刻度及文案处,context.fillText前添加如下代码:
if(item=="放松"){
context.fillStyle = "#00B52A"
}
if(item=="正常"){
context.fillStyle = "#155CFF"
}
if(item=="关注"){
context.fillStyle = "#FF7E01"
}
if(item=="重点"){
context.fillStyle = "#F53F3F"
}
context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);