[JavaScript知识库]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();
})
},
``