no message

Former-commit-id: dd09d6b1c896f1ed594f452ba29c47421e827dd1
Former-commit-id: 00c0180c258f09256e70d19f33e3db0ef5da58d2
Former-commit-id: 4cda50a2b215586ea6696c2d91627acae23164f5

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

@@ -0,0 +1,32 @@
+<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.scale('y', {
+        tickInterval: 20
+      })
+      this.chart.interval().position('x*y')
+      // 渲染图表
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.data)
+    }
+  }
+}
+</script>

src/components/charts/index.js

@@ -2,3 +2,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) })

src/mock/chart/G2Column.js

@@ -0,0 +1,33 @@
+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/G2Column', '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
+      }))
+      return returnMaker(data)
+    }
+    default:
+      return {}
+  }
+})

src/mock/chart/G2Line.js

@@ -15,6 +15,7 @@ const returnMaker = (data = []) => {
 Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
   const _body = JSON.parse(body)
   switch (_body.type) {
+    // 基础折线图
     case 'base': {
       let last = 0
       const year = ['1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999']
@@ -32,6 +33,7 @@ Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
       last = 0
       return returnMaker(data)
     }
+    // 阶梯折线图
     case 'step': {
       const month = ['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
       const data = month.map(e => ({

src/mock/chart/index.js

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

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

@@ -2,17 +2,24 @@
   <Container type="ghost" :responsive="true" class="demo-chart-index">
     <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[0]" @resized="handleResized('G2LineBase0')">
+      <GridItem v-bind="layout.layout[0]" @resized="handleResized('G2LineBase')">
         <el-card class="header-in">
           <ChartCardHeader slot="header" title="近年行情" @refresh="handleRefreshData(0)"></ChartCardHeader>
-          <G2LineBase ref="G2LineBase0" v-bind="chart[0]"></G2LineBase>
+          <G2LineBase ref="G2LineBase" v-bind="chart[0]"></G2LineBase>
         </el-card>
       </GridItem>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[1]" @resized="handleResized('G2LineStep1')">
+      <GridItem v-bind="layout.layout[1]" @resized="handleResized('G2LineStep')">
         <el-card class="header-in">
           <ChartCardHeader slot="header" title="近年行情" @refresh="handleRefreshData(1)"></ChartCardHeader>
-          <G2LineStep ref="G2LineStep1" v-bind="chart[1]"></G2LineStep>
+          <G2LineStep ref="G2LineStep" v-bind="chart[1]"></G2LineStep>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[2]" @resized="handleResized('G2ColumnBase')">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" title="近年行情" @refresh="handleRefreshData(2)"></ChartCardHeader>
+          <G2ColumnBase ref="G2ColumnBase" v-bind="chart[2]"></G2ColumnBase>
         </el-card>
       </GridItem>
     </GridLayout>
@@ -37,6 +44,11 @@ export default {
           api: {url: '/api/chart/G2Line', data: {type: 'step'}},
           data: [],
           padding: [30, 40, 50, 50]
+        },
+        {
+          api: {url: '/api/chart/G2Column', data: {type: 'base'}},
+          data: [],
+          padding: [30, 40, 50, 50]
         }
       ],
       layout: {