在uniapp中使用ucharts自定义统计图表比较麻烦,由于官方文档我觉得写的不是很完整,所以总结了一些修改的方法供参考:
1、修改图表中的数据文案格式
查看位于组件文件夹下的u-chart.js文件,可以查看到一些绘制图标的源码,找到drawPointText方法。
function drawPointText(points, series, config, context, opts) {
// 绘制数据文案
var data = series.data;
var textOffset = series.textOffset ? series.textOffset : 0;
points.forEach(function(item, index) {
if (item !== null) {
context.beginPath();
var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize;
context.setFontSize(fontSize);
context.setFillStyle(series.textColor || opts.fontColor);
var value = data[index]
if (typeof data[index] === 'object' && data[index] !== null) {
if (data[index].constructor.toString().indexOf('Array') > -1) {
value = data[index][1];
} else {
value = data[index].value
}
}
var formatVal = series.formatter ? series.formatter(value, index, series, opts) : value;
context.setTextAlign('center');
context.fillText(String(formatVal), item.x, item.y - 4 + textOffset * opts.pix);
context.closePath();
context.stroke();
context.setTextAlign('left');
}
});
}
通过源码可以看出设置字体颜色的参数为series.textColor或者opts.fontColor,由于opts.fontColor在绘制其他字体颜色时可能会用到,我们只想单独修改数据文案的字体颜色,所以就只设置series.textColor即可,在我们为chartData赋值时即可添加下改参数如图