no message

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

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>