Test code for Asynchronous loading of echarts

gistfile1.txt

<template>
  <v-container grid-list-xl>
    <app-header></app-header>
    <v-layout row wrap v-if="loading">
      <v-flex xs12 class="text-xs-center">
        <v-progress-circular
          indeterminate
          class="primary--text"
          :width="7"
          :size="70"></v-progress-circular>
      </v-flex>
    </v-layout>
    <v-layout row wrap v-else offset-xs1>
      <v-flex xs12>
        <v-spacer></v-spacer>
          <template>
            <!-- <div v-if=" i%2 === 0"> -->
                <div class='echarts'>
                  <app-iecharts
                    :option='compileChart("i")'
                    theme="macarons"
                    :resizable='true'
                    :loading="loading"
                  />
                <!-- </div> -->
            </div>
          </template>
        </v-card>
      </v-flex>
    </v-layout>
    <v-spacer></v-spacer>
  </v-container>
</template>
<script>
  export default {
    data () {
      return {
        loading: true
      }
    },
    methods: {
      compileChart (json) {
        var json_str = {"title":[{"text":"Bar - datazoom - slider 示例","subtext":"","left":"auto","top":"auto","textStyle":{"color":"#000","fontSize":18},"subtextStyle":{"color":"#aaa","fontSize":12}}],"toolbox":{"show":true,"orient":"vertical","left":"95%","top":"center","feature":{"saveAsImage":{"show":true,"title":"下载图片"},"restore":{"show":true},"dataView":{"show":true}}},"series_id":7524500,"tooltip":{"trigger":"item","triggerOn":"mousemove|click","axisPointer":{"type":"line"},"formatter":null,"textStyle":{"color":"#fff","fontSize":14}},"series":[{"type":"bar","name":"","data":[26,25,17,9,30,29,8,22,17,6,28,2,27,6,16,6,1,12,15,7,16,27,26,1,24,21,20,19,12,22],"stack":"","barCategoryGap":"20%","label":{"normal":{"show":true,"position":"top","textStyle":{"color":"#000","fontSize":12},"formatter":null},"emphasis":{"show":true,"position":null,"textStyle":{"color":"#fff","fontSize":12}}},"markPoint":{"data":[]},"markLine":{"data":[]},"seriesId":7524500}],"legend":[{"data":[""],"selectedMode":"multiple","show":true,"left":"center","top":"top","orient":"horizontal","textStyle":{"fontSize":12,"color":"#333"}}],"backgroundColor":"#fff","xAxis":[{"name":"","show":true,"nameLocation":"middle","nameGap":25,"nameTextStyle":{"fontSize":14},"axisLabel":{"interval":"auto","rotate":0,"margin":8,"textStyle":{"fontSize":12,"color":"#000"}},"axisTick":{"alignWithLabel":false},"inverse":false,"position":null,"boundaryGap":true,"min":null,"max":null,"data":["0天","1天","2天","3天","4天","5天","6天","7天","8天","9天","10天","11天","12天","13天","14天","15天","16天","17天","18天","19天","20天","21天","22天","23天","24天","25天","26天","27天","28天","29天"],"type":"category"}],"yAxis":[{"name":"","show":true,"nameLocation":"middle","nameGap":25,"nameTextStyle":{"fontSize":14},"axisLabel":{"formatter":"{value} ","rotate":0,"interval":"auto","margin":8,"textStyle":{"fontSize":12,"color":"#000"}},"axisTick":{"alignWithLabel":false},"inverse":false,"position":null,"boundaryGap":true,"min":null,"max":null,"type":"value"}],"color":["#c23531","#2f4554","#61a0a8","#d48265","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3","#f05b72","#ef5b9c","#f47920","#905a3d","#fab27b","#2a5caa","#444693","#726930","#b2d235","#6d8346","#ac6767","#1d953f","#6950a1","#918597","#f6f5ec"],"dataZoom":[{"show":true,"type":"slider","start":50,"end":100,"orient":"horizontal","xAxisIndex":null,"yAxisIndex":null}]}
        console.log(json_str)
        return json_str
      }
    },
    created: function () {
      this.loading = false
      // var that = this
      // setTimeout(function() {
      //   console.log("sleep 5s")
      //   that.loading = false
      // }, 5000)
    }
  }
</script>
<style>
.echarts {
    height: 600px;
  } 
</style>