xcx

src/components/brokenLineGraphGroup/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div :id="'brokenLineGraphGroup' + 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 chart = new G2.Chart({
+        container: 'brokenLineGraphGroup' + _that.index,
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400,
+      })
+      chart.source(_that.data.list, {
+        month: {
+          range: [0, 1]
+        }
+      })
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      })
+      chart.axis('temperature', {
+        label: {
+          formatter: function formatter (val) {
+            return val + '°C'
+          }
+        }
+      })
+      chart.line().position('month*temperature').color('city')
+      chart.point().position('month*temperature').color('city').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/pages/system/dashboard/index.vue

@@ -30,6 +30,9 @@
         <div v-if="subItem.type === 'dashboard'">
           <dashboard :data="subItem.data" :index="index + '-' + subIndex"></dashboard>
         </div>
+        <div v-if="subItem.type === 'brokenLineGraphGroup'">
+          <brokenLineGraphGroup :data="subItem.data" :index="index + '-' + subIndex"></brokenLineGraphGroup>
+        </div>
       </div>
     </div>
   </div>
@@ -43,6 +46,7 @@ import pieDiagram from '../../../components/pieDiagram/index'
 import brokenLineGraph from '../../../components/brokenLineGraph/index'
 import ringChart from '../../../components/ringChart/index'
 import dashboard from '../../../components/dashboard/index'
+import brokenLineGraphGroup from '../../../components/brokenLineGraphGroup/index'
 
 export default {
   name: '',
@@ -67,6 +71,9 @@ export default {
           { type: 'dashboard', remark: '仪表盘', data: { title: '参与率', list: [{ value: 5.6 }] } },
           { type: 'dashboard', remark: '仪表盘', data: { title: '参与率', list: [{ value: 3.1 }] } },
         ],
+        [
+          { type: 'brokenLineGraphGroup', remark: '折线图组合', data: { title: '下单饮品数据', list: [{ month: 'Jan', city: 'Tokyo', temperature: 7 }, { month: 'Jan', city: 'London', temperature: 3.9 }, { month: 'Feb', city: 'Tokyo', temperature: 6.9 }, { month: 'Feb', city: 'London', temperature: 4.2 }, { month: 'Mar', city: 'Tokyo', temperature: 9.5 }, { month: 'Mar', city: 'London', temperature: 5.7 }, { month: 'Apr', city: 'Tokyo', temperature: 14.5 }, { month: 'Apr', city: 'London', temperature: 8.5 }, { month: 'May', city: 'Tokyo', temperature: 18.4 }, { month: 'May', city: 'London', temperature: 11.9 }, { month: 'Jun', city: 'Tokyo', temperature: 21.5 }, { month: 'Jun', city: 'London', temperature: 15.2 }, { month: 'Jul', city: 'Tokyo', temperature: 25.2 }, { month: 'Jul', city: 'London', temperature: 17 }, { month: 'Aug', city: 'Tokyo', temperature: 26.5 }, { month: 'Aug', city: 'London', temperature: 16.6 }, { month: 'Sep', city: 'Tokyo', temperature: 23.3 }, { month: 'Sep', city: 'London', temperature: 14.2 }, { month: 'Oct', city: 'Tokyo', temperature: 18.3 }, { month: 'Oct', city: 'London', temperature: 10.3 }, { month: 'Nov', city: 'Tokyo', temperature: 13.9 }, { month: 'Nov', city: 'London', temperature: 6.6 }, { month: 'Dec', city: 'Tokyo', temperature: 9.6 }, { month: 'Dec', city: 'London', temperature: 4.8 }] } },
+        ],
       ],
     }
   },
@@ -77,6 +84,7 @@ export default {
     brokenLineGraph,
     ringChart,
     dashboard,
+    brokenLineGraphGroup,
   },
   computed: {
     ...mapState({