echarts堆叠柱状图在最上面的柱子显示总和

需求

柱子需设置barMinHeight
在堆叠柱状图的最上面显示当前堆叠的总和

直接上代码吧

需要注意：设置barMinHeight时为了让0不显示，只能将0设置为null;

设置为null的柱子label是不显示的。当null在最上面时label就没得了

const series = [{ name: '张三', type: 'bar', stack: '总量', barWidth: 50, color: '#2457b3', barMinHeight: 5, data: [0, 1700, 1400, 1200, 300, 1] }, { name: '李四', type: 'bar', stack: '总量', barWidth: 50, color: '#2b91c3', barMinHeight: 5, data: [2900, 1200, 300, 200, 900, null] }, { name: '王五', type: 'bar', stack: '总量', barWidth: 50, color: '#2b9FF3', barMinHeight: 5, label: { color: '#333', position: 'top' }, data: [800, 900, null, 400, 80, 60] }] const option = { title: { text: '深圳月最低生活费组成（单位:元）', subtext: 'From ExcelHome', sublink: 'http://e.weibo.com/1341556070/AjQH99che' }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', splitLine: { show: false }, data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数'] }, yAxis: { type: 'value' }, }; let sums = []; let stacks = ['张三', '李四', '王五']; let labelInfo = { show: true, color: '#333', position: 'top' } series.forEach((item, sIdx) => { item.data.forEach((val, idx) => { sums[idx] = (sums[idx] || 0) + (val || 0); }) labelInfo.series = JSON.parse(JSON.stringify(series)); labelInfo.formatter = function(param) { // 此处可以写个函数，param.seriesIndex + 1(2,3,4,5等等) if (labelInfo.series && ((labelInfo.series[param.seriesIndex + 1] && labelInfo.series[param.seriesIndex + 1].data[param.dataIndex]) || (labelInfo.series[param.seriesIndex + 2] && labelInfo.series[param.seriesIndex + 2].data[param.dataIndex]) ) ) { return ''; } else { return sums[param.dataIndex] } } item.label = labelInfo; }) option.series = series; console.log(sums, option); var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); option && myChart.setOption(option);

巴特西

echarts堆叠柱状图在最上面的柱子显示总和

需求

直接上代码吧

最新文章

热门文章