echarts图表,多个柱体,其中有数据为0时不占位

一.会有空位的情况

当某些数值为0时,会空着,显得不好看.
代码示例:

option = {tooltip: {trigger: 'axis'},legend: {data: ['A', 'B', 'C', 'D', 'E']},xAxis: [{type: 'category',position: 'bottom',data: ['2012', '2013', '2014', '2015', '2016']}],yAxis: [{type: 'value'}],series: [{name: 'A',type: 'bar',data: [1, 3, 4, 5, 6],barWidth: 30},{name: 'B',type: 'bar',data: [3, 5, 6, 0, 1],barWidth: 30},{name: 'C',type: 'bar',data: [5, 3, 6, 0, 0],barWidth: 30},{name: 'D',type: 'bar',data: [4, 7, 4, 8, 3],barWidth: 30},{name: 'E',type: 'bar',data: [0, 5, 0, 0, 0],barWidth: 30}]
};

图片示例:

二.去掉空位

代码示例:

option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},// 进行数据处理,去掉提示框中一些x轴坐标为空的数据显示.formatter: function (params) {var html = '';if (params.length != 0) {// 可以自己打印一下console.info(params[0]);var getName = params[0].name;html += getName + '<br/>';for (var i = 0; i < params.length; i++) {// 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)if (params[i].value != null &&params[i].value != 0 &&params[i].value != '') {html += params[i].marker;html += params[i].seriesName + ': ' + params[i].value + '<br/>';}}}return html;}},legend: {data: ['A', 'B', 'C', 'D', 'E']},xAxis: [// 把x轴,划分成多个{type: 'category',position: 'bottom',data: ['2012', '', '', '', '']},{type: 'category',position: 'bottom',data: ['', '2013', '', '', '']},{type: 'category',position: 'bottom',data: ['', '', '2014', '', '']},{type: 'category',position: 'bottom',data: ['', '', '', '2015', '']},{type: 'category',position: 'bottom',data: ['', '', '', '', '2016']}],yAxis: [{type: 'value'}],series: [// 2012年的四个柱体,因为xAxisIndex等于0{name: 'A',type: 'bar',xAxisIndex: 0,data: [1], // 因为使用的是2012第一个x轴,所以只有一个数据barWidth: 30},{name: 'B',type: 'bar',xAxisIndex: 0,data: [3],barWidth: 30},{name: 'C',type: 'bar',xAxisIndex: 0,data: [5],barWidth: 30},{name: 'D',type: 'bar',xAxisIndex: 0,data: [4],barWidth: 30},// 2013{name: 'A',type: 'bar',xAxisIndex: 1,data: ['', 3], // 因为使用的是2013第二个x轴,所以空出第一个数据值barWidth: 30},{name: 'B',type: 'bar',xAxisIndex: 1,data: ['', 5],barWidth: 30},{name: 'C',type: 'bar',xAxisIndex: 1,data: ['', 3],barWidth: 30},{name: 'D',type: 'bar',xAxisIndex: 1,data: ['', 7],barWidth: 30},{name: 'E',type: 'bar',xAxisIndex: 1,data: ['', 5],barWidth: 30},// 2014{name: 'A',type: 'bar',xAxisIndex: 2,data: ['', '', 4],barWidth: 30},{name: 'B',type: 'bar',xAxisIndex: 2,data: ['', '', 6],barWidth: 30},{name: 'C',type: 'bar',xAxisIndex: 2,data: ['', '', 6],barWidth: 30},{name: 'D',type: 'bar',xAxisIndex: 2,data: ['', '', 4],barWidth: 30},// 2015{name: 'A',type: 'bar',xAxisIndex: 3,data: ['', '', '', 5],barWidth: 30},{name: 'D',type: 'bar',xAxisIndex: 3,data: ['', '', '', 8],barWidth: 30},// 2016{name: 'A',type: 'bar',xAxisIndex: 4,data: ['', '', '', '', 6],barWidth: 30},{name: 'B',type: 'bar',xAxisIndex: 4,data: ['', '', '', '', 1],barWidth: 30},{name: 'D',type: 'bar',xAxisIndex: 4,data: ['', '', '', '', 3],barWidth: 30}]
};

图片示例:

echarts图表,多个柱体,其中有数据为0时不占位相关推荐

SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感
文章目录一.简介二.增加loading加载动效 2.1 实现原理 2.2 实现步骤 2.3 实现效果图三.完整源代码及解析一.简介 Echarts 图表在异步请求数据时,如果加载时间较长,一个 ...
ECharts图表重加载刷新数据
notMerge设置true 参照官方API:echartsInstance. setOption API结构如下: (option: Object, notMerge?: boolean, lazy ...
echarts饼图圆环图数据为0时字体重叠
在echarts图标中有时候会出现数据过小字体重叠的问题, 解决方法,可将series中的avoidLabelOverlap属性值设置为true即可解决
Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)
在使用 Echarts 图表的过程中,有时候数值会很大导致该轴的刻度显示不全,如图: 这个时候就需要将该轴的刻度值除以 1000 或 10000,再加一个单位来缩短它的长度: Echarts官网中为我 ...
echarts图表的div高度跟随数据长度自适应
// 排名折线图 <template><div id="charts"><divid="cate"ref="cate&q ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...
问题描述: echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录: 解决方 ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...

echarts图表,多个柱体,其中有数据为0时不占位

一.会有空位的情况

二.去掉空位

echarts图表,多个柱体,其中有数据为0时不占位相关推荐

最新文章

热门文章