vue中引入Echarts异步加载数据更新图表
对于这个问题,刚开始觉得比较简单,但是无法渲染图表后来才发现,我用ajax异步加载数据,当图表渲染的时候,数据还没有拿到,这样没有数据,自然不能渲染图表。找到了一个很笨的方法,欢迎大家赐教!先给出图表例图其中的数据就是通过ajax异步从后台获取贴出代码,这个函数写在methods中,获取到数据后再进行渲染drawlineOne(){var vm = thi...
·
对于这个问题,刚开始觉得比较简单,但是无法渲染图表
后来才发现,我用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();
}
就解决了这个问题
更多推荐
已为社区贡献10条内容
所有评论(0)