添加柱状图类型

src/views/main/baseinfo/student.vue

@@ -1,5 +1,13 @@
 <template>
-  <el-card header="学员变动">
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>学员变动</span>
+      <el-button
+        @click="isHistogram = !isHistogram"
+        style="float: right; padding: 3px 0"
+        type="text"
+      >{{isHistogram ? '学员转化漏斗图' : '学员柱状图'}}</el-button>
+    </div>
     <statistic class="statistic" :cols="0">
       <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
         <span>
@@ -13,15 +21,18 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram style="width: 100%;" height="350px" :data="chartData"></ve-histogram>
+    <ve-histogram v-if="isHistogram" style="width: 100%;" height="345px" :data="chartData"></ve-histogram>
+    <ve-funnel v-else style="width: 100%;" height="345px" :data="funnelData"></ve-funnel>
   </el-card>
 </template>
 <script>
 import countTo from 'vue-count-to'
 import veHistogram from 'v-charts/lib/histogram.common'
+import veFunnel from 'v-charts/lib/funnel.common'
 export default {
   props: ['data'],
   components: {
+    've-funnel': veFunnel,
     've-histogram': veHistogram,
     'count-to': countTo
   },
@@ -52,11 +63,23 @@ export default {
         columns: ['月份', ...values.map(item => item.title)],
         rows: Object.values(months)
       }
+    },
+    funnelData() {
+      return {
+        columns: ['状态', '数值'],
+        rows: [
+          { '状态': '展示', '数值': 900 },
+          { '状态': '访问', '数值': 600 },
+          { '状态': '点击', '数值': 300 },
+          { '状态': '订单', '数值': 100 }
+        ]
+      }
     }
   },
   data () {
     return {
       active: 'NEWLY_STUDENT_NUM',
+      isHistogram: true,
     }
   },
 }