...
问题
饼图如何设置数据标签显示名称,数值,百分比,并且数值保留两位小数
Image Added
解决方案
1、先设置图形的数据标签为【显示】:
Image Added
2、增加宏修改数据标签效果:
Image Added
代码块 |
---|
|
function main(chartView) {
//var chart = chartView.getChartObject().getChart();
var option = chartView.getChartObject().getOptions();
var series = option.series[0].data;
// 遍历所有标签
for (var i in series) {
series[i].label = series[i].label || {};
series[i].label.normal = series[i].label.normal || {};
series[i].label.normal.formatter = function(data) {
debugger;
var name = data.name;
var value = data.value;
// 此处可设置标签格式 例:name:value
return name + ":(" + data.percent +'%)\n' + value.toFixed(2)+'元';
};
}
//chart.setOption(option);
}
|
注:若只是需要将名称、数值、百分比同时显示,对于小数位没有要求,可以使用如下扩展属性:
代码块 |
---|
|
{
"series": [{
"label": {
"normal": {
"show": true,
"position": "outer",
"formatter": "{b}\n{c}\n{d}%"
}
}
}]
} |
注:若是需要将名称、数值、百分比同时显示,并且对百分比进行四舍五入,可以使用如下扩展属性:
代码块 |
---|
|
{
"series": [{
"label": {
"normal": {
"formatter": "function(arg){return arg.name+': \\n'+arg.value+' \\n '+Math.round(arg.percent)+'% '}"
}
}
}]
}
|