李水灵的博客

李水灵的编程之路

vue中引入Echarts异步加载数据更新图表

对于这个问题,刚开始觉得比较简单,但是无法渲染图表
后来才发现,我用ajax异步加载数据,当图表渲染的时候,数据还没有拿到,这样没有数据,自然不能渲染图表。
找到了一个很笨的方法,欢迎大家赐教!
先给出图表例图
这里写图片描述

其中的数据就是通过ajax异步从后台获取

贴出代码,这个函数写在methods中,获取到数据后再进行渲染

drawlineOne(){
      var vm = this;
      var url = 'http://localhost:3000/student/findByGender';
      $.getJSON(url,{gender:'男'},function(data){
        vm.studentMale = {value:data.length,name:'男'};
        $.getJSON(url,{gender:'女'},function(data){
          vm.studentFemale = {value:data.length,name:'女'};
          var myChartOne = vm.$echarts.init(document.getElementById('studentByGender'));
          vm.optionOne.series[0].data.push(vm.studentMale);
          vm.optionOne.series[0].data.push(vm.studentFemale);
          myChartOne.setOption(vm.optionOne);
        })
      });
    }

然后再mounted中进行调用

mounted () {
    this.drawlineOne();
 }

就解决了这个问题

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lb1135909273/article/details/79962631
个人分类: vue
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

vue中引入Echarts异步加载数据更新图表

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭