初步解决了多个图表同时加载的时候卡顿问题

Former-commit-id: ee84d17720b52073c17a693df68a9cc1a323bf02
Former-commit-id: 63a4854cfc87e8bfa532649f3600663be860145b
Former-commit-id: 648a6ec1f165609655c6f8c3549babb535396851

src/components/charts/G2/mixins/G2.js

@@ -35,6 +35,7 @@ export default {
     if (this.autoInit) {
       this.startInit()
     }
+    this.$emit('ready')
   },
   watch: {
     // 数据改变

src/pages/demo/chart/index/index.vue

@@ -4,49 +4,49 @@
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
+          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="chart[0].ready = true"></G2LineBase>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
+          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="chart[1].ready = true"></G2LineStep>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
+          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="chart[2].ready = true"></G2ColumnBase>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
+          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="chart[3].ready = true"></G2BarBase>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
+          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="chart[4].ready = true"></G2PieBase>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
+          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="chart[5].ready = true"></G2NightingaleRoseBase>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
+          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="chart[6].ready = true"></G2RadarBase>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
+          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="chart[7].ready = true"></G2AreaBase>
         </el-card>
       </el-col>
     </el-row>
@@ -65,51 +65,65 @@ export default {
         {
           api: {url: '/api/chart/G2Line', data: {type: 'base'}},
           refName: 'G2LineBase',
+          ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Line', data: {type: 'step'}},
           refName: 'G2LineStep',
+          ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Column', data: {type: 'base'}},
           refName: 'G2ColumnBase',
+          ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
           refName: 'G2BarBase',
+          ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
           refName: 'G2PieBase',
+          ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
           refName: 'G2NightingaleRoseBase',
+          ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
           refName: 'G2RadarBase',
+          ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Area', data: {type: 'base'}},
           refName: 'G2AreaBase',
+          ready: false,
           data: []
         }
       ]
     }
   },
-  mounted () {
+  computed: {
-    // 请求图表数据
+    ready () {
-    setTimeout(() => {
+      return !this.chart.find(e => !e.ready)
-      this.syncData()
+    }
-    }, 1000)
+  },
+  watch: {
+    ready (ready) {
+      if (ready) {
+        this.syncData()
+      }
+    }
   },
   methods: {
     // 请求图表数据