闭包的使用（一）

最新推荐文章于 2024-09-17 13:42:29 发布

大浪淘沙1024

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量160

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45379180/article/details/140319246

版权

背景：循环出来的ecahrs页面变化的时候，图像由大变小不能均匀变化
经过分析是： 百分比的问题，5个是20% 不是25%，但是闭包的使用是正确的，防止循环的时候，不能变化
在这里插入图片描述
生成echars:

setEchars(num) {
  let chartDom = document.getElementById(`main_${num}`);
  let myChart = echarts.init(chartDom);
  let option;

  option = {
    legend: {
      orient: 'vertical',
      left: 'left',
      bottom:0,
      selectedMode: false,
      formatter: function (name) {
        if(name == '已完成') {
          // 获取到data 进行计算
          return name +'10%';
        }else if(name == '未完成') {
          return name + '20%';
        }
      },
      data: [
        {
          name: '已完成',
        },
        {
          name: '未完成',
        }
      ]
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '65%',
        data: [
          { value: 10, name: '超期完成',itemStyle:{color:'#a90000'} },
          { value: 20, name: '未完成' ,itemStyle:{color:'#337ab7'}},
          { value: 30, name: '已完成' ,itemStyle:{color:'#a90000'}},
        ],
        label: {
          position: 'inner',
          fontSize: 10,
          formatter: '{b}: {c},\n{d}%'
        },
      }
    ]
  };
  option && myChart.setOption(option);
  return myChart;
},

错误代码：window.onresize

this.$nextTick(async ()=>{
      let list = []
      for(let i=1; i<6; i++) {
        let myChart =await this.setEchars(i)
        list.push(myChart)
      }
      window.onresize = function() {
		   for(let i =0; i<list.length; i++) {
		     list[i].resize();
		   }
	  }
    })

正确代码：闭包+window.addEventListener(‘resize’,()=>{})

this.$nextTick(async ()=>{
  let list = []
  for(let i=1; i<6; i++) {
    let myChart =await this.setEchars(i)
    list.push(myChart)
  }
  window.addEventListener('resize',()=>{
    for(var i = 0; i < list.length; i++){
      ((e)=>{
        setTimeout(()=>{
          list[e].resize();
        },100)
      })(i)
    }
  })

})