uniapp中ucharts的x轴标签过长,需要修改源代码才可以通过换行符‘\n‘换行!
·
以时间轴折线图为例,传入的数据为时间戳:
vue写法:
<qiun-data-charts type="tarea"
tooltipFormat="tooltipDemo2"
:opts="ringsOpt" :chartData="ringsData" />
getChart() {
var datenow = new Date()
var yearnow = datenow.getFullYear()
var monthnow = datenow.getMonth()
var daynow = datenow.getDate()
var datebegin = new Date(yearnow, monthnow, daynow, 0)
console.log(datebegin.getTimezoneOffset())
var dateend = new Date(yearnow, monthnow, daynow + 1, 0)
this.ringsOpt = {
color: ["#4095E5", "#FFA835", "#D95040", "#40D69A", "#EE752F"],
padding: [20, 10, 0, 20],
enableScroll: true,
fontSize: 11,
legend: {},
enableScroll: true,
xAxis: {
disableGrid: true,
fontSize: 11,
itemCount: 6,
boundaryGap: "justify",
lineHeight: 30,
format: "datetime"
},
yAxis: {
gridType: "dash",
data: [{
axisLine: false,
FontSize: 11
}],
},
extra: {
area: {
type: "curve",
opacity: 0.35,
addLine: true,
width: 1,
gradient: true,
activeType: "hollow"
},
tooltip: {
xAxisLabel: false,
}
}
}
this.ringsData = {
series: [{
name: "时间轴1",
enableScroll: true,
data: [
[datebegin.getTime(), 55],
[dateend.getTime(), 25],
]
}]
}
},
第一步,在config-ucharts.js中配置x轴的自定义formatter:datetime。
const formatDateTime1 = (val) => {
var date = new Date(val)
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours() + ''
var minutes = date.getMinutes() + ''
var second = date.getSeconds() + ''
return '' + year + '/' + month + '/' + day + '\n' + hour.padStart(2, '0') + ':' + minutes.padStart(
2, '0') + ':' + second.padStart(2, '0');
}
------------------config-ucharts.js部分代码-----------------------
-----------------------------------------
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
"formatter": {
"yAxisTh1": function(val, index, opts) {
return val / 1000 + 'k'
},
"yAxisDemo1": function(val, index, opts) {
return val + '元'
},
"yAxisDemo2": function(val, index, opts) {
return val.toFixed(2)
},
"xAxisDemo1": function(val, index, opts) {
return val + '年';
},
"xAxisDemo2": function(val, index, opts) {
return formatDateTime(val, 'h:m')
},
"datetime": function(val, index, opts) {
return formatDateTime1(val);
},
"tooltipDemo2": function(item,category,index,opts){
var xlabel = formatDateTime1(item.data[0])
var yLabel = ''+item.data[1]
return xlabel+', '+yLabel;
},
-------------------------------------------
-------------------------------------------
第二步,修改u-charts.js中的drawXAxis函数
// 如果在主视图区域内
var _scrollDistance_ = opts._scrollDistance_ || 0;
var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
context.beginPath();
context.setFontSize(xAxisFontSize);
context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
//从这开始
var labelList = xitem.split("\n");
labelList.forEach((labelItem,labelIndex)=>{
context.fillText(String(labelList[labelIndex]), xAxisPoints[index] + offset, startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize *labelList.length) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix *(labelIndex+1));
})
//从这结束
context.closePath();
context.stroke();
}
最终效果:只有当xAxis.lineHeight是xAxis.fontSize的n倍多点,标签的居中效果才好,n为labelList的length。

更多推荐
所有评论(0)