echarts中使用axios传数据
在一个可视化的项目中需要用axios与echarts配合来完成数据可视化,但有个问题是在对接的时候用axios虽然可以改变vue里data中数据的值,但在echarts中却获取不到
这是因为axios是异步的,如果我们将两者分开使用的化echarts会先根据data中的数据创建canvas,这个canvas不是响应式的,这时data中的数据改变不会影响echarts的渲染,因此,我们要将echarts执行的函数放到axios的异步操作中去,让data先获得数据,echarts再执行渲染操作
mounted:function(){ this.begin(); }, methods:{ begin(){ axios.get(http://java-1-yunzheng.natapp1.cc//xinchuang/project/projectType).then(res=>{ res = res.data.data; let typearr = []; let languagearr = []; res.forEach(e => { if(server in e){ let obj = { }; obj.name = e.server; obj.value = e.count; typearr.push(obj); } if(language in e ||languageB in e){ let obj = { }; language in e ? obj.name = e.language:obj.name = e.languageB; obj.value = e.count; languagearr.push(obj); } }); typearr[2].selected = true; this.typeArr = typearr; this.languageArr = languagearr this.mychart(); //执行渲染画布的函数 },err =>{ this.mychart(); }) }, ``
上一篇:
IDEA上Java项目控制台中文乱码