echarts饼图+接口数据为0时饼图不渲染的解决

以上是理想状态，点击下拉列表，当某个选择下的数据为0时，图表也同步渲染

但是现在是这样的，我的数据为0时，图表还停留在上一数据的样子，并不重新渲染

解决：这都要谢谢我那老后端，给我传的数据格式，当有数据时，他给我传的是好的

当数据为0时，人家不给我传0，人直接我个空数组

所以当我res.data.map的时候，如果res.data=[]，那就不会push任何东西，所以series.data没有数据，自然不会渲染，其实后端给返的就是{name:’’,value:’’}格式，没数据就是个空数组，所以直接让series.data=res.data就行
或者就是以下写的那样，做个判断，data.length=0时就直接给个空数组，其实没必要重新塞一遍值，但是因为这是别人写的就不删他代码了

<template>
  <div ref="chart" class="comprehensiveChart"></div>
</template>

<script>
import {getAllComprehensive, getComprehensive} from "@/request/publicSentiment"
export default {
  name: 'comprehensiveChart',
  props: {
  	// 父给子传的值，作为入参
    areaid: String,
    comunityid: String,
    dateid: Number
  },
  data () {
    return {
      seriesData: [], // series.data
      xData: [],
      amount: 0,       
    }
  },
  watch: {   // 监听一下入参，当入参改变时，重新调接口渲染图表
    areaid: {
      deep: true,
      handler: function() {
        this.initchart()
      }
    },
    dateid: {
      deep: true,
      handler: function() {
        this.initchart()
      }
    },
  },
  mounted () {
    this.initchart()
  },
  methods: {
    async initchart () {
      const chart = this.$echarts.init(this.$refs.chart)
      chart.clear()
      // 此处是调接口拿到图表数据
      let res
      if(this.areaid === '0') {
        res = await getAllComprehensive(this.dateid)
      }else {
        res = await getComprehensive(this.comunityid,this.areaid,this.dateid)
      }
      if (res.code === 200) {
        if(res.data){
          const seriesData = []
          this.amount = 0  // amount是总数量，如果不在这里设置amount为0的话，每次重新走this.initchart()时，this.amount都会有上次累加的数据，那么计算总数就是在已经累加的数字上计算，就不对了，所以要清零
          if(res.data.length === 0){
            this.seriesData = []
          }else {
            res.data.map(i => {            
              seriesData.push({
                value: i.value,
                name: i.name
              })
              this.seriesData = seriesData
              this.amount += i.value
            })
          }          
        }else {
          this.seriesData = []
        }        
      }
      // 此处是饼图的配置项
      const option = {
        title:{
          // 副标题
          text: this.amount,
          left:"center",
          top:"45%",
          textStyle:{
              color:"#000000",
              fontSize:22,
              align:"center"
          }
        },
        // 主标题，用graphic+title是为了能让标题一直显示在饼图的中间
        graphic:{
          type:"text",
          left:"center",
          top:"40%",
          style:{
              text:"累计上报",
              textAlign:"center",
              fill:"#333",
              fontSize:11,
              color: '#77787F',
          }
        },
        // tooltip: {
        //   trigger: 'item'
        // },
        color: ['#2C75EF', '#5AD6E7', '#EA5656'], 
        // 图例
        legend: {
          selectedMode: false, // 图例是否可以点击
          // 图例的位置
          bottom: '10%', 
          right: 'center',
          // orient: 'vertical', // 图例的排列方向，水平or垂直
          width: '100%', // 整个图例的宽度，可以通过这个宽度来控制图例的换行
          // 图例的小图标的宽高
          itemWidth: 10, 
          itemHeight: 10,
          // 图例数据
          data:
            [
              {
                name: '建议',
                icon: 'circle', // 图例的小图标的形状，可以是图片
                // 图例的样式
                textStyle: {
                  color: '#7C828A'
                }
              },
              {
                name: '投诉',
                icon: 'circle',
                textStyle: {
                  color: '#7C828A'
                }
              },
              {
                name: '服务',
                icon: 'circle',
                textStyle: {
                  color: '#7C828A'
                }
              }
            ]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '40%'], // 环形饼图的环的大小以及整个饼图的大小
            center: ['50%', '45%'], // 饼图的位置
            avoidLabelOverlap: false,
            // 饼图的图形样式，
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 5
            },
            // 高亮状态的扇区标签样式
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            // 每个扇区的标签文本
            label: {
              show: true,
              formatter: '{c}件\n{d}%', // 文本格式
              lineHeight: 30  // 行高，可以通过行高来控制两行文本之间的间距
            },
            // 指示线
            labelLine: {
              show: true,
              normal: {
                lineStyle: {
                  color: 'red'
                },
                smooth: 0.2
              }
            },
            data: this.seriesData
          }
        ]
      }
      chart.setOption(option, true, false)
      // 自适应
      setTimeout(function (){
        window.onresize = function () {
            chart.resize();
        }
      },200);
    },
  }

}
</script>

<style scoped>
.comprehensiveChart {
  width: 100%;
  height: 100%;
}
</style>