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

一时失言乱红尘 2022-11-14 11:50 283阅读 0赞

### 文章目录 ###

前言

一、实现原理

二、关键代码

总结

--------------------

# 前言 #

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

实现效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcxMTU5Mw_size_16_color_FFFFFF_t_70][]

--------------------

# 一、实现原理 #

利用最后一个柱形图的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是可以用的。

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcxMTU5Mw_size_16_color_FFFFFF_t_70]: /images/20221022/6155bad65b6b4a48b73a1d94cb736568.png