vue多实例情况下eacharts的异步获取数据

淩亂°似流年 2022-05-23 13:04 184阅读 0赞

html就不写了，自行解决吧，下面写写js

一：首先在methods中写一个模型：

methods()\{

huitu\_yxqs()\{  
  var myChart5 = echarts.init(document.getElementById('qushi\_fx'));  
  myChart5.setOption(\{  
            title: \{  
                text: '营销趋势分析'  
            \},  
            tooltip: \{\},  
            legend: \{  
                data:\['收费金额','预交款金额'\],  
                orient:'vertical',  
                right:0,  
                top:20  
            \},  
            xAxis: \{  
                data: this.yxqs\_xAxis  //这里是动态加载的数据--其中yxqs\_xAxis需要在data中定义  
            \},  
            yAxis: \{\},  
            series: this.yxqs\_series  //这里是动态加载的数据--其中yxqs\_series 需要在data中定义  
        \});  
  \},

二，在事件中post请求数据并画图

data\_cha()\{

let that=this  
      $.post("/count/index", \{ type: 1, data2: this.value2 \},  
            function(data) \{  
            //把异步获取的数据更新给模型  
            that.yxqs\_xAxis=data.data.yingxiaoqushi.date  
            let nu=\[\]  
            nu.push(data.data.yingxiaoqushi.shoufei)  
            nu.push(data.data.yingxiaoqushi.yujiao)  
            that.yxqs\_series=nu  
            that.huitu\_yxqs()  //这里在更新完数据后调用绘图函数来画图  
          //console.log(data)  
            \})