echarts 自定义柱状图可隐藏为0的数据

最新推荐文章于 2024-04-24 14:14:21 发布

神笔码农

最新推荐文章于 2024-04-24 14:14:21 发布

阅读量8.5k

点赞数 8

分类专栏： echart 文章标签： js html

本文链接：https://blog.csdn.net/JinShuYSM/article/details/108853353

版权

echart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts 柱状图无数据时隐藏柱子

之前遇到过这2种情况，

在数据项的值是0时，柱状图虽然不会显示，但是还是会占一个位子。
如果数据项的种类不一样的话，也会导致有空位。比如：2012年有分类1、2、3，但是2013年却有分类1、3、4。这种情况也会导致有空位子的出现。

在这里插入图片描述

这个时候，用echarts自带的 bar 是不太好用的。

可以用echarts的自定义柱状图来优化一下，做到隐藏为0的数据，以及数据项种类不一致时隐藏空白位置。

就像下面的效果图。

在这里插入图片描述

话不多说，直接上代码。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>wtf</title>
<script src='jquery.min.js'></script>
<script src='echarts.min.js'></script>
<script>
$(function(){

	//为0的数据就不要放进来了,
	var orgData = {
		'北京':{'分类1':123,'分类2':89,'分类3':78,'分类4':12},
		'上海':{'分类1':123,'分类5':32,'分类6':56,'分类7':44,'分类8':12,'分类9':34},
		'天津':{'分类1':34,'分类5':42,'分类6':32,'分类7':55},
		'吉林':{'分类1':12,'分类5':32,'分类6':43,'分类7':22,'分类8':12,'分类9':34},
		'辽宁':{'分类1':142,'分类5':51,'分类6':45,'分类8':12,'分类9':34}
	};
	
	var xAxisData = [];
	var dataData = [];
	
	
	var orgList = [];
	var orgCount = {};
	for(var org in orgData){
		xAxisData.push(org);
		
		var odata = orgData[org];
		
		var num = 0;
		for(var ks in odata){
			num++;
			if(orgList.indexOf(ks) == -1){
				orgList.push(ks);
			}
		}
		
		orgCount[org] = num;
	}
	
	
	var dataMap = {};
	var count = 0;
	for(var org in orgData){;
		var odata = orgData[org];
		
		var preOrg = undefined;
		var preCount = 0;
		for(var ks in odata){
			if(dataMap[ks] == undefined){
				dataMap[ks] = [];
			}
			
			preCount += checkEmpty(orgList,preOrg,ks);
			
			dataMap[ks].push([count,count+1,odata[ks],ks,preCount,orgCount[org]]);
		
			preOrg = ks;
		}
		count++;
	}
	
	
	
	var series = [];
	for(var d in orgList){
		var ks = orgList[d];
		
		var ds = dataMap[ks];
	
		series.push({
			data: ds,
			type: 'custom',
			renderItem:renderItem ,
			encode: {
				x: [0, 1],
				y: 2,
				tooltip: [3, 2],
				itemName: 3
			}
		});
	
	}
	
	var option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		xAxis: {
			type: 'category',
			data: xAxisData
		},
		yAxis: {
			type: 'value'
		},
		series: series
	};


	var dom = $('#c')[0];

	var ec = echarts.init(dom);

	ec.setOption(option);

	function checkEmpty(orgList,preOrg,curOrg){
		if(preOrg == undefined){
			return orgList.indexOf(curOrg);
		}else{
			return orgList.indexOf(curOrg) - orgList.indexOf(preOrg) -1 ;
		}
	}


	function renderItem(params, api) {
		var yValue = api.value(2);
		var start = api.coord([api.value(0), yValue]);
		var size = api.size([api.value(1) - api.value(0), yValue]);
		var style = api.style();
		
		
		
		var barWidth = 10;
		var emptyCount = api.value(4);
		var d = 0;
		if(emptyCount > 0){
			d = - barWidth * emptyCount;
		}
		
		var barNum = api.value(5);
		var p = [-barNum*barWidth/2,0];
		
		return {
			type: 'rect',
			position:p,
			shape: {
				x: start[0] + params.seriesIndex*barWidth +d,
				y: start[1],
				width: barWidth,
				height: size[1]
			},
			style: style
		};
	}

});
</script>
</head>
<body>
<div id='c' style='width:800px;height:500px;'></div>
</body>

神笔码农

关注

8
点赞
踩
22

收藏

觉得还不错? 一键收藏
5
评论
echarts 自定义柱状图可隐藏为0的数据

echarts 柱状图无数据时隐藏柱子之前遇到过这2种情况，在数据项的值是0时，柱状图虽然不会显示，但是还是会占一个位子。如果数据项的种类不一样的话，也会导致有空位。比如：2012年有分类1、2、3，但是2013年却有分类1、3、4。这种情况也会导致有空位子的出现。这个时候，用echarts自带的 bar 是不太好用的。可以用echarts的自定义柱状图来优化一下，做到隐藏为0的数据，以及数据项种类不一致时隐藏空白位置。就像下面的效果图。话不多说，直接上代码。<!DOCTYP
复制链接

扫一扫