在Echarts中如何更友好的展示空数据

在Echarts的使用中，我们会经常遇到这样的一个问题，就是数据为空或者数据全部为0时，一些图表展现的效果并不友好，一些空置的坐标轴和刻度线往往会影响我们的对于图表的直接认知。这时判断如果数据满足一些条件时，展示一个独立的图形或者增加一些文字说明，就会好理解的多。

这里，我们就通过Echarts的一些内建机制对于空数据的支持做一下说明（采用Echarts内建机制的好处是，图表中的基础布局和一些其他元素都是和有数据是一致的，比如标题，legend，tooltip等等）。

空数据的判断

展示空收据的说明首先需要判断数据是否为空。“数据为空”本身其实是一个相当容易导致歧义的说法，这里一般存在两种情况：

第一种情况是数据存在，但是数据全部为0的情形。在Echarts中，可以认为是series.data或者datasource中的值全部都是0。这种情形是比较容易让人误解的地方，原则上这是数据不为空的情形，但是很多情况下会让人误以为或者歧义的称这种情况下数据为空。当然，这种情形的在需要的情况下，可以通过遍历series中数据的具体的值来判断出来。
第二种情况是数据本身就不存在，或者说没有数据点的情况。在Echarts中，可以认为series.data或者datasource本身就是空的。这种情形是比较标准的数据为空的状态，比如在下面提到的饼图的内建机制中，也是依赖于这种机制来判断的。

通过graphic完成空数据的说明

Echarts中提供了直接画图的机制，通过option中的graphic来进行配置，而graphic中不仅仅支持各种图像，也支持文字元素。这样的话，在判断满足数据为空的条件时，我们就可以通过graphic来单独生成一些提示的文案等。最基本的，比如

option: {
   ...
   graphic: [
      {
        type: "text",
        left: "center",
        top: "center",
        style: {
          text: "No data available"
        }
      }
    ],
  ...
}

增加了上面的option就可以在图表中间展示一个No data available的提示。完整的代码可以参考 code.juejin.cn/pen/7226341…

饼图内建的EmptyCircle

对于饼图来说，Echarts 5.2.0版本之后，提供了内建的空数据展翅，也就是通过series.showEmptyCircle 展示一个空的圆，并且可以通过 seires.emptyCircleStyle 来配置这个圆的属性, 比如颜色和边框等。

完整的代码可以参考 code.juejin.cn/pen/7226879…