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;
      }
    })
           

效果如下：

现在好一点了，但是我们发现那个设置的空数据，还显示了根线条，继续优化

2、去除默认数据的线条

labelLine: {
            normal: {
              lineStyle: {
                opacity: tempdata.length === 6 ? 0 : 1
              }
            }
          },
           

说明一下，这里，我们通过在series中设置laberLine的样式，通过判断数据长度来控制线条透明度进而控制线条是否显示。

效果如下：

处理完这一步后，比较完美了，但是我们的测试小姐姐还是发现了另外一个问题，当鼠标放到圆环上的时候，又变成空白了，这个问题产生的原因是：Echarts是有默认动画的，鼠标放上去会有放大效果，所以，我们需要禁止空数据时的动画。

禁止空数据时鼠标移入动画

代码如下：

silent:tempdata.length === 6 ? true : false,
hoverAnimation:tempdata.length === 6 ? false : true,
           

效果如下

至此大工告成！谢谢大家的阅读。

完整代码如下：

let tempdata = props.chartdata;
    if (props.chartdata?.filter(item => item.value > 0).length === 0) {
      tempdata.push({
        value: 100,
        name: ''
      })
    }
    tempdata.map(item => {
      if (!item.value) {
        item.value = null;
        return item;
      }
    })
    let myChart = echarts.init(document.getElementById('chart'))
    myChart.setOption({
      legend: {
        show: true,
        left: 'center',
        y: 'bottom',
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 16,
      },
      grid: {
        x: 100,
        y: 20,
        bottom: 30,
      },
      series: [
        {
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['30%', '55%'],
          data: tempdata,
          color: ['#6699FF', '#52CCA3', '#9580FF', '#A1E6CE', '#B3CDFF', "#E9F0FF"],
          label: {
            position: 'outside',
            alignTo: 'none',
            formatter: function (item) {
              return item.name.split(' ')[2]
            }
          },
          silent:tempdata.length === 6 ? true : false,
          hoverAnimation:tempdata.length === 6 ? false : true,
          // 是否避免标签显示超出，这个设置为true后，导致指标较小的时候指标显示异常
          // avoidLabelOverlap: false,  
          labelLine: {
            normal: {
              lineStyle: {
                opacity: tempdata.length === 6 ? 0 : 1
              }
            }
          },
        },
      ]
    })