Echart多个柱状图居中展示,忽略null

441 阅读2分钟

image.png

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: [
        {
          value: 9,
          itemStyle: {
            color: '#6BC9FA'
          }
        }
      ], // 因为使用的是2012第一个x轴,所以只有一个数据
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'A',
      type: 'bar',
      xAxisIndex: 1,
      data: ['', 3], // 因为使用的是2013第二个x轴,所以空出第一个数据值
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'A',
      type: 'bar',
      xAxisIndex: 2,
      data: ['', '', 4],
      barGap: '2%', //不同系列的柱间距离
      barWidth: null
    },
    {
      name: 'A',
      type: 'bar',
      xAxisIndex: 3,
      data: ['', '', '', 5],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'A',
      type: 'bar',
      xAxisIndex: 4,
      data: ['', '', '', '', 6],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'B',
      type: 'bar',
      xAxisIndex: 0,
      data: [3],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'C',
      type: 'bar',
      xAxisIndex: 0,
      data: [5],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'D',
      type: 'bar',
      xAxisIndex: 0,
      data: [4],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    // 2013
    {
      name: 'B',
      type: 'bar',
      xAxisIndex: 1,
      data: ['', 5],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'C',
      type: 'bar',
      xAxisIndex: 1,
      data: ['', 3],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'D',
      type: 'bar',
      xAxisIndex: 1,
      data: ['', 7],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'E',
      type: 'bar',
      xAxisIndex: 1,
      data: ['', 5],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    // 2014
    {
      name: 'B',
      type: 'bar',
      xAxisIndex: 2,
      data: ['', '', 6],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'C',
      type: 'bar',
      xAxisIndex: 2,
      data: ['', '', 6],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'D',
      type: 'bar',
      xAxisIndex: 2,
      data: ['', '', 4],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    // 2015
    {
      name: 'D',
      type: 'bar',
      xAxisIndex: 3,
      data: ['', '', '', 8],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    // 2016
    {
      name: 'B',
      type: 'bar',
      xAxisIndex: 4,
      data: ['', '', '', '', 1],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    },
    {
      name: 'D',
      type: 'bar',
      xAxisIndex: 4,
      data: ['', '', '', '', 3],
      barGap: '2%', //不同系列的柱间距离
      barWidth: 30
    }
  ]
};