饼图-无数据时展示暂无数据不显示空图表

index.vue父文件

引入import pieChart from './components/pieChart.vue'

        <pieChart :pielist="pielist">
          <div slot="header" class="headre">
            <div class="headre-l">
              <div class="headre-lx" />
              <div class="headre-ln">报告的接收耗时统计</div>
            </div>
          </div>
        </pieChart>

定义数据

 pielist: { // 报告的统计数据
        list: [
          {
            name: '报告的耗时统计',
            type: 'pie',
            radius: '50%',
            center: ['35%', '50%'],
            data: [
              { value: '', name: '＜5min' },
              { value: '', name: '（5~10）min' },
              { value: '', name: '（10~15）min' },
              { value: '', name: '（15~20）min' },
              { value: '', name: '≥20min' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },

调接口

 /**
     * @description:  接收耗时统计-饼图
     * @param {String}
     */
    async pieChartList() { //
      const res = await pieChartApi.api(this.searchObj)
      if (!res.body) { // 防止报错
        res.body = {
          fivCon: 0,
          fiv2TenCon: 0,
          ten2FifCon: 0,
          fif2TwCon: 0,
          twCon: 0
        }
      }
      this.pielist.list[0].data[0].value = res.body.fivCon
      this.pielist.list[0].data[1].value = res.body.fiv2TenCon
      this.pielist.list[0].data[2].value = res.body.ten2FifCon
      this.pielist.list[0].data[3].value = res.body.fif2TwCon
      this.pielist.list[0].data[4].value = res.body.twCon
    },

pieChart.vue图表分开的， 无数据显示暂无数据-有数据展示图表----注意要获取到图表的宽高，否则不展示

<template>
  <div class="home-view">
    <div class="home-view-t">
      <slot name="header" />
    </div>
    <!-- 饼状图 -->

    <div class="home-view-c">
      <div ref="refpie" />
      <div v-show="!isShow" class="no-data"> 暂无数据</div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'PieChart',
  props: {
    pielist: {
      type: Object,
      default: () => { [] }
    }
  },
  data() {
    return {

    }
  },
  computed: {
  //无数据显示暂无数据
    isShow() {
      let bool = false
      this.pielist.list[0].data.forEach(item => {
        if (item.value > 0) {
          bool = true
        }
      })
      return bool
    }
  },
  watch: {
    pielist: {
      deep: true,
      handler: function(newV, oldV) {
        //无数据显示暂无数据-有数据展示图表----注意要获取到图表的宽高，否则不展示
        if (this.isShow) {
          this.change()
        }
      }
    }
  },
  mounted() {
   //无数据显示暂无数据-有数据展示图表----注意要获取到图表的宽高，否则不展示
    if (this.isShow) {
      this.change()
    }
    //自适应屏幕
    window.addEventListener('resize', () => {
      this.myChart && this.myChart.resize()
    })
  },
  methods: {
    change() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs.refpie)
      // 绘制图表
      this.myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
      legend: {
          orient: 'vertical', // 图例布局朝向，vertical竖向排版
          align: 'left', // 图例对齐方式
          right: '16px', // 图例距右侧距离16像素
          top: 'center' // 图例距顶部上下居中
        },


        color: ['#62A9FF', '#8378EA', '#EEBC23', '#C3E14C', '#53CEE9'],
        series: this.pielist.list

      })
    }
  }
}
</script>

<style lang="scss" scoped>
div{
    box-sizing:border-box;
}
.home-view{
    height:100%;
    width:100%;
    padding-bottom:15px;
    &-t{
        height:50px;
    }
    &-c{
        height:calc(100% - 50px);
        position: relative;
      >div{
        width: 100%;
        height:100%;
      }
      .no-data{
        display: flex;
        align-items: center;
        justify-content: center;
        color:#999;
        height: 100%;
        font-size: 10px;
        position: absolute;
        bottom:0;
        width: 100%;
        background: white;
      }
    }
}
</style>