当前位置: 首页> 教育> 大学 > 蛙蛙写作网站_微信的定制开发_交易平台_海阳seo排名优化培训

蛙蛙写作网站_微信的定制开发_交易平台_海阳seo排名优化培训

时间:2025/7/11 20:07:00来源:https://blog.csdn.net/weixin_57933935/article/details/144128031 浏览次数:0次
蛙蛙写作网站_微信的定制开发_交易平台_海阳seo排名优化培训

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

修改前(中间柱子没数据但是还是会占位置)
在这里插入图片描述

修改后(中间柱子没数据情况下会自动调整)
在这里插入图片描述
思路:使用自定义柱子来做

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;let tufang = [100, 200, 150, 80, 70, 110, 10];
let qiaoliang  = [100, 80, 90, 0, 60, 0, 150];
let suidao = [0, 90, 150, 80, 70, 0, 10];
let lumian = [0, 0, 0, 80, 70, 0, 0];
let jidian = [90, 190, 150, 0, 70, 0, 10];
option = {tooltip: {},title: {show: true,text: '不符合常理的柱状图表实现',textStyle: {fontSize: 14,lineHeight: 18,width: 10}},xAxis: [{type: 'category',axisLabel: {align: 'center',hideOverlap: true},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{type: 'custom',renderItem: function (params, api) {return getRect(params, api);},data: tufang},{type: 'custom',renderItem: function (params, api) {return getRect(params, api);},data: qiaoliang},{type: 'custom',renderItem: function (params, api) {return getRect(params, api);},data: suidao},{type: 'custom',renderItem: function (params, api) {return getRect(params, api);},data: lumian},{type: 'custom',renderItem: function (params, api) {return getRect(params, api);},data: jidian}}]
};function getRect(params, api) {let dataSeries = [tufang,qiaoliang,  suidao,lumian,jidian]; // 确保这里有5个数据系列const { seriesIndex } = params;let categoryIndex = api.value(0); // x轴序列let vald = api.value(1); // 数据值// 如果数据为0,则不渲染柱子if (vald === 0) {return;}let start = api.coord([categoryIndex, vald]);let height = api.size([0, vald]);let chartWidth = api.getWidth();let totalWidth = chartWidth - 50; // 总宽度减去一定的间距// 计算每个系列的实际数量let seriesCount = dataSeries.reduce((count, series) => {return count + (series[categoryIndex] !== undefined && series[categoryIndex] !== 0 ? 1 : 0);}, 0); // 计算非零数据的系列数量// 柱子宽度和间距let barWidth = 10; // 单个柱子的固定宽度let barGap = 3; // 柱子之间的间距// 计算当前系列的偏移量let xOffset = dataSeries.slice(0, seriesIndex).reduce((sum, currentSeries, index) => {return sum + (currentSeries[categoryIndex] !== undefined && currentSeries[categoryIndex] !== 0 ? barWidth + barGap : 0);}, 0);// 计算当前系列的x位置let x = start[0] - barWidth / 2 + xOffset - 20; // 柱子的中心位置 再减20是因为让其起点靠中间左边点return {type: 'rect',shape: {x: x, // 当前柱子的x位置y: start[1],width: barWidth,height: height[1]},style: api.style()};
}option && myChart.setOption(option);
关键字:蛙蛙写作网站_微信的定制开发_交易平台_海阳seo排名优化培训

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: