From 55b344f84ca57b278cd6aab2f83665306cc3bae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com> Date: Mon, 29 Jan 2018 14:11:38 +0800 Subject: [PATCH] no message Former-commit-id: 558e1ab1c2372b618ad3efdb6b3fe3bac813c686 Former-commit-id: c8d48cdd1c06bd537dd78078d76401bb374e6ed9 Former-commit-id: bd727ab8e5bd014afb10dbbe56f7a3f2c876fb28 --- src/components/G2/Line/1.vue | 20 ++++++++++++++-- src/components/G2/mixins/G2.js | 43 ++++++++-------------------------- 2 files changed, 28 insertions(+), 35 deletions(-) diff --git a/src/components/G2/Line/1.vue b/src/components/G2/Line/1.vue index 7c296ffe..1265f613 100644 --- a/src/components/G2/Line/1.vue +++ b/src/components/G2/Line/1.vue @@ -11,8 +11,24 @@ export default { methods: { // 初始化图表 initHandler () { - this.creatChart() - this.setChartTitle() + this.chart = new this.G2.Chart({ + container: this.$refs.chart, + forceFit: this.forceFit, + height: this.G2.DomUtil.getHeight(this.$refs.chart), + padding: this.padding + }) + this.chart.guide().text({ + top: true, + position: ['min', 'max'], + content: this.title, + style: { + fill: '#666', // 文本颜色 + fontSize: '16', // 文本大小 + fontWeight: 'bold' // 文本粗细 + }, + offsetX: 0, + offsetY: 0 + }) this.chart.source(this.data) this.chart.scale('value', { min: 0 diff --git a/src/components/G2/mixins/G2.js b/src/components/G2/mixins/G2.js index 91df99bc..15ac6b03 100644 --- a/src/components/G2/mixins/G2.js +++ b/src/components/G2/mixins/G2.js @@ -15,7 +15,7 @@ export default { autoInit: { type: Boolean, required: false, - default: false + default: true }, // [图表设置项] 标题 title: { @@ -40,6 +40,12 @@ export default { type: Boolean, required: false, default: false + }, + // [图表设置项] 自动宽度 + forceFit: { + type: Boolean, + required: false, + default: true } }, data () { @@ -49,9 +55,7 @@ export default { // 数据处理模块 dataSet, // 图表实例 - chart: null, - // [图表设置项] 自动宽度 - forceFit: true + chart: null } }, mounted () { @@ -69,37 +73,10 @@ export default { } }, 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 () { - if (!this.title) { - return - } - this.chart.guide().text({ - top: true, - position: ['min', 'max'], - content: this.title, - style: { - fill: '#666', // 文本颜色 - fontSize: '16', // 文本大小 - fontWeight: 'bold' // 文本粗细 - }, - offsetX: 0, - offsetY: 0 - }) - }, // 重绘大小 - resize () { + resize (width, height) { if (this.chart) { - this.chart.changeSize(this.G2.DomUtil.getWidth(this.$refs.chart), this.G2.DomUtil.getHeight(this.$refs.chart)) + this.chart.changeSize(width || this.G2.DomUtil.getWidth(this.$refs.chart), height || this.G2.DomUtil.getHeight(this.$refs.chart)) } } }