no message

Former-commit-id: a686cbec6aa82ccf0a5a2f738602d72ff3fa00e5
Former-commit-id: 7e986278ddb45ad7f2373e759f923148f92a3981
Former-commit-id: 4efa4699c64d12049ead46e050e95d495364516b

src/components/G2/charts/Column/1.vue

@@ -0,0 +1,47 @@
+<template>
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+import G2Mixin from '@/components/G2/mixins/G2.js'
+export default {
+  mixins: [
+    G2Mixin
+  ],
+  data () {
+    return {
+      // 在组件 mounted 后立即初始化图表
+      // autoInit: false,
+      // [图表设置项] padding
+      padding: [30, 40, 50, 50]
+    }
+  },
+  methods: {
+    // 初始化图表
+    initHandler () {
+      this.chart = new this.G2.Chart({
+        container: this.$refs.chart,
+        forceFit: this.forceFit,
+        height: this.G2.DomUtil.getHeight(this.$refs.chart),
+        padding: this.padding
+      })
+      this.chart.source(this.data)
+      this.chart.scale('sales', {
+        tickInterval: 20
+      })
+      this.chart.interval().position('year*sales')
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      if (this.chart) {
+        // 已经初始化过图表 更新数据
+        this.chart.changeData(this.data)
+      } else {
+        // 没有图表 新创建一个实例
+        this.initHandler()
+      }
+    }
+  }
+}
+</script>

src/components/G2/index.js

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

src/mock/chart/G2Column.js

@@ -0,0 +1,24 @@
+import Mock from 'mockjs'
+
+Mock.mock('/api/chart/G2Column', 'post', ({body, type, url}) => {
+  const _body = JSON.parse(body)
+  switch (_body.code) {
+    case 1:
+      return {
+        code: 0,
+        msg: '请求成功',
+        data: [
+          { year: '1951 年', sales: 38 },
+          { year: '1952 年', sales: 52 },
+          { year: '1956 年', sales: 61 },
+          { year: '1957 年', sales: 145 },
+          { year: '1958 年', sales: 48 },
+          { year: '1959 年', sales: 38 },
+          { year: '1960 年', sales: 38 },
+          { year: '1962 年', sales: 38 }
+        ]
+      }
+    default:
+      return {}
+  }
+})

src/mock/chart/index.js

@@ -1,2 +1,3 @@
 import './G2Line'
 import './G2Pie'
+import './G2Column'

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

@@ -4,13 +4,19 @@
       <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="G2Line1"></G2Line1>
+          <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="G2Pie1"></G2Pie1>
+          <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>
         </el-card>
       </GridItem>
     </GridLayout>

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

@@ -2,8 +2,11 @@ export default {
   data () {
     return {
       // 数据
+      chartData: {
         G2Line1: [],
-      G2Pie1: []
+        G2Pie1: [],
+        G2Column1: []
+      }
     }
   },
   mounted () {
@@ -15,12 +18,16 @@ export default {
     syncData () {
       const api = [
         {url: '/api/chart/G2Line', data: {code: 1}},
-        {url: '/api/chart/G2Pie', 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) => {
-          this.G2Line1 = G2Line1
-          this.G2Pie1 = G2Pie1
+        .then(this.$axios.spread((G2Line1, G2Pie1, G2Column1) => {
+          this.chartData = {
+            G2Line1,
+            G2Pie1,
+            G2Column1
+          }
         }))
     }
   }

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

@@ -4,7 +4,8 @@ export default {
       layout: {
         layout: [
           {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'}
+          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'},
+          {'x': 0, 'y': 9, 'w': 5, 'h': 7, 'i': '2'}
         ],
         colNum: 12,
         rowHeight: 30,