vue项目数据循环渲染echarts图 数据为0不显示

图例：

 

1、首先安装echarts

npm install echarts --save

2、然后在main.js文件中引入echarts

//main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts  //全局注册echarts

3、现在，其他页面就可以正常引用了

//echartsData.vue
<template>
<div class="modelRiskStyl">
          <div class="modelTop">
            <div class="modelTitle">
              循环环形图标题
              <el-popover placement="top-start" trigger="hover" width="300">
                循环环形图tip提示，根据自己需求定义
                <v-icon slot="reference" dark left dense color="#706B69"
                  >mdi-help-circle</v-icon
                >
              </el-popover>
            </div>
            <div class="modelTip">
              <div
                class="modelTipLi"
                v-for="(item, index) in riskList"
                :key="index"
              >
                <div
                  class="tipQuare"
                  :style="{ background: item.riskColor }"
                ></div>
                <div>{{ item.label }}</div>
              </div>
            </div>
          </div>
          <div class="modelBottom">
            <div
              :ref="'modelData' + index"
              class="modelStyl"
              v-for="(item, index) in modelDataList"
              :key="index"
            ></div>
          </div>
        </div>
</template>
<script>
import { getModelDistribute } from '@/api/staticApi/index.js'  //接口引入
export default {
data: () => ({
modelDataList: [
{
    itemList: [
        {name: "低风险", percentage: "40.0%", value: 2},
        {name: "中风险", percentage: "60.0%", value: 3},
        {name: "高风险", percentage: "0.0%", value: 0}
    ],
    modelName: "名称1"
},
{
    itemList: [
        {name: "低风险", percentage: "6.7%", value: 1},
        {name: "中风险", percentage: "53.3%", value: 8},
        {name: "高风险", percentage: "40.0%", value: 6}
    ],
    modelName: "名称2"
}
],
myChart6:null
}),
mounted(){
this.$nextTick(() => {
     this.modelForFive()
  })
},
methods:{
modelForFive() {
      const data = {
      }
      getModelDistribute(data).then(
        (resp) => {
          if (resp.code === 0) {
            this.modelDataList = resp.payload
            this.$nextTick(() => {
              this.modelDataList.forEach((item, index) => {
                const chart = `modelData${index}`,
                  title = item.modelName,
                  data = item.itemList,
                  newFlag1 = data.every((v) => (v.value === 0)),  //所有value为0返回true
                  newFlag2 = data.some((v) => (v.value !== 0)), //有一个value不为0返回true
                  newFlag3 = (newFlag1 && !newFlag2) || newFlag2,
                  newColor = []
                data.forEach((item) => {
                  switch (item.name) {
                    case '低风险':
                      item.color = '#66BB6A'
                      break
                    case '中风险':
                      item.color = '#FFCC80'
                      break
                    case '高风险':
                      item.color = '#FF8A65'
                      break
                    case '极高风险':
                      item.color = '#E53935'
                      break
                    default:
                      break
                  }
                })
                for (let i = data.length - 1; i >= 0; i -= 1) {
                  if (!newFlag1 && newFlag3) {
                    if (data[i].value === 0) {
                      data.splice(i, 1)
                    }
                  }
                }   //将数组对象数据中value为0的对象删除
                data.forEach((item) => {
                  newColor.push(item.color)
                })
                this.patientDistri6(
                  this.$refs[chart][0],
                  title,
                  [],
                  data,
                  newColor
                )
              })
            })
          } else {
            this.$message.error(resp.errorMessage)
          }
        },
        (error) => {
          this.$message.error(error)
        }
      )
    },
patientDistri6(id, title, xdata, data, newColor) {
      const option = {
        title: [
          {
            text: title,
            textStyle: {
              fontSize: 16,
              color: '#212631',
              fontWeight: 700
            },
            left: 'center'
          }
        ],
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: '#333',
            fontSize: 14,
            fontWeight: 'normal'
          },
          formatter: (param) => {
            return `
                  <div style="display:flex;height:26px;line-height:26px">
                  <span>${param.marker}${param.name}</span></div>
                  <div style="display:flex;height:26px;line-height:26px;">
                  <span style="font-weight: 700;
                  margin-right:4px;text-indent:14px">${param.data.value}人</span>
                  <span>(${param.data.percentage})</span>
                  </div>`
          }
        },
        color: newColor,
        legend: {
          icon: 'square',
          orient: 'vertical',
          right: '5%',
          top: 'center',
          itemGap: 5,
          selectedMode: false,
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            top: '20%',
            right: '20%',
            bottom: 24,
            left: '20%',
            // radius: ['45%', '70%'],
            avoidLabelOverlap: false,  //true labelline线不会重叠
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 3
            },
            label: {
              formatter: (item) => {
                const { data } = item
                return `{c|${data.percentage}}`
              },
              rich: {
                c: {
                  fontSize: 12,
                  color: '#544F4F'
                }
              }
            },
            data: data
          }
        ]
      }
      this.myChart6 = this.$echarts.init(id)
      this.myChart6.clear()
      this.myChart6.setOption(option, true)
      window.addEventListener('resize', () => {
        this.myChart6.resize()
      })
    },
}

}
</script>
<style lang="less" scoped>
.modelRiskStyl {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    .modelTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      .modelTitle {
        font-size: 18px;
        color: #212631;
        font-weight: 700;
      }
      .modelTip {
        display: flex;
        .modelTipLi {
          margin-right: 24px;
          font-size: 12px;
          color: #544f4f;
          display: flex;
          align-items: center;
          .tipQuare {
            width: 10px;
            height: 10px;
            border-radius: 2px;
            margin-right: 10px;
          }
        }
        .modelTipLi:nth-last-child(1) {
          margin-right: 0;
        }
      }
    }
    .modelBottom {
      display: flex;
      height: 160px;
      .modelStyl {
        width: 20%;
        height: 160px;
        margin-right: 16px;
      }
    }
  }
//如果需要修改ui组件样式，需要新起一个类名：例如：aaaSty
.aaaSty{
    ::v-deep .el-dialog__body {
    font-size:12px
}
}
</style>