no message

Former-commit-id: 3e6434c86b341668215ee62f1bb8a051d3e6cf61
Former-commit-id: 560c230393b7171404bc75faee74ea061a46ade1
Former-commit-id: 9248be31f0fe0e1e123509c7ea90634fe6f92505

src/components/charts/G2/components/Bar/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/index.js

@@ -3,3 +3,4 @@ import Vue from 'vue'
 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) })

src/mock/chart/G2Bar.js

@@ -0,0 +1,35 @@
+import Mock from 'mockjs'
+
+const r = (add = 0) => {
+  return Math.round(Math.random() * 100) + add
+}
+
+const returnMaker = (data = []) => {
+  return {
+    code: 0,
+    msg: '请求成功',
+    data
+  }
+}
+
+Mock.mock('/api/chart/G2Bar', 'post', ({body, type, url}) => {
+  const _body = JSON.parse(body)
+  switch (_body.type) {
+    // 基础折线图
+    case 'base': {
+      const year = ['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
+      const data = year.map(e => ({
+        year: e,
+        value: r()
+      })).map(e => ({
+        x: e.year,
+        y: e.value
+      })).sort((a, b) => {
+        return a.y - b.y
+      })
+      return returnMaker(data)
+    }
+    default:
+      return {}
+  }
+})

src/mock/chart/index.js

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

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

@@ -22,6 +22,13 @@
           <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
         </el-card>
       </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="近年行情"></ChartCardHeader>
+          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
+        </el-card>
+      </GridItem>
     </GridLayout>
   </Container>
 </template>
@@ -52,6 +59,12 @@ export default {
           refName: 'G2ColumnBase',
           data: [],
           padding: [30, 40, 50, 50]
+        },
+        {
+          api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
+          refName: 'G2BarBase',
+          data: [],
+          padding: [30, 40, 50, 50]
         }
       ],
       layout: {
@@ -59,7 +72,8 @@ export default {
         layout: [
           {'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0'},
           {'x': 4, 'y': 0, 'w': 4, 'h': 7, 'i': '1'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'}
+          {'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
+          {'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'}
         ],
         colNum: 12,
         rowHeight: 30,