no message
Former-commit-id: 5cee44e487fd06b68cc72f4fccc04be09b7cf3af Former-commit-id: 22d06e1b607115227a2afde3af5a512ef88ce4ea Former-commit-id: b2f463973cf8915efe6800e9eae8b59e60c4c598
This commit is contained in:
李杨
@@ -1,179 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Container type="ghost" :responsive="true" class="demo-chart-index">
|
|
||||||
<GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
|
|
||||||
<G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
|
|
||||||
<G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
|
|
||||||
<G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
|
|
||||||
<G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
|
|
||||||
<G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
|
|
||||||
<G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
|
|
||||||
<G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<!-- 卡片 -->
|
|
||||||
<GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
|
|
||||||
<G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
</GridLayout>
|
|
||||||
</Container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ChartCardHeader from './components/ChartCardHeader'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ChartCardHeader
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
chart: [
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
|
|
||||||
refName: 'G2LineBase',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
|
|
||||||
refName: 'G2LineStep',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
|
|
||||||
refName: 'G2ColumnBase',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
|
|
||||||
refName: 'G2BarBase',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
|
|
||||||
refName: 'G2PieBase',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
|
|
||||||
refName: 'G2NightingaleRoseBase',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
|
|
||||||
refName: 'G2RadarBase',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
|
|
||||||
refName: 'G2AreaBase',
|
|
||||||
data: []
|
|
||||||
}
|
|
||||||
],
|
|
||||||
layout: {
|
|
||||||
// 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
|
|
||||||
layout: [
|
|
||||||
{'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0'},
|
|
||||||
{'x': 4, 'y': 0, 'w': 4, 'h': 7, 'i': '1'},
|
|
||||||
{'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
|
|
||||||
{'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'},
|
|
||||||
{'x': 4, 'y': 7, 'w': 4, 'h': 7, 'i': '4'},
|
|
||||||
{'x': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
|
|
||||||
{'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'},
|
|
||||||
{'x': 4, 'y': 14, 'w': 4, 'h': 7, 'i': '7'}
|
|
||||||
],
|
|
||||||
colNum: 12,
|
|
||||||
rowHeight: 30,
|
|
||||||
isDraggable: true,
|
|
||||||
isResizable: true,
|
|
||||||
isMirrored: false,
|
|
||||||
verticalCompact: true,
|
|
||||||
margin: [10, 10],
|
|
||||||
useCssTransforms: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
// 请求图表数据
|
|
||||||
this.syncData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 请求图表数据
|
|
||||||
syncData () {
|
|
||||||
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
|
|
||||||
.then(this.$axios.spread((...res) => {
|
|
||||||
res.forEach((e, index) => {
|
|
||||||
this.chart[index].data = e
|
|
||||||
})
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
// 布局组件发生变化
|
|
||||||
layoutUpdatedHandler (newLayout) {
|
|
||||||
console.group('layoutUpdatedHandler')
|
|
||||||
newLayout.forEach(e => {
|
|
||||||
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
|
|
||||||
})
|
|
||||||
console.groupEnd()
|
|
||||||
},
|
|
||||||
// 改变尺寸完成
|
|
||||||
handleResized (name) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs[name].resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 用户触发了卡片右上角的刷新按钮
|
|
||||||
handleRefreshData (index) {
|
|
||||||
const api = this.chart[index].api
|
|
||||||
this.$axios.post(api.url, api.data)
|
|
||||||
.then(res => {
|
|
||||||
this.chart[index].data = res
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import './style.scss';
|
|
||||||
</style>
|
|
||||||
@@ -1,3 +1,179 @@
|
|||||||
<template>
|
<template>
|
||||||
<Container></Container>
|
<Container type="ghost" :responsive="true" class="demo-chart-index">
|
||||||
|
<GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
|
||||||
|
<G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
|
||||||
|
<G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
|
||||||
|
<G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
|
||||||
|
<G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
|
||||||
|
<G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
|
||||||
|
<G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
|
||||||
|
<G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
|
||||||
|
<el-card class="header-in">
|
||||||
|
<ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
|
||||||
|
<G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
|
||||||
|
</el-card>
|
||||||
|
</GridItem>
|
||||||
|
</GridLayout>
|
||||||
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ChartCardHeader from './components/ChartCardHeader'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ChartCardHeader
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
chart: [
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
|
||||||
|
refName: 'G2LineBase',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
|
||||||
|
refName: 'G2LineStep',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
|
||||||
|
refName: 'G2ColumnBase',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
|
||||||
|
refName: 'G2BarBase',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
|
||||||
|
refName: 'G2PieBase',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
|
||||||
|
refName: 'G2NightingaleRoseBase',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
|
||||||
|
refName: 'G2RadarBase',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
|
||||||
|
refName: 'G2AreaBase',
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
layout: {
|
||||||
|
// 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
|
||||||
|
layout: [
|
||||||
|
{'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0'},
|
||||||
|
{'x': 4, 'y': 0, 'w': 4, 'h': 7, 'i': '1'},
|
||||||
|
{'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
|
||||||
|
{'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'},
|
||||||
|
{'x': 4, 'y': 7, 'w': 4, 'h': 7, 'i': '4'},
|
||||||
|
{'x': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
|
||||||
|
{'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'},
|
||||||
|
{'x': 4, 'y': 14, 'w': 4, 'h': 7, 'i': '7'}
|
||||||
|
],
|
||||||
|
colNum: 12,
|
||||||
|
rowHeight: 30,
|
||||||
|
isDraggable: true,
|
||||||
|
isResizable: true,
|
||||||
|
isMirrored: false,
|
||||||
|
verticalCompact: true,
|
||||||
|
margin: [10, 10],
|
||||||
|
useCssTransforms: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
// 请求图表数据
|
||||||
|
this.syncData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 请求图表数据
|
||||||
|
syncData () {
|
||||||
|
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
|
||||||
|
.then(this.$axios.spread((...res) => {
|
||||||
|
res.forEach((e, index) => {
|
||||||
|
this.chart[index].data = e
|
||||||
|
})
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
// 布局组件发生变化
|
||||||
|
layoutUpdatedHandler (newLayout) {
|
||||||
|
console.group('layoutUpdatedHandler')
|
||||||
|
newLayout.forEach(e => {
|
||||||
|
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
|
||||||
|
})
|
||||||
|
console.groupEnd()
|
||||||
|
},
|
||||||
|
// 改变尺寸完成
|
||||||
|
handleResized (name) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs[name].resize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 用户触发了卡片右上角的刷新按钮
|
||||||
|
handleRefreshData (index) {
|
||||||
|
const api = this.chart[index].api
|
||||||
|
this.$axios.post(api.url, api.data)
|
||||||
|
.then(res => {
|
||||||
|
this.chart[index].data = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import './style.scss';
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user