鍍金池/ 問(wèn)答/HTML/ vue 使用echarts問(wèn)題

vue 使用echarts問(wèn)題

vue中使用echarts渲染不出來(lái)

<template>
  <div id="app" class="login_area">
    <div id="myChart" class="echarts"></div>
  </div>
</template>

<script>
  export default {
    name: 'second',
    data () {
      return {
          dataList:[],
          time:[],
          datas:[]
      }
    },
created: function () {
  this.$axios.get("xxxx").then(res => {
    this.dataList=res.data.result.group;
    this.dataList.sort((a,b)=>{
      return b.index - a.index
    });
    for(var value of this.dataList){
        this.time.push(value.recharge_day)
        this.datas.push(Number(value.mount))
    }
  });
},
mounted(){
  this.drawLine();
},
methods: {
  drawLine(){
    let that=this;
    console.log(that.time)
    console.log(that.datas)
    let myChart = this.$echarts.init(document.getElementById('myChart'));
    myChart.setOption({
      color: ['#90bcf3'],
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['收益/元'],
        left: 20,
        top: 20,
        textStyle: {
          color: ['#90bcf3']
        }
      },
      toolbox: {
        show: false,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          name: '日期',
          boundaryGap: false,
          data: that.time,
          axisLine: {
            lineStyle: {
              color: ['#90bcf3']
            }
          },
          axisLabel: {
            textStyle: {
              color: ['#000']
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: ['#90bcf3']
            }
          },
          axisLabel: {
            textStyle: {
              color: ['#000']
            }
          }
        }
      ],
      series: [
        {
          name: '收益/元',
          type: 'line',
          smooth: true,//平滑
          stack: '總量',
          data: that.datas
        }
      ]
    });
  }
}
  }
</script>


<style scoped>
.echarts{
  width: 700px;
  height: 300px;
}
</style>

打印數(shù)據(jù):

clipboard.png

頁(yè)面:

clipboard.png
求大佬指點(diǎn)哪里出問(wèn)題了呢?

回答
編輯回答
幼梔

let myChart = this.$echarts.init(document.getElementById('myChart'));

設(shè)置成全局看看

2017年9月17日 11:14
編輯回答
誮惜顏

你在console中點(diǎn)擊箭頭查看詳情的時(shí)候是點(diǎn)擊的時(shí)候求的值,這個(gè)值并不是log時(shí)求的值。看你的截圖,如果打印的時(shí)候數(shù)據(jù)已經(jīng)返回的話,輸出的就不應(yīng)該是[__ob__: Observer],而應(yīng)該是類似于(6)["2018-05-02", "2018-05-03", ..., __ob__: Observer]

這樣的寫法本身是存在問(wèn)題的,因?yàn)槟阍?code>mounted的時(shí)候無(wú)法保證請(qǐng)求已經(jīng)回來(lái)了,所以比較簡(jiǎn)單的方式是把created里面的內(nèi)容放到mounted里面,然后在請(qǐng)求回來(lái)的時(shí)候調(diào)用this.drawLine
而且就目前你展示出來(lái)的需求來(lái)看,沒(méi)有必要把數(shù)據(jù)存在data里面,畢竟存在data里面還是耗性能的:

mounted () {
    this.$axios.get("xxxx").then(res => {
        let list = res.data.result.group;
        list.sort((a,b)=>{
            return b.index - a.index
        });
        let time = []
        let datas = []
        for(var value of list){
            time.push(value.recharge_day)
            datas.push(Number(value.mount))
        }
        this.drawLine(time, datas)
    });
},

methods: {
    drawLine (time, datas) { // 替換掉里面的that.time和that.datas
        // ...
    }
}
2018年1月3日 03:00
編輯回答
拮據(jù)

可能是mounted的時(shí)候沒(méi)數(shù)據(jù),console.log 改成 console.log(JSON.stringify(this.datas) 或者加斷點(diǎn)再看輸出。

2017年4月14日 23:34
編輯回答
執(zhí)念

感覺(jué)vue的生命周期是同步執(zhí)行的,寫在生命周期內(nèi)的異步操作都會(huì)在mounted后執(zhí)行,其實(shí)。。drawLine寫在請(qǐng)求回調(diào)內(nèi)就行。

2018年8月15日 16:55
編輯回答
愛(ài)是癌

生命周期其實(shí)只是vue創(chuàng)建實(shí)例時(shí)候按順序執(zhí)行的一個(gè)一個(gè)函數(shù),所以是在macrotask里的,是當(dāng)前的執(zhí)行棧,而promise.then會(huì)在請(qǐng)求返回的時(shí)候加入到microtask里面,所以你在mounted里的時(shí)候是還沒(méi)有數(shù)據(jù)的,自然也就無(wú)法畫圖了。

另外說(shuō)一下,axios放在created或者mounted區(qū)別不大,但是有可能數(shù)據(jù)返回的時(shí)候還沒(méi)有渲染完成,microtask是在渲染完成之前的,如果卸載created里的話建議把drawline放在this.$nextTick()里面執(zhí)行,避免獲取不到$refs,當(dāng)然你直接document.getElementById了也就沒(méi)什么關(guān)系了

2017年4月15日 10:50
編輯回答
孤巷

貌似從vue.nextTick也可以入手

2018年2月28日 20:15