no message

Former-commit-id: f5c40fc8075c0213f9b67dde351a24b326ded340
Former-commit-id: 49e4b22d84089c1e4097bc24c9b2a8933747cea6
Former-commit-id: e6bb925b422085bc03275d7f51d6dada2b87e6d0

src/components/charts/G2/components/NightingaleRose/base.vue

@@ -0,0 +1,35 @@
+<template>
+  <!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+import G2 from '@/components/charts/G2/mixins/G2.js'
+export default {
+  mixins: [
+    G2
+  ],
+  methods: {
+    // 初始化图表
+    init () {
+      // mixin 中提供 creatChart
+      this.creatChart()
+      // 本组件的特殊设置
+      this.chart.source(this.data)
+      this.chart.axis('x', {
+        label: {
+          offset: 12
+        }
+      })
+      this.chart.coord().transpose()
+      this.chart.interval().position('x*y')
+      // 渲染图表
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.data)
+    }
+  }
+}
+</script>

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

@@ -14,7 +14,7 @@ export default {
   // 设置图表的内边距 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_padding
   padding: {
     required: false,
-    default: () => [40, 40, 40, 40]
+    default: () => [30, 40, 50, 50]
   },
   // 设置图表整体的边框和背景样式 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_background
   background: {

src/components/charts/register.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 
+Vue.component('G2BarBase', resolve => { require(['@/components/charts/G2/components/Bar/base.vue'], resolve) })
+
+Vue.component('G2ColumnBase', resolve => { require(['@/components/charts/G2/components/Column/base.vue'], resolve) })
+
 Vue.component('G2LineBase', resolve => { require(['@/components/charts/G2/components/Line/base.vue'], resolve) })
 Vue.component('G2LineStep', resolve => { require(['@/components/charts/G2/components/Line/step.vue'], resolve) })
 
-Vue.component('G2ColumnBase', resolve => { require(['@/components/charts/G2/components/Column/base.vue'], resolve) })
-
-Vue.component('G2BarBase', resolve => { require(['@/components/charts/G2/components/Bar/base.vue'], resolve) })
+Vue.component('G2NightingaleRoseBase', resolve => { require(['@/components/charts/G2/components/NightingaleRose/base.vue'], resolve) })
 
 Vue.component('G2PieBase', resolve => { require(['@/components/charts/G2/components/Pie/base.vue'], resolve) })

src/components/index.js

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

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

@@ -40,7 +40,7 @@
       <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="近年行情"></ChartCardHeader>
-          
+          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
         </el-card>
       </GridItem>
     </GridLayout>
@@ -59,32 +59,34 @@ export default {
         {
           api: {url: '/api/chart/G2Line', data: {type: 'base'}},
           refName: 'G2LineBase',
-          data: [],
-          padding: [30, 40, 50, 50]
+          data: []
         },
         {
           api: {url: '/api/chart/G2Line', data: {type: 'step'}},
           refName: 'G2LineStep',
-          data: [],
-          padding: [30, 40, 50, 50]
+          data: []
         },
         {
           api: {url: '/api/chart/G2Column', data: {type: 'base'}},
           refName: 'G2ColumnBase',
-          data: [],
-          padding: [30, 40, 50, 50]
+          data: []
         },
         {
           api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
           refName: 'G2BarBase',
-          data: [],
-          padding: [30, 40, 50, 50]
+          data: []
         },
         {
           api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
           refName: 'G2PieBase',
           data: [],
           padding: [30, 30, 30, 30]
+        },
+        {
+          api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
+          refName: 'G2NightingaleRoseBase',
+          data: [],
+          padding: [30, 30, 30, 30]
         }
       ],
       layout: {