diff --git a/src/components/charts/G2/components/Line/base.vue b/src/components/charts/G2/components/Line/base.vue index 90db6b9c..b6d2c22d 100644 --- a/src/components/charts/G2/components/Line/base.vue +++ b/src/components/charts/G2/components/Line/base.vue @@ -32,6 +32,7 @@ export default { stroke: '#fff', lineWidth: 1 }) + // 渲染图表 this.chart.render() }, // 数据源改变 重新渲染新的数据 diff --git a/src/components/charts/G2/components/Line/step.vue b/src/components/charts/G2/components/Line/step.vue new file mode 100644 index 00000000..cc390055 --- /dev/null +++ b/src/components/charts/G2/components/Line/step.vue @@ -0,0 +1,33 @@ + + + diff --git a/src/components/charts/index.js b/src/components/charts/index.js index 2e6279f4..7ec65c47 100644 --- a/src/components/charts/index.js +++ b/src/components/charts/index.js @@ -1,3 +1,4 @@ import Vue from 'vue' Vue.component('G2LineBase', resolve => { require(['@/components/charts/G2/components/Line/base.vue'], resolve) }) +Vue.component('G2LineStep', resolve => { require(['@/components/charts/G2/components/Line/step.vue'], resolve) }) diff --git a/src/mock/chart/G2Column.js b/src/mock/chart/G2Column.js deleted file mode 100644 index bff9c145..00000000 --- a/src/mock/chart/G2Column.js +++ /dev/null @@ -1,22 +0,0 @@ -import Mock from 'mockjs' - -Mock.mock('/api/chart/G2Column', 'post', ({body, type, url}) => { - const _body = JSON.parse(body) - switch (_body.code) { - case 1: - return { - code: 0, - msg: '请求成功', - data: [ - { year: '1951', sales: 38 }, - { year: '1952', sales: 52 }, - { year: '1956', sales: 61 }, - { year: '1957', sales: 145 }, - { year: '1958', sales: 48 }, - { year: '1959', sales: 38 } - ] - } - default: - return {} - } -}) diff --git a/src/mock/chart/G2Line.js b/src/mock/chart/G2Line.js index 8a82ec63..874a6a55 100644 --- a/src/mock/chart/G2Line.js +++ b/src/mock/chart/G2Line.js @@ -7,20 +7,13 @@ const r = (add = 0) => { Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => { const _body = JSON.parse(body) switch (_body.code) { - case 1: + case 1: { let lastValue = 0 - const temp = [ - { year: '1991', value: 0 }, - { year: '1992', value: 0 }, - { year: '1993', value: 0 }, - { year: '1994', value: 0 }, - { year: '1995', value: 0 }, - { year: '1996', value: 0 }, - { year: '1997', value: 0 }, - { year: '1998', value: 0 }, - { year: '1999', value: 0 } - ] - const data = temp.map(e => { + const year = ['1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999'] + const data = year.map(y => ({ + year: y, + value: 0 + })).map(e => { e.value = lastValue + r() lastValue = e.value return e @@ -31,6 +24,22 @@ Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => { msg: '请求成功', data } + } + case 2: { + const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] + const data = month.map(y => ({ + month: y, + value: 0 + })).map(e => { + e.value = r() + return e + }) + return { + code: 0, + msg: '请求成功', + data + } + } default: return {} } diff --git a/src/mock/chart/G2Pie.js b/src/mock/chart/G2Pie.js deleted file mode 100644 index 0f2d4b0b..00000000 --- a/src/mock/chart/G2Pie.js +++ /dev/null @@ -1,20 +0,0 @@ -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 4f20b0f0..24f0d417 100644 --- a/src/mock/chart/index.js +++ b/src/mock/chart/index.js @@ -1,3 +1 @@ import './G2Line' -import './G2Pie' -import './G2Column' diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue index a83068aa..fedabb75 100644 --- a/src/pages/demo/chart/index/index.vue +++ b/src/pages/demo/chart/index/index.vue @@ -9,10 +9,10 @@ - + - + @@ -34,7 +34,7 @@ export default { padding: [30, 40, 50, 50] }, { - api: {url: '/api/chart/G2Line', data: {code: 1}}, + api: {url: '/api/chart/G2Line', data: {code: 2}}, data: [], padding: [30, 40, 50, 50] } @@ -42,8 +42,8 @@ export default { layout: { // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里 layout: [ - {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'}, - {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'}, + {'x': 0, 'y': 0, 'w': 7, 'h': 9, 'i': '0'}, + {'x': 7, 'y': 0, 'w': 5, 'h': 9, 'i': '1'}, {'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'} ], colNum: 12,