From 98157ee04cd71a5076d5a723ef5f3a5270affa06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com> Date: Sat, 17 Feb 2018 12:25:02 +0800 Subject: [PATCH] no message Former-commit-id: 421ac77815742836c1b3a9f187ae15ff1f7f2582 Former-commit-id: a811f5632c01cab93f430cc1631e9d6ea458621a Former-commit-id: a02431021c233a8ce569fb267bcb2188b007651f --- src/components/charts/G2/mixins/G2.js | 56 +++---------------- .../charts/G2/mixins/_ChartProps.js | 49 ++++++++++++++++ 2 files changed, 56 insertions(+), 49 deletions(-) create mode 100644 src/components/charts/G2/mixins/_ChartProps.js diff --git a/src/components/charts/G2/mixins/G2.js b/src/components/charts/G2/mixins/G2.js index 90892f6b..c655e3da 100644 --- a/src/components/charts/G2/mixins/G2.js +++ b/src/components/charts/G2/mixins/G2.js @@ -1,60 +1,18 @@ // 所有 G2 图表组件都引用此 mixin import G2 from '@antv/g2' -// import * as DataSet from '@antv/data-set' +import * as DataSet from '@antv/data-set' + +// Chart对象属性参数 初始化的时候使用 +import ChartProps from './_ChartProps' // 关闭 G2 的体验改进计划打点请求 G2.track(false) export default { props: { - // 宽度 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 - }, + // Chart对象属性参数 初始化的时候使用 + ...ChartProps, // 图表数据 此 data 非 官方文档中的 data data: { type: Array, @@ -73,7 +31,7 @@ export default { // 在页面中不需要再引入 直接使用 this.G2 G2, // 数据处理模块 - // DataSet, + DataSet, // 图表实例 chart: null, // 在组件 mounted 后立即初始化图表 diff --git a/src/components/charts/G2/mixins/_ChartProps.js b/src/components/charts/G2/mixins/_ChartProps.js new file mode 100644 index 00000000..3e4f9cc8 --- /dev/null +++ b/src/components/charts/G2/mixins/_ChartProps.js @@ -0,0 +1,49 @@ +export 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 + } +}