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

最新推荐文章于 2024-11-29 09:43:01 发布

神笔码农

最新推荐文章于 2024-11-29 09:43:01 发布

阅读量9.7k

点赞数 8

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

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

版权

本文介绍了如何使用Echarts的自定义柱状图来优化0值柱状图的显示，以及解决不同数据类别导致的空位问题。通过自定义柱状图，可以实现0值数据的隐藏，并在数据项不一致时隐藏空白位置，提高图表的清晰度。

摘要由CSDN通过智能技术生成

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},
		'天津':{