Echarts环形图设置空数据样式

需求背景

由于最近的需求涉及到图表的展示，所以引入Echarts来渲染图表，但是问题也随之而来了，仔细阅读过文档后发现，Echarts对于环形图并没有能够设置默认样式的地方，对于空数据，界面直接就是空白一片，产品不能接受，没办法只能一顿捣鼓了。

解决问题的方法

经过一番捣鼓后，想到，既然组件不支持空数据，而且还想显示一个带颜色的默认的圆环，那么我们就可以给数据项后多添加一个数据，即默认数据
代码如下：

// 处理空数据
    if (props.chartdata?.filter(item => item.value > 0).length === 0) {
   
      tempdata.push({
   
        value: 100,
        name: ''
      })
    }

这里的props.chartdata即为传入的表格数据，当传入表格的数据的value没有0的时候，即数据为空，补充一个数据给图表。
注意：
补充的这一项name值必须为空，否则会显示底部指标文案

加入图片后，我们发现，虽然是空数据，但是还是显示了0% 这个是我们不希望看到的，所以需要进一步处理

优化我们的图表

1、去除空数据指标

这个还是需要在传入数据前做处理，即将数据的value设置为 null，具体代码如下：

tempdata.map(item => {
   
      if (!item.value) {
   
        item.value = null;
        return item;
      }
    }