gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复echarts图表尺寸异常的问题

Browse Source
This commit is contained in:
chenjinsong
2021-09-08 21:29:12 +08:00
parent 36a1f08963
commit 95f3602248
7 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/css/chart.scss
View File

@@ -20,12 +20,17 @@
}
}
.chart__loading {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: calc(100% - 50px);
top: 50px;
width: 100%;
background-color: #fefefe;
i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: #aaa;
}

2
src/components/charts/ChartMap.vue
View File

@@ -9,7 +9,7 @@
<slot name="operations"></slot>
</div>
</div>
<div class="cn-chart__body" v-show="!loading">
<div class="cn-chart__body">
<slot></slot>
</div>
<div class="cn-chart__body chart__loading" v-show="loading">

8
src/components/charts/ChartSingleValue.vue
View File

@@ -4,10 +4,10 @@
<div class="single-value-icon__box" >
<div class="single-value__icon"><i :class="icon"></i></div>
</div>
<div class="single-value__content chart__loading" style="height: 100%; width: 100%;" v-if="loading">
<div class="single-value__content chart__loading" style="height: 100%; width: 100%;" v-show="loading">
<i class="el-icon-loading"></i>
</div>
<div class="single-value__content" v-if="type === 51" v-show="!loading">
<div class="single-value__content" v-if="type === 51">
<div class="content__data">
<slot name="data"></slot>
</div>
@@ -15,7 +15,7 @@
<slot name="title"></slot>
</div>
</div>
<div class="single-value__content" v-if="type === 52" v-show="!loading">
<div class="single-value__content" v-if="type === 52">
<div class="content__title">
<slot name="title"></slot>
</div>
@@ -26,7 +26,7 @@
<slot name="chart"></slot>
</div>
</div>
<div class="single-value__content" v-if="type === 53" v-show="!loading">
<div class="single-value__content" v-if="type === 53">
<div class="content__title"></div>
<div class="content__data"></div>
</div>

2
src/components/charts/ChartTable.vue
View File

@@ -12,7 +12,7 @@
<div class="cn-chart__body chart__loading" v-show="loading">
<i class="el-icon-loading"></i>
</div>
<div class="cn-chart__body" v-show="!loading" v-no-data="noData">
<div class="cn-chart__body" v-no-data="noData">
<el-table
style="width: 100%"
tooltip-effect="light"

4
src/components/charts/EchartsFrame.vue
View File

@@ -9,13 +9,13 @@
<slot name="operations"></slot>
</div>
</div>
<div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-no-data="noData" v-show="!loading">
<div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-no-data="noData">
<slot></slot>
</div>
<div class="cn-chart__body chart__loading" v-show="loading">
<i class="el-icon-loading"></i>
</div>
<div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1 && !noData" :class="{'pie-with-table': isPieWithTable}" v-show="!loading">
<div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1 && !noData" :class="{'pie-with-table': isPieWithTable}">
<slot name="footer"></slot>
</div>
</div>

2
src/components/charts/panel.scss
View File

@@ -109,6 +109,7 @@
}
&>.cn-chart {
position: relative;
background-color: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
@@ -129,6 +130,7 @@
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding: 10px 20px 10px 18px;
height: 50px;
font-size: 16px;

52
src/views/charts/Chart.vue
View File

@@ -284,7 +284,7 @@ export default {
if (chartParams) {
this.loadMap(this.polygonSeries)
}
// TODO 优化：缓存地图，重新查询时只更改数据不再次初始化
// TODO 优化：缓存地图，重新查询时只更改数据，不再次初始化
} else if (this.isEcharts) {
const dom = document.getElementById(`chart${this.chartInfo.id}`)
!this.myChart && (this.myChart = echarts.init(dom))
@@ -340,9 +340,6 @@ export default {
this.errorInfo = response.msg || response.message || 'Unknown'
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
})
} else {
this.loading = false
@@ -350,7 +347,12 @@ export default {
}).catch(() => {
this.singleValue.value = ''
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
setTimeout(() => {
this.loading = false
this.$nextTick(() => {
this.echartsResize()
})
}, 250)
})
}
} else if (this.isTabs) {
@@ -692,11 +694,13 @@ export default {
this.errorInfo = response.msg || response.message || 'Unknown'
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
setTimeout(() => {
this.loading = false
this.$nextTick(() => {
this.echartsResize()
})
}, 250)
})
},
initRelationShip (chartParams) {
@@ -717,11 +721,13 @@ export default {
this.chartOption.series[0].links = links
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
setTimeout(() => {
this.loading = false
setTimeout(() => {
this.myChart.resize()
})
}, 250)
})
const vm = this
@@ -810,11 +816,13 @@ export default {
this.errorInfo = response.msg || response.message || 'Unknown'
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
setTimeout(() => {
this.loading = false
this.$nextTick(() => {
this.echartsResize()
})
}, 250)
})
},
initEchartsWithPieTable (chartParams) {
@@ -856,9 +864,6 @@ export default {
this.chartOption.legend.type = 'scroll'
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
if (!this.$_.isEmpty(data)) {
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
if (response2.code === 200) {
@@ -876,7 +881,12 @@ export default {
this.errorInfo = response.msg || response.message || 'Unknown'
}
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
setTimeout(() => {
this.loading = false
this.$nextTick(() => {
this.echartsResize()
})
}, 250)
})
// legend点击事件
this.myChart.off('legendselectchanged')