no message

Former-commit-id: 351cb18e85e0391823c64082aef024e2ba526683
Former-commit-id: 0f646aa79d2a15d0cf92c536c260780221a79657
Former-commit-id: e5ee866a542a3d4f9392362400663643bdcdca02

src/components/charts/G2/mixins/G2.js

@@ -8,35 +8,64 @@ G2.track(false)
 
 export default {
   props: {
-    // 图表数据
-    data: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    // 宽度
+    // 宽度 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_width
     width: {
       type: Number,
       required: false,
       default: 400
     },
-    // 高度
+    // 高度 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_height
     height: {
       type: Number,
       required: false,
       default: 300
     },
+    // 设置图表的内边距 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_padding
+    padding: {
+      required: false,
+      default: () => [40, 40, 40, 40]
+    },
+    // 设置图表整体的边框和背景样式 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_background
+    background: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    // 图表绘图区域的边框和背景样式 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_plotBackground
+    plotBackground: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    // 图表的宽度自适应开关 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_forceFit
+    forceFit: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 图表动画开关 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_animate
+    animate: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 设置设备像素比  http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_pixelRatio
+    pixelRatio: {
+      type: Number,
+      required: false,
+      default: window.devicePixelRatio
+    },
+    // 图表数据 此 data 非 官方文档中的 data
+    data: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     // 高度 开启自动填充父元素 (非G2自带)
     autoHeight: {
       type: Boolean,
       required: false,
       default: false
-    },
-    // 自动宽度 建议为 true
-    forceFit: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   data () {
@@ -48,9 +77,7 @@ export default {
       // 图表实例
       chart: null,
       // 在组件 mounted 后立即初始化图表
-      autoInit: true,
-      // padding
-      padding: [40, 40, 40, 40]
+      autoInit: true
     }
   },
   mounted () {
@@ -74,15 +101,24 @@ export default {
       this.chart = new this.G2.Chart({
         // 对应图表的 DOM 容器
         container: this.$refs.chart,
-        // 指定图表的宽度，单位为 'px'，当 forceFit: true 时宽度配置不生效
+        // 指定图表的宽度
         width: this.width,
-        // 自动宽度
-        forceFit: this.forceFit,
         // 高度
         // 设置 autoHeight = true 后取 $refs.chart 的高度
         // 设置 autoHeight = false 后取 this.height
         height: this.autoHeight ? this.G2.DomUtil.getHeight(this.$refs.chart) : this.height,
-        padding: this.padding
+        // 设置图表的内边距
+        padding: this.padding,
+        // 设置图表整体的边框和背景样式
+        background: this.background,
+        // 图表绘图区域的边框和背景样式
+        plotBackground: this.plotBackground,
+        // 自动宽度
+        forceFit: this.forceFit,
+        // 动画开关
+        animate: this.animate,
+        // 设置设备像素比
+        pixelRatio: this.pixelRatio
       })
     },
     // 重绘大小