From b9f740e983e3c552e7247b47a96c4231430ea65b 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 16:33:42 +0800 Subject: [PATCH] no message Former-commit-id: 3d89a48b4812432b1d8fb172550496ec368fe7b4 Former-commit-id: 2dfe3f42701c9bcba739c617db883cef7b515bf1 Former-commit-id: cf80d852d653158aa395be003359b46830741bb4 --- src/components/G2/Line/1.vue | 2 + src/components/G2/Pie/1.vue | 73 ++++++--------------- src/components/G2/mixins/G2.js | 12 ++-- src/mock/chart/G2Pie.js | 20 ++++++ src/mock/chart/index.js | 1 + src/pages/demo/chart/index/index.vue | 20 ++---- src/pages/demo/chart/index/mixins/chart.js | 9 ++- src/pages/demo/chart/index/mixins/layout.js | 12 ++-- src/pages/demo/chart/index/style.scss | 8 ++- 9 files changed, 75 insertions(+), 82 deletions(-) create mode 100644 src/mock/chart/G2Pie.js diff --git a/src/components/G2/Line/1.vue b/src/components/G2/Line/1.vue index 79a7360a..df4e55f5 100644 --- a/src/components/G2/Line/1.vue +++ b/src/components/G2/Line/1.vue @@ -10,6 +10,8 @@ export default { ], data () { return { + // 在组件 mounted 后立即初始化图表 + autoInit: false, // [图表设置项] padding padding: [30, 40, 50, 50] } diff --git a/src/components/G2/Pie/1.vue b/src/components/G2/Pie/1.vue index 89a49cc0..53e821e1 100644 --- a/src/components/G2/Pie/1.vue +++ b/src/components/G2/Pie/1.vue @@ -8,31 +8,34 @@ export default { mixins: [ G2Mixin ], - methods: { - // 初始化图表 - initHandler () { - const { DataView } = this.dataSet - const data = [ - { item: '事例一', count: 40 }, - { item: '事例二', count: 21 }, - { item: '事例三', count: 17 }, - { item: '事例四', count: 13 }, - { item: '事例五', count: 9 } - ] - const dv = new DataView() - dv.source(data).transform({ + data () { + return { + // [图表设置项] padding + padding: [60, 60, 110, 60], + // 在组件 mounted 后立即初始化图表 + // autoInit: false, + // DataView数据转换设置 + transformSetting: { type: 'percent', field: 'count', dimension: 'item', as: 'percent' - }) + } + } + }, + methods: { + dvMaker () { + return new this.DataSet.DataView().source(this.data).transform(this.transformSetting) + }, + // 初始化图表 + initHandler () { 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.source(dv, { + this.chart.source(this.dvMaker(), { percent: { formatter: val => { val = (val * 100) + '%' @@ -67,50 +70,16 @@ export default { stroke: '#fff' }) this.chart.render() - // 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 - // }) - // this.chart.scale('year', { - // range: [0, 1] - // }) - // this.chart.tooltip({ - // crosshairs: { - // type: 'line' - // } - // }) - // this.chart.line().position('year*value') - // this.chart.point().position('year*value').size(4).shape('circle').style({ - // stroke: '#fff', - // lineWidth: 1 - // }) - // this.chart.render() }, // 数据源改变 重新渲染新的数据 changeData () { if (this.chart) { // 已经初始化过图表 更新数据 - this.chart.changeData(this.data) + console.log(1) + this.chart.changeData(this.dvMaker()) } else { // 没有图表 新创建一个实例 + console.log(2) this.initHandler() } } diff --git a/src/components/G2/mixins/G2.js b/src/components/G2/mixins/G2.js index 739d7cc5..d1f9f0c7 100644 --- a/src/components/G2/mixins/G2.js +++ b/src/components/G2/mixins/G2.js @@ -1,5 +1,5 @@ import G2 from '@antv/g2' -import * as dataSet from '@antv/data-set' +import * as DataSet from '@antv/data-set' // 关闭 G2 的体验改进计划打点请求 G2.track(false) @@ -11,12 +11,6 @@ export default { required: false, default: () => [] }, - // 在组件 mounted 后立即初始化图表 - autoInit: { - type: Boolean, - required: false, - default: true - }, // [图表设置项] 高度 height: { type: Number, @@ -41,9 +35,11 @@ export default { // 在页面中不需要再引入 直接使用 this.G2 G2, // 数据处理模块 - dataSet, + DataSet, // 图表实例 chart: null, + // 在组件 mounted 后立即初始化图表 + autoInit: true, // [图表设置项] padding padding: [40, 40, 40, 40] } diff --git a/src/mock/chart/G2Pie.js b/src/mock/chart/G2Pie.js new file mode 100644 index 00000000..0f2d4b0b --- /dev/null +++ b/src/mock/chart/G2Pie.js @@ -0,0 +1,20 @@ +import Mock from 'mockjs' + +Mock.mock('/api/chart/G2Pie', 'post', ({body, type, url}) => { + const _body = JSON.parse(body) + switch (_body.code) { + case 1: + return { + code: 0, + msg: '请求成功', + data: [ + { item: '分类1', count: 40 }, + { item: '分类2', count: 21 }, + { item: '分类3', count: 17 }, + { item: '分类4', count: 22 } + ] + } + default: + return {} + } +}) diff --git a/src/mock/chart/index.js b/src/mock/chart/index.js index 24f0d417..35ed9155 100644 --- a/src/mock/chart/index.js +++ b/src/mock/chart/index.js @@ -1 +1,2 @@ import './G2Line' +import './G2Pie' diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue index 86cb183d..39c9c813 100644 --- a/src/pages/demo/chart/index/index.vue +++ b/src/pages/demo/chart/index/index.vue @@ -1,24 +1,16 @@