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);
