no message

Former-commit-id: 3d89a48b4812432b1d8fb172550496ec368fe7b4
Former-commit-id: 2dfe3f42701c9bcba739c617db883cef7b515bf1
Former-commit-id: cf80d852d653158aa395be003359b46830741bb4

src/components/G2/Line/1.vue

@@ -10,6 +10,8 @@ export default {
   ],
   data () {
     return {
+      // 在组件 mounted 后立即初始化图表
+      autoInit: false,
       // [图表设置项] padding
       padding: [30, 40, 50, 50]
     }

src/components/G2/Pie/1.vue

@@ -8,31 +8,34 @@ export default {
   mixins: [
     G2Mixin
   ],
-  methods: {
+  data () {
-    // 初始化图表
+    return {
-    initHandler () {
+      // [图表设置项] padding
-      const { DataView } = this.dataSet
+      padding: [60, 60, 110, 60],
-      const data = [
+      // 在组件 mounted 后立即初始化图表
-        { item: '事例一', count: 40 },
+      // autoInit: false,
-        { item: '事例二', count: 21 },
+      // DataView数据转换设置
-        { item: '事例三', count: 17 },
+      transformSetting: {
-        { item: '事例四', count: 13 },
-        { item: '事例五', count: 9 }
-      ]
-      const dv = new DataView()
-      dv.source(data).transform({
         type: 'percent',
         field: 'count',
         dimension: 'item',
         as: 'percent'
-      })
+      }
+    }
+  },
+  methods: {
+    dvMaker () {
+      return new this.DataSet.DataView().source(this.data).transform(this.transformSetting)
+    },
+    // 初始化图表
+    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(dv, {
+      this.chart.source(this.dvMaker(), {
         percent: {
           formatter: val => {
             val = (val * 100) + '%'
@@ -67,50 +70,16 @@ export default {
           stroke: '#fff'
         })
       this.chart.render()
-      // 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.guide().text({
-      //   top: true,
-      //   position: ['min', 'max'],
-      //   content: this.title,
-      //   style: {
-      //     fill: '#666', // 文本颜色
-      //     fontSize: '16', // 文本大小
-      //     fontWeight: 'bold' // 文本粗细
-      //   },
-      //   offsetX: 0,
-      //   offsetY: 0
-      // })
-      // this.chart.source(this.data)
-      // this.chart.scale('value', {
-      //   min: 0
-      // })
-      // this.chart.scale('year', {
-      //   range: [0, 1]
-      // })
-      // this.chart.tooltip({
-      //   crosshairs: {
-      //     type: 'line'
-      //   }
-      // })
-      // this.chart.line().position('year*value')
-      // this.chart.point().position('year*value').size(4).shape('circle').style({
-      //   stroke: '#fff',
-      //   lineWidth: 1
-      // })
-      // this.chart.render()
     },
     // 数据源改变 重新渲染新的数据
     changeData () {
       if (this.chart) {
         // 已经初始化过图表 更新数据
-        this.chart.changeData(this.data)
+        console.log(1)
+        this.chart.changeData(this.dvMaker())
       } else {
         // 没有图表 新创建一个实例
+        console.log(2)
         this.initHandler()
       }
     }

src/components/G2/mixins/G2.js

@@ -1,5 +1,5 @@
 import G2 from '@antv/g2'
-import * as dataSet from '@antv/data-set'
+import * as DataSet from '@antv/data-set'
 // 关闭 G2 的体验改进计划打点请求
 G2.track(false)
 
@@ -11,12 +11,6 @@ export default {
       required: false,
       default: () => []
     },
-    // 在组件 mounted 后立即初始化图表
-    autoInit: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     // [图表设置项] 高度
     height: {
       type: Number,
@@ -41,9 +35,11 @@ export default {
       // 在页面中不需要再引入 直接使用 this.G2
       G2,
       // 数据处理模块
-      dataSet,
+      DataSet,
       // 图表实例
       chart: null,
+      // 在组件 mounted 后立即初始化图表
+      autoInit: true,
       // [图表设置项] padding
       padding: [40, 40, 40, 40]
     }

src/mock/chart/G2Pie.js

@@ -0,0 +1,20 @@
+import Mock from 'mockjs'
+
+Mock.mock('/api/chart/G2Pie', 'post', ({body, type, url}) => {
+  const _body = JSON.parse(body)
+  switch (_body.code) {
+    case 1:
+      return {
+        code: 0,
+        msg: '请求成功',
+        data: [
+          { item: '分类1', count: 40 },
+          { item: '分类2', count: 21 },
+          { item: '分类3', count: 17 },
+          { item: '分类4', count: 22 }
+        ]
+      }
+    default:
+      return {}
+  }
+})

src/mock/chart/index.js

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

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

@@ -1,24 +1,16 @@
 <template>
   <Container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout v-bind="layout">
+    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
       <GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
-        <el-card>
+        <el-card class="header-in">
           <div slot="header">近年趋势</div>
-          <G2Line1
+          <G2Line1 ref="G2Line1" :data="G2Line1"></G2Line1>
-            ref="G2Line1"
-            :data="G2Line1"
-            title="近年趋势">
-          </G2Line1>
         </el-card>
       </GridItem>
       <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
-        <el-card>
+        <el-card class="header-in">
-          <!-- <G2Line1
+          <div slot="header">人员分布</div>
-            ref="G2Line2"
+          <G2Pie1 ref="G2Pie1" :data="G2Pie1"></G2Pie1>
-            :data="G2Line1"
-            title="近年趋势2">
-          </G2Line1> -->
-          <G2Pie1 ref="G2Pie1"></G2Pie1>
         </el-card>
       </GridItem>
     </GridLayout>

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

@@ -2,7 +2,8 @@ export default {
   data () {
     return {
       // 数据
-      G2Line1: []
+      G2Line1: [],
+      G2Pie1: []
     }
   },
   mounted () {
@@ -13,11 +14,13 @@ export default {
     // 请求图表数据
     syncData () {
       const api = [
-        {url: '/api/chart/G2Line', data: {code: 1}}
+        {url: '/api/chart/G2Line', data: {code: 1}},
+        {url: '/api/chart/G2Pie', data: {code: 1}}
       ]
       this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
-        .then(this.$axios.spread((G2Line1) => {
+        .then(this.$axios.spread((G2Line1, G2Pie1) => {
           this.G2Line1 = G2Line1
+          this.G2Pie1 = G2Pie1
         }))
     }
   }

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

@@ -4,10 +4,7 @@ export default {
       layout: {
         layout: [
           {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
-          {'x': 8, 'y': 9, 'w': 4, 'h': 7, 'i': '1'},
+          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'}
-          {'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '3'},
-          {'x': 4, 'y': 9, 'w': 4, 'h': 7, 'i': '4'}
         ],
         colNum: 12,
         rowHeight: 30,
@@ -21,6 +18,13 @@ export default {
     }
   },
   methods: {
+    layoutUpdatedHandler (newLayout) {
+      console.group('layoutUpdatedHandler')
+      newLayout.forEach(e => {
+        console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
+      })
+      console.groupEnd()
+    },
     // 改变尺寸
     resizeHandler (name) {
       this.$nextTick(() => {

src/pages/demo/chart/index/style.scss

@@ -6,9 +6,15 @@
       @extend %unable-select;
       height: 100%;
       .el-card__body {
-        height: calc(100% - 59px);
+        height: 100%;
         padding: 0px;
       }
+      // 有header的卡片的body高度需要减去header
+      &.header-in {
+        .el-card__body {
+          height: calc(100% - 59px);
+        }
+      }
     }
     .vue-resizable-handle {
       bottom: 6px;