提示:本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。 |
如何实现堆积柱图上显示合计值,就是在红框位置显示合计值。
1.创建好堆积柱图,如下:
2.新建客户端模块:
3.具体宏代码如下:
注:此宏代码不支持同时显示柱图的数据标签,若是需要显示数据标签,需要修改宏代码。
/** * 宏类型:ClientSide(服务端) * 对象:chart * 事件:afterRenderer */ function main(chartView) { var options = chartView.getChartObject().getOptions(); var series = options.series; var totals = buildTotal(series); var lastIndex = series.length - 1; series[lastIndex].label = { normal: { position: 'top', show: true, formatter: function(a) { return totals[a.dataIndex]; } }, emphasis: { position: 'top', show: true, formatter: function(a) { return totals[a.dataIndex]; } } } chartView.getChartObject().getChart().setOption(options); } function buildTotal(series) { var totalLength = series[0].data.length; var totals = []; for (var k = 0; k < totalLength; k++) { totals[k] = 0; } for (var i = 0; i < series.length; i++) { for (var j = 0; j < series[i].data.length; j++) { totals[j] += getValue(series[i].data[j].value); } } return totals; } //获取数据项的值 function getValue(value) { if (Array.isArray(value)) { return value[1]; } else { value; } } |
4.最终效果图: