Problems with vue using echarts

cannot be rendered using echarts in vue

<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: ["-sharp90bcf3"],
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: ["/"],
        left: 20,
        top: 20,
        textStyle: {
          color: ["-sharp90bcf3"]
        }
      },
      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: ["-sharp90bcf3"]
            }
          },
          axisLabel: {
            textStyle: {
              color: ["-sharp000"]
            }
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            lineStyle: {
              color: ["-sharp90bcf3"]
            }
          },
          axisLabel: {
            textStyle: {
              color: ["-sharp000"]
            }
          }
        }
      ],
      series: [
        {
          name: "/",
          type: "line",
          smooth: true,//
          stack: "",
          data: that.datas
        }
      ]
    });
  }
}
  }
</script>


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

print data:

clipboard.png

:

clipboard.png
ask the boss for advice on what went wrong?

Mar.09,2021

when you click the arrow in console to view the details, it is the value calculated by when you click . This value is not the value calculated by log . Look at your screenshot, if the data has been returned when printing, the output should not be [_ _ ob__: Observer] , but should be similar to (6) ["2018-05-02", "2018-05-03",., _ ob__: Observer] .

this way of writing is problematic, because you cannot guarantee that the request has returned when you mounted , so a relatively simple way is to put the contents of created into mounted , and then call this.drawLine when the request comes back.
and according to the requirements you have shown so far, there is no need to store the data in data . After all, the existence of data is still performance-consuming:

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.timethat.datas
        // ...
    }
}

it is possible that there is no data in mounted. Change console.log to console.log (JSON.stringify (this.datas) ) or add breakpoints and then look at the output.


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

)

set it to global view


Lifecycle is actually just a function that vue executes sequentially when creating instances, so it is in macrotask and is the current execution stack, and promise.then will be added to microtask when the request is returned, so when you are in mounted, you will not be able to draw a graph because you do not have data yet.

in addition, there is not much difference between axios in created or mounted, but it is possible that the rendering is not completed when the data is returned. Microtask is before rendering is completed. If you uninstall created, it is recommended to put drawline in this.$nextTick () to avoid getting less than $refs,. Of course, it doesn't matter if you directly document.getElementById.


feels that the life cycle of vue is performed by Synchronize, and all asynchronous operations written in the life cycle are performed after mounted. DrawLine can be written in the request callback.

Menu