echart饼图没有数据时展示灰色的环形

子组件

<template>
  <div>
    <div :id="idName" class="pies"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'Chartpie',
  props: ['idName', 'data', 'isEmpty'],
  methods: {
    initChart() {
      let color = []
      if (this.isEmpty) {
        color = ['#979797']
      } else {
        color = ['#F96956', '#FF915B', '#53E6F0', '#FFC254', '#5166D8', '#FFA897', '#6D93FF', '#8553BC', '#B4DB66']
      }
      const dom = document.getElementById(this.idName)
      this.myChart = echarts.init(dom)
      let option = {
        legend: {
          orient: 'horizontal',
          bottom: '0',
          itemWidth: 14,
          itemGap: 15,
          padding: [8, 8],
        },
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '36%',
            style: {
              text: '领域分布',
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 14,
            },
          },
        ],
        label: {
          alignTo: 'edge',
          formatter: (val) => {
            if (this.isEmpty) {
              return val.name
            } else {
              return val.name + val.value
            }
          },
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            top: 'top',
            center: ['50%', '38%'],
            silent: true,
            label: {
              show: true,
              position: 'outside',
              color: '#000000',
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 20,
              normal: {
                lineStyle: {
                  opacity: this.isEmpty ? 0 : 1,
                },
              },
            },
            color: color,
            data: this.data,
          },
        ],
      }
      this.myChart.setOption(option, true)
      this.myChart.resize()
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
  },
}
</script>
<style scoped>
.pies {
  width: 100%;
  height: 334px;
}
</style>

父组件

• 引用

<ChartPie ref="chartPie" :data="ChartData" idName="Pie" :isEmpty="isEmpty" />

• 初始化

trainDataField() {
  let ChartDataArr = {}
  const { parentField } = this
  trainDataField({ parentField }).then((res) => {
    res.data.allList.forEach((el) => {
      if (el.filedCount != '0') {
        ChartDataArr = {
          value: el.filedCount,
          name: el.filedName,
        }
        this.ChartData = this.ChartData.concat(ChartDataArr)
      } else {
        ChartDataArr = {
          value: null,
          name: el.filedName,
        }
        this.ChartData = this.ChartData.concat(ChartDataArr)
      }
    })
    this.initChart()
  })
},

• 判断是否有数据

initChart() {
  if (this.ChartData.filter((item) => item.value > 0).length === 0) {
    this.ChartData.push({
      value: 100,
      name: '',
    })
    this.isEmpty = true
  }
  this.$nextTick(() => {
    this.$refs.chartPie.initChart()
  })
},

效果图如下