echarts 柱状图 x轴数据某个值为空时就会出现柱状图不显示并且占位现象，如上图，那怎么解决呢？
想了两天终于想到了办法，那就是添加多个X轴的数据就可以，在这记录一下，如果哪位有更好的办法，请告知： 效果图： 代码：
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ]; app.configParameters = { rotate: { min: -90, max: 90 }, align: { options: { left: 'left', center: 'center', right: 'right' } }, verticalAlign: { options: { top: 'top', middle: 'middle', bottom: 'bottom' } }, position: { options: echarts.util.reduce(posList, function (map, pos) { map[pos] = pos; return map; }, {}) }, distance: { min: 0, max: 100 } }; app.config = { rotate: 90, align: 'left', verticalAlign: 'middle', position: 'insideBottom', distance: 15, onChange: function () { var labelOption = { normal: { rotate: app.config.rotate, align: app.config.align, verticalAlign: app.config.verticalAlign, position: app.config.position, distance: app.config.distance } }; myChart.setOption({ series: [{ label: labelOption }, { label: labelOption }, { label: labelOption }, { label: labelOption }] }); } }; var labelOption = { show: true, position: app.config.position, distance: app.config.distance, align: app.config.align, verticalAlign: app.config.verticalAlign, rotate: app.config.rotate, formatter: '{c} {name|{a}}', fontSize: 16, rich: { name: { textBorderColor: '#fff' } } }; option = { color: ['#003366', '#006699', '#4cabce', '#e5323e'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, // 进行数据处理 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: ['Forest', 'Steppe', 'Desert', 'Wetland', 'www'] }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore: {show: true}, saveAsImage: {show: true} } }, xAxis: [ { type: 'category', axisTick: {show: false}, position: 'bottom', data: ['2012', '', '', '', ''] }, { type: 'category', axisTick: {show: false}, position: 'bottom', data: ['', '2013', '', '', ''] }, { type: 'category', axisTick: {show: false}, position: 'bottom', data: ['', '', '2014', '', ''] }, { type: 'category', axisTick: {show: false}, position: 'bottom', data: ['', '', '', '2015', ''] }, { type: 'category', axisTick: {show: false}, position: 'bottom', data: ['', '', '', '', '2016'] } ], yAxis: [ { type: 'value' } ], series: [ {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 0,data: [320]}, {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 0,data: [220]}, {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 0,data: [332]}, {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 0,data: [98]}, {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 1,data: ['',320]}, {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',220]}, {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',232]}, {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',98]}, {name: 'www',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',345]}, {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 2,data: ['','',320]}, {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',420]}, {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',232]}, {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',98]}, {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 3,data: ['','','',320]}, {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 3,data: ['','','',98]}, {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 4,data: ['','','','',620]}, {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 4,data: ['','','','',290]}, {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 4,data: ['','','','',98]} ] }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>