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项目控制台中文乱码
