大屏展示图表中，图表内无数据展示时的问题解决

2024-01-07 23:41:44

现状

很多时候在一些大屏展示中，我们会做一些数据展示的图表，那么有些时候数据会存在空值，或者不存在的情况，那么在前端展示的时候，图表内会没有展示任何数据。

解决

那么要解决这个情况，我们可以通过 ECharts 的几个API来进行解决。

1. 通过series.data来设置空数据默认值

{
  series: [
    {
      // 设置空数据时默认显示的文案
      data: [{value: '', name: 'data1'}, {value: null, name: 'data2'}, {value: undefined, name: 'data3'}],
      // 告诉ECharts如果data的值为 null 或者 undefined 等，则使用 '-'- 这个默认值
      itemStyle: {
        normal: {
          label: {
            show: true,
            formatter: function (params) {
              return params.data.value === null || params.data.value === undefined || params.data.value === '' ? '-' : params.data.value;
            }
          }
        }
      }
    }
  ]
}

这种方式可以用来设置整个系列的默认文案，但是对于不同系列的默认文案，无法进行设置。

2. 通过series.emptyData来设置空数据默认值

{
  series: [
    {
      data: [{value: '', name: 'data1'}, {value: null, name: 'data2'}, {value: undefined, name: 'data3'}],
      // 默认的提示信息
      emptyData: '-',
      //如果遇到value值为 null 或者 undefined 则直接过滤
      itemStyle: {
        normal: {
          label: {
            show: true,
            formatter: function (params) {
              return params.data.value === null || params.data.value === undefined ? '' : params.data.value;
            }
          }
        }
      }
    }
  ]
}