Echarts数据渲染并循环遍历

HTML 

 <!-- echart图表 -->
    <div class="echart_box" v-for="(item, index) in chartList" :key="index">
      <div class="echart_con">
        <div>
          审批中(件):<span>{{ item.applyd }}</span>
        </div>
        <div>
          已通过(件):<span>{{ item.agree }}</span>
        </div>
        <div>
          已拒绝(件):<span>{{ item.closed }}</span>
        </div>
      </div>
      <div class="pie">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div class="main1" style="width: 100%; height: 200px"></div>
      </div>
    </div>

注意：Echarts图表要放一个具有大小的盒子中

JS

 //初始化数据
    initData() {
      workStatistics({ id: this.$route.query.id }).then(res => {
        this.chartList = res.data // 接口返回的数据
        console.log('chartList=', this.chartList)
        let chartList = this.chartList
        let titleText = this.chartList.map(item => item.keyName)
        console.log('titleText=', titleText) //标题
        this.$nextTick(function () {
       
            // 基于准备好的dom，初始化echarts实例
            var roseCharts = document.getElementsByClassName('main1')
            //循环元素
            for (var i = 0; i < chartList.length; i++) {
              //初始化每一个图表
              var myChart = echarts.init(roseCharts[i]) // 绘制图表
              var option = {
                color: ['#ffc400', '#009900', '#FF0000'],
                title: {
                  text: chartList[i].applyTypeName + '（件）' + chartList[i].num, //主标题
                  top: '7', //标题距离图标的位置
                  textStyle: {
                    fontSize: 14 //标题的样式内容
                  },
                  // subtext: chartList[i].num, //副标题
                  x: 'center' //x轴方向对齐方式
                },
                tooltip: {
                  //提示弹框
                  trigger: 'item', //item表示图像触发
                  triggerOn: 'mousemove', //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                  orient: 'vertical',
                  bottom: 'bottom',
                  data: ['审批中', '已通过', '已拒绝']
                },
                series: [
                  {
                    name: '审批统计',
                    type: 'pie',
                    radius: '41%',
                    center: ['50%', '50%'],
                    label: {
                      fontWeight: 'bold' //统计图提示字样式
                    },
                    data: [
                      { value: chartList[i].applyd, name: '审批中' },
                      { value: chartList[i].agree, name: '已通过' },
                      { value: chartList[i].closed, name: '已拒绝' }
                    ],
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
              //初始化表格
              myChart.setOption(option)
              //监听，根据视口变化动态从新渲染表格
              window.addEventListener('resize', function () {
                //修改首次进入时图的宽度
                setTimeout(function () {
                  $(myCharts).resize()
                }, 200)
                // myChart.resize()
              })
            }
         
        })
      })
    },

注意：在方法中如果不使用 this.$nextTick(function () {}将其包裹会出现页面首次加载图表不显示问题，得多次加载次出现，

如果页面加载图表显示不全的情况下需要计算图表宽高

参考内容地址：解决首次加载echarts折线图（柱状图）时，图不能正常展示问题_蓝_蓝的博客-CSDN博客_echarts第一次不加载

//修改首次进入时图的宽度
setTimeout(function(){
     $(myCharts).resize();     
},200)
// 当浏览器窗口大小发生改变的时候修改图标的大小
$(window).resize(function(){
   $(myCharts).resize();
});