Echart柱形图stack堆叠图显示总数

 

文章目录

前言

一、实现原理

二、关键代码

总结

---

 

前言

博主刚好遇到这个问题，我在网上找了一圈，发现大家都是用增加一个柱形图作为总数，把背景改为透明的。这种方案的问题是Y轴总数据是原来的两倍，最大值很大，导致柱子看起来压缩了一半，不美观，作为一个前端来说，美观当然很重要了！所以我想出了一个方案，如下：

实现效果如下：

---

一、实现原理

利用最后一个柱形图的label属性，显示总数。

二、关键代码

 

// 基于准备好的dom，初始化echarts实例
	let myChart = echarts.init(document.getElementById(''));
	let normal=[320, 302, 301, 334,320, 302, 301, 334];
	let larger=[320, 302, 301, 334,320, 302, 301, 334];
	let great=[320, 302, 301, 334,320, 302, 301, 334];
	let veryGreat=[320, 302, 301, 334,320, 302, 301, 334];
	//计算总数
	let total_data=(()=>{
		var datas = [];
		normal.forEach((item,index)=>{
			datas.push(normal[index]+larger[index]+great[index]+veryGreat[index]);
		})
		return datas;
	})();
	console.log(total_data);
	// 绘制图表
	let option={
		color: [],
		tooltip: {
			trigger: 'axis',
			axisPointer: {            // Use axis to trigger tooltip
				type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
			}
		},
		legend: {
			selectedMode:false,//取消图例上的点击事件
			left: 20,
			data: ['一般', '较大', '重大', '特别重大'],
		},
		grid: {
			left: '3%',
			right: '60',
			bottom: '3%',
			containLabel: true
		},
		yAxis: {
			name: '风险个数',
			type: 'value',
			axisLabel:{
				show: true,
			},
			axisLine:{
				show: true,
			},
			axisTick:{
				show: false,
			},
			splitLine:{
				show: true,
			},
		},
		xAxis: {
			name: '',
			type: 'category',
			data: ['分类1', '分类2', '分类3', '分类4',
			'分类5','分类6','分类7','分类8'],
			axisLabel:{
				show: true,
				interval: 0,
				rotate: 30,
			},
			splitLine:{
				show: false,
			},
			axisLine:{
				show: true,
			},
			axisTick:{
				show: false,
			},
		},
		series: [
			{
				barCategoryGap: '30%',
				name: '一般',
				type: 'bar',
				stack: 'total',
				label: {
					show: false,
				},
				data: [320, 302, 301, 334,320, 302, 301, 334]
			},
			{
				name: '较大',
				type: 'bar',
				stack: 'total',
				label: {
					show: false,
				},
				data: [120, 132, 101, 134]
			},
			{
				name: '重大',
				type: 'bar',
				stack: 'total',
				label: {
					show: false,
				},
				data: [220, 182, 191, 234]
			},
			{
				name: '特别重大',
				type: 'bar',
				stack: 'total',
				label: {
                    //最后一个label显示总数数据
					position: 'top',
					color: '#333',
					show: true,
					formatter:function(param){
						return total_data[param.dataIndex];
						// console.log(param);
					},
				},
				data: [150, 212, 201, 154]
			},
		]
	};
	myChart.setOption(option);

---

总结

利用echart显示假数据原理，注意不能启用legend图例效果，tooltip是可以用的。

分享不易，大家点赞支持下哟，谢谢(#^.^#)