应用背景

mounted(){
    get_data(){}，
    set_echarts(){
          //在这里面需要用到get_data()中获取的后端数据
        
},

}

问题是axios请求时异步请求，在请求响应回来前，echarts就已经完成了创建了。此时请求还没有回来，所以图表就没有数据了。解决的方法就是让获取数据请求变成同步的，拿到数据后在创建echarts图表对象。

例子

1、图表指定标签

 <div id="first-line-left" style="height: 220px;width: 500px">
        </div>

2、vue中函数设置

 export default {
    name: 'LogAnalyse',
    data () {
      return {
        pie_data: []
      }
    },
    mounted () {
      this.firstleft()
    },

    methods: {
      //饼状图
      firstleft () {
        //获取数据
        let pie_data = this.get_pie_data()
        //对于promise数据，需要通过then来获取里面的数据
        pie_data.then(res => {
          this.pie_data=res.data.data
          let myChart = echarts.init(document.getElementById('first-line-left'))
          // 绘制图表
          var option = {
            title: { text: '告警类型占比' },
            series: [
              {
                type: 'pie',
                data: this.pie_data
              }
            ]
          }
          myChart.setOption(option)
        })

      },
      //将请求由异步变成同步
       get_pie_data (pie = 0, number = 100) {
        return new Promise((resolve, reject) => {
          axios({
            url: this.$settings.base_url + `/user/logdata/?number=${number}&type=${pie}`,
            method: 'post'
          }).then(res => {
            resolve(res)
          }).catch(error => {
            reject(error)
          })
        })
      }
    }
  }