xcx

src/components/brokenLineGraph/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="brokenLineGraph" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'brokenLineGraph',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list)
+      chart.scale('y', {
+        min: 0
+      })
+      chart.scale('x', {
+        range: [0, 1]
+      })
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      })
+      chart.line().position('x*y')
+      chart.point().position('x*y').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      })
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss"
+</style>

src/components/brokenLineGraph/page.scss

@@ -0,0 +1,28 @@
+
+.component{
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/dashboardList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboardList">
     <ul class="flex-h">
-      <li class="flex-item" v-for="(item,index) in data" :key="index">
+      <li class="flex-item" v-for="(item,index) in data.list" :key="index">
         <div>
           <div class="centerLabel">
             <span>{{item.name}}</span>

src/components/ringChart/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="ringChart" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'ringChart',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list, {
+        percent: {
+          formatter: function formatter (val) {
+            val = val * 100 + '%'
+            return val
+          }
+        }
+      })
+      chart.coord('theta', {
+        radius: 0.75,
+        innerRadius: 0.6
+      })
+      chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      })
+      var num = 0
+      for (var n = 0; n < _that.data.list.length; n++) {
+        num += _that.data.list[n].count
+      }
+      // 辅助文本
+      chart.guide().html({
+        position: ['50%', '50%'],
+        html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">' + _that.data.title + '<br><span style="color:#8c8c8c;font-size:20px">' + num + '</span></div>',
+        alignX: 'middle',
+        alignY: 'middle'
+      })
+      var interval = chart.intervalStack().position('percent').color('item').label('percent', {
+        formatter: function formatter (val, item) {
+          return item.point.item + ': ' + val
+        }
+      }).tooltip('item*percent', function (item, percent) {
+        percent = percent * 100 + '%'
+        return {
+          name: item,
+          value: percent
+        }
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      })
+      chart.render()
+      interval.setSelected(_that.data.list[0])
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/ringChart/page.scss

@@ -0,0 +1,28 @@
+
+.component{
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/dashboard/index.vue

@@ -10,26 +10,25 @@
         </el-option>
       </el-select>
     </div>
-    <div class="top flex-h">
-      <div class="flex-item" v-for="(item,index) in topData" :key="index">
-        <div v-if="item.type === 'dashboardList'">
-          <dashboardList :data="item.data"></dashboardList>
+    <div class="flex-h" v-for="(item,index) in pageData" :key="index">
+      <div class="flex-item" v-for="(subItem,subIndex) in item" :key="subIndex">
+        <div v-if="subItem.type === 'dashboardList'">
+          <dashboardList :data="subItem.data"></dashboardList>
         </div>
-      </div>
-    </div>
-    <div class="body flex-h">
-      <div class="flex-item" v-for="(item,index) in bodyData" :key="index">
-        <div v-if="item.type === 'histogram'">
-          <histogram :data="item.data"></histogram>
+        <div v-if="subItem.type === 'histogram'">
+          <histogram :data="subItem.data"></histogram>
+        </div>
+        <div v-if="subItem.type === 'pieDiagram'">
+          <pieDiagram :data="subItem.data"></pieDiagram>
+        </div>
+        <div v-if="subItem.type === 'brokenLineGraph'">
+          <brokenLineGraph :data="subItem.data"></brokenLineGraph>
+        </div>
+        <div v-if="subItem.type === 'ringChart'">
+          <ringChart :data="subItem.data"></ringChart>
         </div>
-        <template v-if="item.type === 'pieDiagram'">
-          <pieDiagram :data="item.data"></pieDiagram>
-        </template>
       </div>
     </div>
-    <div class="bottom flex-h">
-      3
-    </div>
   </div>
 </template>
 
@@ -38,6 +37,8 @@ import { mapState } from 'vuex'
 import dashboardList from '../../../components/dashboardList/index'
 import histogram from '../../../components/histogram/index'
 import pieDiagram from '../../../components/pieDiagram/index'
+import brokenLineGraph from '../../../components/brokenLineGraph/index'
+import ringChart from '../../../components/ringChart/index'
 
 export default {
   name: '',
@@ -46,69 +47,30 @@ export default {
       postData: {
         caseid: ''
       },
-      topData: [{
-        type: 'dashboardList', // 列表面板
-        data: [{
-          name: '会员总数',
-          value: '1000',
-        }, {
-          name: '课程预约总量',
-          value: '1000',
-        }, {
-          name: '饮品下单总量',
-          value: '1000',
-        }]
-      }],
-      bodyData: [{
-        type: 'histogram', // 柱状图
-        data: {
-          title: '今日数据',
-          list: [{
-            x: '推荐会员新增',
-            y: 38
-          }, {
-            x: '课程数',
-            y: 52
-          }, {
-            x: '预约数',
-            y: 61
-          }, {
-            x: '到场人次',
-            y: 145
-          }]
-        },
-      }, {
-        type: 'pieDiagram', // 扇形图
-        data: {
-          title: '明日课程预约数据',
-          list: [{
-            item: '小小体验官',
-            count: 40,
-            percent: 0.4
-          }, {
-            item: '哈他瑜伽',
-            count: 52,
-            percent: 0.52
-          }, {
-            item: '小小飞行家',
-            count: 8,
-            percent: 0.08
-          }]
-        },
-      }],
-      bottomData: [{
-        type: 'brokenLineGraph', // 折线图
-        data: [],
-      }, {
-        type: 'ringChart', // 环形图
-        data: [],
-      }],
+      pageData: [
+        [
+          { type: 'dashboardList', remark: '列表面板', data: { title: '', list: [{ name: '会员总数', value: '1000', }, { name: '课程预约总量', value: '1000', }, { name: '饮品下单总量', value: '1000', }] } }
+        ],
+        [
+          { type: 'histogram', remark: '柱状图', data: { title: '今日数据', list: [{ x: '推荐会员新增', y: 38 }, { x: '课程数', y: 52 }, { x: '预约数', y: 61 }, { x: '到场人次', y: 145 }] } },
+          { type: 'pieDiagram', remark: '扇形图', data: { title: '明日课程预约数据', list: [{ item: '小小体验官', count: 40, percent: 0.4 }, { item: '哈他瑜伽', count: 52, percent: 0.52 }, { item: '小小飞行家', count: 8, percent: 0.08 }] } }
+        ],
+        [
+          { type: 'brokenLineGraph', remark: '折线图', data: { title: '下单饮品数据', list: [{ x: '09/05', y: 3 }, { x: '09/06', y: 4 }, { x: '09/07', y: 3.5 }, { x: '09/08', y: 5 }, { x: '09/09', y: 4.9 }, { x: '09/10', y: 6 }, { x: '09/11', y: 7 }, { x: '09/12', y: 9 }, { x: '09/13', y: 13 }] } },
+          { type: 'ringChart', remark: '环形图', data: { title: '本月课程预约', list: [{ item: '健身课程', count: 40, percent: 0.4 }, { item: '社交课程', count: 21, percent: 0.21 }, { item: '教育课程', count: 17, percent: 0.17 }, { item: '健康课程', count: 13, percent: 0.13 }, { item: '艺术课程', count: 9, percent: 0.09 }] } },
+        ],
+        [
+          { type: '', remark: '', data: { title: '', list: [] } },
+        ],
+      ],
     }
   },
   components: {
     dashboardList,
     histogram,
     pieDiagram,
+    brokenLineGraph,
+    ringChart,
   },
   computed: {
     ...mapState({