xcx

src/components/brokenLineGraph/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="component">
     <h6 class="title">{{data.title}}</h6>
-    <div id="brokenLineGraph" ref="box"></div>
+    <div :id="'brokenLineGraph' + index" ref="box"></div>
   </div>
 </template>
 
@@ -10,7 +10,7 @@ import G2 from '@antv/g2'
 
 export default {
   name: '',
-  props: ['data'],
+  props: ['data', 'index'],
   data () {
     return {
     }
@@ -27,7 +27,7 @@ export default {
     init () {
       var _that = this
       var chart = new G2.Chart({
-        container: 'brokenLineGraph',
+        container: 'brokenLineGraph' + _that.index,
         forceFit: true,
         width: _that.$refs.box.clientWidth,
         height: 400

src/components/dashboard/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div :id="'dashboard' + index" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data', 'index'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var Shape = G2.Shape
+      // 自定义Shape 部分
+      Shape.registerShape('point', 'pointer', {
+        drawShape: function drawShape (cfg, group) {
+          var center = this.parsePoint({ // 获取极坐标系下画布中心点
+            x: 0,
+            y: 0
+          })
+          // 绘制指针
+          group.addShape('line', {
+            attrs: {
+              x1: center.x,
+              y1: center.y,
+              x2: cfg.x,
+              y2: cfg.y,
+              stroke: cfg.color,
+              lineWidth: 5,
+              lineCap: 'round'
+            }
+          })
+          return group.addShape('circle', {
+            attrs: {
+              x: center.x,
+              y: center.y,
+              r: 8,
+              stroke: cfg.color,
+              lineWidth: 4.5,
+              fill: '#fff'
+            }
+          })
+        }
+      })
+      var chart = new G2.Chart({
+        container: 'dashboard' + _that.index,
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400,
+        padding: [0, 0, 30, 0]
+      })
+      chart.source(_that.data.list)
+
+      chart.coord('polar', {
+        startAngle: -9 / 8 * Math.PI,
+        endAngle: 1 / 8 * Math.PI,
+        radius: 0.75
+      })
+      chart.scale('value', {
+        min: 0,
+        max: 9,
+        tickInterval: 1,
+        nice: false
+      })
+
+      chart.axis('1', false)
+      chart.axis('value', {
+        zIndex: 2,
+        line: null,
+        label: {
+          offset: -16,
+          textStyle: {
+            fontSize: 18,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }
+        },
+        subTickCount: 4,
+        subTickLine: {
+          length: -8,
+          stroke: '#fff',
+          strokeOpacity: 1
+        },
+        tickLine: {
+          length: -17,
+          stroke: '#fff',
+          strokeOpacity: 1
+        },
+        grid: null
+      })
+      chart.legend(false)
+      chart.point().position('value*1').shape('pointer').color('#1890FF').active(false)
+
+      // 绘制仪表盘背景
+      chart.guide().arc({
+        zIndex: 0,
+        top: false,
+        start: [0, 0.945],
+        end: [9, 0.945],
+        style: { // 底灰色
+          stroke: '#CBCBCB',
+          lineWidth: 18
+        }
+      })
+      // 绘制指标
+      chart.guide().arc({
+        zIndex: 1,
+        start: [0, 0.945],
+        end: [_that.data.list[0].value, 0.945],
+        style: {
+          stroke: '#1890FF',
+          lineWidth: 18
+        }
+      })
+      // 绘制指标数字
+      chart.guide().html({
+        position: ['50%', '100%'],
+        html: '<div style="width: 300px;text-align: center;">' + '<p style="font-size: 20px; color: #545454;margin: 0;">' + _that.data.title + '</p>' + '<p style="font-size: 36px;color: #545454;margin: 0;">' + _that.data.list[0].value * 10 + '%</p>' + '</div>'
+      })
+
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/dashboard/page.scss

@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/histogram/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="component">
     <h6 class="title">{{data.title}}</h6>
-    <div id="histogram" ref="box"></div>
+    <div :id="'histogram' + index" ref="box"></div>
   </div>
 </template>
 
@@ -10,7 +10,7 @@ import G2 from '@antv/g2'
 
 export default {
   name: '',
-  props: ['data'],
+  props: ['data', 'index'],
   data () {
     return {
     }
@@ -27,7 +27,7 @@ export default {
     init () {
       var _that = this
       var chart = new G2.Chart({
-        container: 'histogram',
+        container: 'histogram' + _that.index,
         forceFit: true,
         width: _that.$refs.box.clientWidth,
         height: 400

src/components/pieDiagram/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="component">
     <h6 class="title">{{data.title}}</h6>
-    <div id="pieDiagram" ref="box"></div>
+    <div :id="'pieDiagram' + index" ref="box"></div>
   </div>
 </template>
 
@@ -10,7 +10,7 @@ import G2 from '@antv/g2'
 
 export default {
   name: '',
-  props: ['data'],
+  props: ['data', 'index'],
   data () {
     return {
     }
@@ -27,7 +27,7 @@ export default {
     init () {
       var _that = this
       var chart = new G2.Chart({
-        container: 'pieDiagram',
+        container: 'pieDiagram' + _that.index,
         forceFit: true,
         width: _that.$refs.box.clientWidth,
         height: 400

src/components/ringChart/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="component">
     <h6 class="title">{{data.title}}</h6>
-    <div id="ringChart" ref="box"></div>
+    <div :id="'ringChart' + index" ref="box"></div>
   </div>
 </template>
 
@@ -10,7 +10,7 @@ import G2 from '@antv/g2'
 
 export default {
   name: '',
-  props: ['data'],
+  props: ['data', 'index'],
   data () {
     return {
     }
@@ -27,7 +27,7 @@ export default {
     init () {
       var _that = this
       var chart = new G2.Chart({
-        container: 'ringChart',
+        container: 'ringChart' + _that.index,
         forceFit: true,
         width: _that.$refs.box.clientWidth,
         height: 400

src/pages/system/dashboard/index.vue

@@ -13,19 +13,22 @@
     <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>
+          <dashboardList :data="subItem.data" :index="index + '-' + subIndex"></dashboardList>
         </div>
         <div v-if="subItem.type === 'histogram'">
-          <histogram :data="subItem.data"></histogram>
+          <histogram :data="subItem.data" :index="index + '-' + subIndex"></histogram>
         </div>
         <div v-if="subItem.type === 'pieDiagram'">
-          <pieDiagram :data="subItem.data"></pieDiagram>
+          <pieDiagram :data="subItem.data" :index="index + '-' + subIndex"></pieDiagram>
         </div>
         <div v-if="subItem.type === 'brokenLineGraph'">
-          <brokenLineGraph :data="subItem.data"></brokenLineGraph>
+          <brokenLineGraph :data="subItem.data" :index="index + '-' + subIndex"></brokenLineGraph>
         </div>
         <div v-if="subItem.type === 'ringChart'">
-          <ringChart :data="subItem.data"></ringChart>
+          <ringChart :data="subItem.data" :index="index + '-' + subIndex"></ringChart>
+        </div>
+        <div v-if="subItem.type === 'dashboard'">
+          <dashboard :data="subItem.data" :index="index + '-' + subIndex"></dashboard>
         </div>
       </div>
     </div>
@@ -39,6 +42,7 @@ import histogram from '../../../components/histogram/index'
 import pieDiagram from '../../../components/pieDiagram/index'
 import brokenLineGraph from '../../../components/brokenLineGraph/index'
 import ringChart from '../../../components/ringChart/index'
+import dashboard from '../../../components/dashboard/index'
 
 export default {
   name: '',
@@ -60,7 +64,8 @@ export default {
           { 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: [] } },
+          { type: 'dashboard', remark: '仪表盘', data: { title: '参与率', list: [{ value: 5.6 }] } },
+          { type: 'dashboard', remark: '仪表盘', data: { title: '参与率', list: [{ value: 3.1 }] } },
         ],
       ],
     }
@@ -71,6 +76,7 @@ export default {
     pieDiagram,
     brokenLineGraph,
     ringChart,
+    dashboard,
   },
   computed: {
     ...mapState({