no message

Former-commit-id: fa1070f5fcb35fc52abb413635e934c37355e6c6
Former-commit-id: 776e9b6d9de589b0b8cfddd6fb9c344d2e18e1e0
Former-commit-id: 5a91fe2b8da25531e4f0d322d5cb5ab12b9e22be

src/assets/style/theme/default.scss

@@ -67,8 +67,7 @@ $color: #409EFF;
         }
       }
       .el-main {
-        padding-top: 0px;
-        padding-left: 0px;
+        padding: 0px;
         position: relative;
       }
     }

src/components/G2/G2.js

@@ -1,5 +1,63 @@
+import G2 from '@antv/g2'
 export default {
+  data () {
+    return {
+      // 库 在页面中不需要再引入 直接使用 this.G2
+      G2,
+      // 图表实例
+      chart: null,
+      // [图表设置项] 高度
+      height: 300,
+      // [图表设置项] 开启自动填充父元素高度
+      autoHeight: true,
+      // [图表设置项] 自动宽度
+      forceFit: true,
+      // [图表设置项] padding
+      padding: [40, 40, 50, 60]
+    }
+  },
   created () {
-    this.$log('G2', 'created')
+    // 打印信息
+    this.$log('G2', ...[
+      `version ${this.G2.version}`
+    ])
+  },
+  mounted () {
+    setTimeout(() => {
+      this.initHandler()
+    }, 0)
+  },
+  methods: {
+    // 创建图表
+    creatChart () {
+      this.chart = new this.G2.Chart({
+        container: this.$refs.chart,
+        forceFit: this.forceFit,
+        height: this.G2.DomUtil.getHeight(this.$refs.chart),
+        padding: this.padding
+      })
+    },
+    // 设置图表的标题
+    setChartTitle (title) {
+      if (title) {
+        this.chart.guide().text({
+          top: true,
+          position: ['min', 'max'],
+          content: title,
+          style: {
+            fill: '#666', // 文本颜色
+            fontSize: '16', // 文本大小
+            fontWeight: 'bold' // 文本粗细
+          },
+          offsetX: 0,
+          offsetY: 0
+        })
+      }
+    },
+    resize () {
+      if (this.chart) {
+        this.chart.changeSize(this.G2.DomUtil.getWidth(this.$refs.chart), this.G2.DomUtil.getHeight(this.$refs.chart))
+      }
+    }
   }
 }

src/components/G2/Line1.vue

@@ -1,3 +1,47 @@
 <template>
-  <div>G2</div>
+  <div ref="chart" style="height: 100%;"></div>
 </template>
+
+<script>
+import G2Mixin from './G2'
+export default {
+  mixins: [
+    G2Mixin
+  ],
+  methods: {
+    initHandler () {
+      const data = [
+        { year: '1991', value: 3 },
+        { year: '1992', value: 4 },
+        { year: '1993', value: 3.5 },
+        { year: '1994', value: 5 },
+        { year: '1995', value: 4.9 },
+        { year: '1996', value: 6 },
+        { year: '1997', value: 7 },
+        { year: '1998', value: 9 },
+        { year: '1999', value: 13 }
+      ]
+      this.creatChart()
+      this.chart.source(data)
+      this.chart.scale('value', {
+        min: 0
+      })
+      this.chart.scale('year', {
+        range: [0, 1]
+      })
+      this.chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      })
+      this.setChartTitle('历史趋势')
+      this.chart.line().position('year*value')
+      this.chart.point().position('year*value').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      })
+      this.chart.render()
+    }
+  }
+}
+</script>

src/components/core/Container/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-component">
+  <div class="container-component" :class="{responsive}">
     <!-- [card] 卡片容器 -->
     <el-card v-if="type === 'card'">
       <div v-if="$slots.header" slot="header">
@@ -17,11 +17,42 @@
 <script>
 export default {
   props: {
+    // 容器样式
     type: {
       type: String,
       required: false,
       default: 'card'
+    },
+    // 是否开启响应式尺寸变化
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   }
 }
 </script>
+
+<style lang="scss">
+.container-component {
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+@media (min-width: 576px) {
+  // 根据你的需要在这里添加样式
+}
+@media (min-width: 768px) {
+  // 根据你的需要在这里添加样式
+}
+@media (min-width: 992px) {
+  // 根据你的需要在这里添加样式
+}
+// 在大于1920分辨率的时候
+@media (min-width: 1921px) {
+  .container-component.responsive {
+    margin: 0px auto;
+    margin-bottom: 20px;
+    max-width: 1920px - 200px;
+  }
+}
+</style>

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

@@ -1,18 +1,11 @@
 <template>
-  <Container type="ghost" class="demo-chart-index">
+  <Container type="ghost" :responsive="true" class="demo-chart-index">
     <GridLayout
       v-bind="layout"
       @layout-updated="layoutUpdatedHandler">
-      <GridItem
-        v-for="(item, index) in layout.layout"
-        :key="index"
-        v-bind="item"
-        @resize="resizeHandler"
-        @move="moveHandler"
-        @resized="resizedHandler"
-        @moved="movedHandler">
+      <GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
         <el-card>
-          <G2Line1></G2Line1>
+          <G2Line1 ref="G2Line1"></G2Line1>
         </el-card>
       </GridItem>
     </GridLayout>
@@ -43,24 +36,15 @@ export default {
     }
   },
   methods: {
-    layoutUpdatedHandler (newLayout) {
-      console.group('layoutUpdatedHandler')
-      newLayout.forEach(e => {
-        console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
+    resizeHandler (name) {
+      this.$nextTick(() => {
+        this.$refs[name].resize()  
       })
-      console.groupEnd()
     },
-    resizeHandler (i, newH, newW) {
-      this.$log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
-    },
-    moveHandler (i, newX, newY) {
-      this.$log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
-    },
-    resizedHandler (i, newH, newW, newHPx, newWPx) {
-      this.$log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
-    },
-    movedHandler (i, newX, newY) {
-      this.$log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
+    resizedHandler (name) {
+      this.$nextTick(() => {
+        this.$refs[name].resize()  
+      })
     }
   }
 }

static/markdownFiles/article/首页.md

@@ -29,6 +29,7 @@
 * 登陆逻辑
 * 路由鉴权(登陆状态)
 * 简化和统一调试时控制台输出
+* 响应式 `container` 组件(页面容器)
 
 ## 集成的插件/库
 * 剪切板操作库