no message

Former-commit-id: e42b1ce57f595759636bc8e4e42b1eab6bc4e70f
Former-commit-id: 91009871838e2c143836c0baec9c6eeda84ad145
Former-commit-id: 471c0f984124c70409b7ad73e105999fa9e04b8d

src/components/charts/G2/index.js

@@ -0,0 +1,3 @@
+// import Vue from 'vue'
+
+// Vue.component('G2Line1', resolve => { require(['@/components/G2/charts/Line/1.vue'], resolve) })

src/components/index.js

@@ -2,5 +2,5 @@
 import './core'
 // 非核心组件 只是在很多演示页面中用到的组件
 import './demo'
-// 图表组件
-import './G2'
+// 图表组件 G2
+import './charts/G2'

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

@@ -4,19 +4,19 @@
       <GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
         <el-card class="header-in">
           <div slot="header">近年趋势</div>
-          1
+          <G2Line1 ref="G2Line1" :data="chartData.G2Line1"></G2Line1>
         </el-card>
       </GridItem>
       <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
         <el-card class="header-in">
           <div slot="header">人员分布</div>
-          2
+          <G2Pie1 ref="G2Pie1" :data="chartData.G2Pie1"></G2Pie1>
         </el-card>
       </GridItem>
       <GridItem v-bind="layout.layout[2]" @resize="resizeHandler('G2Column1')" @resized="resizedHandler('G2Column1')">
         <el-card class="header-in">
           <div slot="header">人员分布</div>
-          3
+          <G2Column1 ref="G2Column1" :data="chartData.G2Column1"></G2Column1>
         </el-card>
       </GridItem>
     </GridLayout>
@@ -37,3 +37,4 @@ export default {
 <style lang="scss">
 @import './style.scss';
 </style>
+

src/pages/demo/chart/_index/mixins/layout.js

@@ -2,7 +2,6 @@ export default {
   data () {
     return {
       layout: {
-        // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
         layout: [
           {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
           {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'},
@@ -20,11 +19,6 @@ export default {
     }
   },
   methods: {
-    // 更新指定的图表
-    chartResize () {
-      this.$log('chartResize')
-    },
-    // 布局组件发生变化
     layoutUpdatedHandler (newLayout) {
       console.group('layoutUpdatedHandler')
       newLayout.forEach(e => {
@@ -34,11 +28,15 @@ export default {
     },
     // 改变尺寸
     resizeHandler (name) {
-      this.chartResize()
+      this.$nextTick(() => {
+        this.$refs[name].resize()
+      })
     },
     // 改变尺寸完成
     resizedHandler (name) {
-      this.chartResize()
+      this.$nextTick(() => {
+        this.$refs[name].resize()
+      })
     }
   }
 }

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

@@ -1,22 +1,13 @@
 <template>
   <Container type="ghost" :responsive="true" class="demo-chart-index">
     <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
-      <GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
+      <GridItem
+        v-bind="layout.layout[0]"
+        @resize="resizeHandler('G2Line1')"
+        @resized="resizedHandler('G2Line1')">
         <el-card class="header-in">
           <div slot="header">近年趋势</div>
-          <G2Line1 ref="G2Line1" :data="chartData.G2Line1"></G2Line1>
-        </el-card>
-      </GridItem>
-      <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
-        <el-card class="header-in">
-          <div slot="header">人员分布</div>
-          <G2Pie1 ref="G2Pie1" :data="chartData.G2Pie1"></G2Pie1>
-        </el-card>
-      </GridItem>
-      <GridItem v-bind="layout.layout[2]" @resize="resizeHandler('G2Column1')" @resized="resizedHandler('G2Column1')">
-        <el-card class="header-in">
-          <div slot="header">人员分布</div>
-          <G2Column1 ref="G2Column1" :data="chartData.G2Column1"></G2Column1>
+          1
         </el-card>
       </GridItem>
     </GridLayout>
@@ -37,4 +28,3 @@ export default {
 <style lang="scss">
 @import './style.scss';
 </style>
-

src/pages/demo/chart/index/mixins/chart.js

@@ -1,34 +1,27 @@
 export default {
   data () {
-    return {
-      // 数据
-      chartData: {
-        G2Line1: [],
-        G2Pie1: [],
-        G2Column1: []
-      }
-    }
+    return {}
   },
   mounted () {
     // 请求图表数据
-    this.syncData()
+    // this.syncData()
   },
   methods: {
     // 请求图表数据
     syncData () {
-      const api = [
-        {url: '/api/chart/G2Line', data: {code: 1}},
-        {url: '/api/chart/G2Pie', data: {code: 1}},
-        {url: '/api/chart/G2Column', data: {code: 1}}
-      ]
-      this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
-        .then(this.$axios.spread((G2Line1, G2Pie1, G2Column1) => {
-          this.chartData = {
-            G2Line1,
-            G2Pie1,
-            G2Column1
-          }
-        }))
+      // const api = [
+      //   {url: '/api/chart/G2Line', data: {code: 1}},
+      //   {url: '/api/chart/G2Pie', data: {code: 1}},
+      //   {url: '/api/chart/G2Column', data: {code: 1}}
+      // ]
+      // this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
+      //   .then(this.$axios.spread((G2Line1, G2Pie1, G2Column1) => {
+      //     this.chartData = {
+      //       G2Line1,
+      //       G2Pie1,
+      //       G2Column1
+      //     }
+      //   }))
     }
   }
 }

src/pages/demo/chart/index/mixins/layout.js

@@ -2,6 +2,7 @@ export default {
   data () {
     return {
       layout: {
+        // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
         layout: [
           {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
           {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'},
@@ -19,6 +20,11 @@ export default {
     }
   },
   methods: {
+    // 更新指定的图表
+    chartResize () {
+      this.$log('chartResize')
+    },
+    // 布局组件发生变化
     layoutUpdatedHandler (newLayout) {
       console.group('layoutUpdatedHandler')
       newLayout.forEach(e => {
@@ -28,15 +34,11 @@ export default {
     },
     // 改变尺寸
     resizeHandler (name) {
-      this.$nextTick(() => {
-        this.$refs[name].resize()
-      })
+      this.chartResize()
     },
     // 改变尺寸完成
     resizedHandler (name) {
-      this.$nextTick(() => {
-        this.$refs[name].resize()
-      })
+      this.chartResize()
     }
   }
 }

src/router/menu/_chart.js

@@ -21,16 +21,6 @@ export const menu = {
         requiresAuth: true
       },
       component: resolve => { require(['@/pages/demo/chart/index/index.vue'], resolve) }
-    },
-    {
-      title: '图表演示2',
-      icon: 'file-o',
-      path: 'index2',
-      name: 'demo-chart-index2',
-      meta: {
-        requiresAuth: true
-      },
-      component: resolve => { require(['@/pages/demo/chart/index2/index.vue'], resolve) }
     }
   ]
 }