vue 使用echarts问题

Question

vue中使用echarts渲染不出来

<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>

打印数据：

页面：

求大佬指点哪里出问题了呢？

Answer 1

可能是mounted的时候没数据，console.log 改成 console.log(JSON.stringify(this.datas) 或者加断点再看输出。

Answer 2

你在console中点击箭头查看详情的时候是点击的时候求的值，这个值并不是log时求的值。看你的截图，如果打印的时候数据已经返回的话，输出的就不应该是[__ob__: Observer]，而应该是类似于(6)["2018-05-02", "2018-05-03", ..., __ob__: Observer]。

这样的写法本身是存在问题的，因为你在mounted的时候无法保证请求已经回来了，所以比较简单的方式是把created里面的内容放到mounted里面，然后在请求回来的时候调用this.drawLine；
而且就目前你展示出来的需求来看，没有必要把数据存在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
        // ...
    }
}

Answer 3

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

设置成全局看看

Answer 4

生命周期其实只是vue创建实例时候按顺序执行的一个一个函数，所以是在macrotask里的，是当前的执行栈，而promise.then会在请求返回的时候加入到microtask里面，所以你在mounted里的时候是还没有数据的，自然也就无法画图了。

另外说一下，axios放在created或者mounted区别不大，但是有可能数据返回的时候还没有渲染完成，microtask是在渲染完成之前的，如果卸载created里的话建议把drawline放在this.$nextTick()里面执行，避免获取不到$refs，当然你直接document.getElementById了也就没什么关系了

Answer 5

感觉vue的生命周期是同步执行的，写在生命周期内的异步操作都会在mounted后执行，其实。。drawLine写在请求回调内就行。