饼图如何设置数据标签显示名称,数值,百分比,并且数值保留两位小数
1、先设置图形的数据标签为【显示】:
2、增加宏修改数据标签效果:
类型 | 对象 | 事件 |
---|---|---|
ClientSide | chart | afterRenderer |
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+': '+Math.round(arg.percent)+'% '+arg.value}" } } }] } |