sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

初步解决了多个图表同时加载的时候卡顿问题

Browse Source 
Former-commit-id: ee84d17720b52073c17a693df68a9cc1a323bf02
Former-commit-id: 63a4854cfc87e8bfa532649f3600663be860145b
Former-commit-id: 648a6ec1f165609655c6f8c3549babb535396851
This commit is contained in:
李杨
2018-02-25 23:12:35 +08:00
parent 55af879a20
commit efb4744f51
2 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/charts/G2/mixins/G2.js
View File

@@ -35,6 +35,7 @@ export default {
if (this.autoInit) {
this.startInit()
}
this.$emit('ready')
},
watch: {
// 数据改变

40
src/pages/demo/chart/index/index.vue
View File

@@ -4,49 +4,49 @@
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
<G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
<G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="chart[0].ready = true"></G2LineBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
<G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
<G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="chart[1].ready = true"></G2LineStep>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
<G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
<G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="chart[2].ready = true"></G2ColumnBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
<G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
<G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="chart[3].ready = true"></G2BarBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
<G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
<G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="chart[4].ready = true"></G2PieBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
<G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
<G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="chart[5].ready = true"></G2NightingaleRoseBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
<G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
<G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="chart[6].ready = true"></G2RadarBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
<G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
<G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="chart[7].ready = true"></G2AreaBase>
</el-card>
</el-col>
</el-row>
@@ -65,51 +65,65 @@ export default {
{
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
refName: 'G2LineBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
refName: 'G2LineStep',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
refName: 'G2ColumnBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
refName: 'G2BarBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
refName: 'G2PieBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
refName: 'G2NightingaleRoseBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
refName: 'G2RadarBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
refName: 'G2AreaBase',
ready: false,
data: []
}
]
}
},
mounted () {
// 请求图表数据
setTimeout(() => {
this.syncData()
}, 1000)
computed: {
ready () {
return !this.chart.find(e => !e.ready)
}
},
watch: {
ready (ready) {
if (ready) {
this.syncData()
}
}
},
methods: {
// 请求图表数据