首页 前端知识 用异步执行解决echarts不显示数据

用异步执行解决echarts不显示数据

2024-03-04 10:03:02 前端知识 前端哥 627 137 我要收藏

代码如下

onMounted(() => {
  init()
})
//初始化数据
const data = ref([])
const init = () => {
  axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/pie').then(res => {
    data.value = res.data  })

  // 1通过dom初始化echarts 2ref虚拟化dom
  let mychart = echarts.init(main.value)
  // 数据源
  var option = {
    title: {
      text: '库存剩余',
      x: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '库存',
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: data.value
      }
    ]
  };

  // 数据源给予
  mychart.setOption(option)
}

echarts画图,DOM渲染的时候,echarts实现先从后端获取数据再渲染 ,但是执行顺序是先执行

 // 数据源给予
  mychart.setOption(option)

再执行

axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/pie').then(res => {
    data.value = res.data  })

也就是数据都没

而渲染需要的事数据先有再执行,所以得用同步的方法执行,用async await

const init = async () => {
  await axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/pie').then(res => {
    data.value = res.data    
  })
  // 1通过dom初始化echarts 2ref虚拟化dom
  let mychart = echarts.init(main.value)
   
  // 数据源
  var option = {
    title: {
      text: '库存剩余',
      x: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '库存',
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        data: data.value,

      }
    ]
  };
  // 数据源给予  
  mychart.setOption(option)
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3218.html
标签
评论
发布的文章

Jquery提供的load方法

2024-03-26 08:03:18

echarts:去掉markLine

2024-03-26 08:03:08

jQuery总结

2024-03-11 10:03:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!