ECharts 柱状图X轴或Y轴空值无数据不占位不渲染不展示

ECharts 数据轴空值不占位不渲染不展示

简单点_

2188人浏览 · 2023-04-03 22:52:52

简单点_ · 2023-04-03 22:52:52 发布

效果查看：将option复制到 echarts解析

垂直方向：

// 垂直方向代码示例
option = {
    legend: {
        // 这里data省略echarts会自动匹配，也可自行配置
    },
    xAxis: [
        // 关键点：多个X轴进行匹配
        {
            type: 'category',
            position: 'bottom',
            data: ['2021', '']   //空字符串则不会展示
        },
        {
            type: 'category',
            position: 'bottom',
            data: ['', '2022']
        },
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '苹果',
            type: 'bar',
            data: [1],
        },
        {
            name: '西瓜',
            type: 'bar',
            data: [3],
        },
        {
            name: '西瓜',
            type: 'bar',
            xAxisIndex: 1,   //匹配第二个X轴
            data: [null, 3], //第一个不需要匹配，所以为null或者其他空值
        },
        {
            name: '香蕉',
            type: 'bar',
            xAxisIndex: 1,  //匹配第二个X轴
            data: [null, 5], //第一个不需要匹配，所以为null或者其他空值
        },
    ]
};

水平方向：

// 水平方向代码示例
option = {
  legend: {
    // 这里data省略echarts会自动匹配，也可自行配置
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis:[
    // 关键点：多个y轴进行匹配
    {
      type: 'category',
      position: 'left',
      data: ['2021', ''] //空字符串则不会展示
    },
    {
      type: 'category',
      position: 'left',
      data: ['', '2022']
    }
  ],
  series: [
    {
      name: '苹果',
      type: 'bar',
      data: [1]
    },
    {
      name: '西瓜',
      type: 'bar',
      data: [3]
    },
    {
      name: '西瓜',
      type: 'bar',
      yAxisIndex: 1, //匹配第二个y轴
      data: [null, 3] //第一个不需要匹配，所以为null或者其他空值
    },
    {
      name: '香蕉',
      type: 'bar',
      yAxisIndex: 1, //匹配第二个y轴
      data: [null, 5] //第一个不需要匹配，所以为null或者其他空值
    }
  ]
};