echarts的半环形图数据都为0时不能显示半环形

前端新手的个人笔记————————————————————————————————

                  { value: this.personnelAttendance[2].value, name: '正常' },
                  { value: this.personnelAttendance[0].value, name: '迟到' },
                  { value: this.personnelAttendance[1].value, name: '早退' },
                  { value: this.personnelAttendance[3].value, name: '缺卡' },
                  {
                    value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                    itemStyle: {
                      color: 'none',
                      decal: {
                        symbol: 'none'
                      }
                    },
                    label: {
                      show: false
                    }
                  },

当每项数据都为0，总和也是0时就不是半环形

解决：

有几项数据就复制几个总和和itemStyle

data: [
                  { value: this.personnelAttendance[2].value, name: '正常' },
                  { value: this.personnelAttendance[0].value, name: '迟到' },
                  { value: this.personnelAttendance[1].value, name: '早退' },
                  { value: this.personnelAttendance[3].value, name: '缺卡' },
                  {
                    value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                    itemStyle: {
                      color: 'none',
                      decal: {
                        symbol: 'none'
                      }
                    },
                    label: {
                      show: false
                    }
                  },
                  {
                    value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                    itemStyle: {
                      color: 'none',
                      decal: {
                        symbol: 'none'
                      }
                    },
                    label: {
                      show: false
                    }
                  },
                  {
                    value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                    itemStyle: {
                      color: 'none',
                      decal: {
                        symbol: 'none'
                      }
                    },
                    label: {
                      show: false
                    }
                  },{
                    value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                    itemStyle: {
                      color: 'none',
                      decal: {
                        symbol: 'none'
                      }
                    },
                    label: {
                      show: false
                    }
                  }
                ],

又有新问题----------------------------------------------------------------------------------------------------

切换到有数据的账号发现会变成这样

解决：在外边定义data,通过条件判断，如果数据之和为0就push四个，否则就push一个

let data = [
            { value: this.personnelAttendance[2].value, name: '正常' },
            { value: this.personnelAttendance[0].value, name: '迟到' },
            { value: this.personnelAttendance[1].value, name: '早退' },
            { value: this.personnelAttendance[3].value, name: '缺卡' },
          ];
          if (this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value == 0) {
            data.push(
              {
                value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                itemStyle: {
                  color: 'none',
                  decal: {
                    symbol: 'none'
                  }
                },
                label: {
                  show: false
                }
              },
              {
                value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                itemStyle: {
                  color: 'none',
                  decal: {
                    symbol: 'none'
                  }
                },
                label: {
                  show: false
                }
              },
              {
                value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                itemStyle: {
                  color: 'none',
                  decal: {
                    symbol: 'none'
                  }
                },
                label: {
                  show: false
                }
              }, {
              value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
              itemStyle: {
                color: 'none',
                decal: {
                  symbol: 'none'
                }
              },
              label: {
                show: false
              }
            }

            )

          } else {
            data.push(
              {
                value: this.personnelAttendance[2].value + this.personnelAttendance[0].value + this.personnelAttendance[1].value + this.personnelAttendance[3].value,
                itemStyle: {
                  color: 'none',
                  decal: {
                    symbol: 'none'
                  }
                },
                label: {
                  show: false
                }
              },

            )
          }

最后在数据为0或不为0时都能正常显示半圆