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

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

其中的数据就是通过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();
 }

就解决了这个问题

你可能感兴趣的:(前端-vue,eahcrts,vue,ajax,异步,异步获取数据)