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();
})
},
``
经验分享 程序员 微信小程序 职场和发展