diff --git a/vue/src/views/bigScreen/indexs/center-map.vue b/vue/src/views/bigScreen/indexs/center-map.vue index 58755985..aa340892 100644 --- a/vue/src/views/bigScreen/indexs/center-map.vue +++ b/vue/src/views/bigScreen/indexs/center-map.vue @@ -17,9 +17,6 @@ import { loadBMap } from '@/utils/map.js' -//安装的是echarts完整包,里面包含百度地图扩展,路径为 echarts/extension/bmap/bmap.js,将其引入 -//ECharts的百度地图扩展,可以在百度地图上展现点图,线图,热力图等可视化 -require('echarts/extension/bmap/bmap') import { listAllDeviceShort, } from "@/api/iot/device"; @@ -66,7 +63,9 @@ export default { /**加载地图*/ loadMap() { loadBMap().then(() => { - this.getmap(); + import('echarts/extension/bmap/bmap').then(() => { + this.getmap(); + }); }); }, diff --git a/vue/src/views/index.vue b/vue/src/views/index.vue index 820b5b1a..fa31b4be 100644 --- a/vue/src/views/index.vue +++ b/vue/src/views/index.vue @@ -240,9 +240,6 @@ import { getDeviceStatistic } from '@/api/iot/device'; import { listNotice, getNotice } from '@/api/system/notice'; import CountTo from 'vue-count-to'; import { loadBMap } from '@/utils/map.js'; -//安装的是echarts完整包,里面包含百度地图扩展,路径为 echarts/extension/bmap/bmap.js,将其引入 -//ECharts的百度地图扩展,可以在百度地图上展现点图,线图,热力图等可视化 -require('echarts/extension/bmap/bmap'); import { getServer } from '@/api/monitor/server'; import { listAllDeviceShort } from '@/api/iot/device'; @@ -303,6 +300,12 @@ export default { this.getNoticeList(); this.getDeviceStatistic(); }, + mounted() { + this.$nextTick(() => { + this.draawPieCpu(); + window.addEventListener('resize', this.handleResize); // 监听窗口大小变化以重新渲染饼图 + }); + }, methods: { init() { if (this.$store.state.user.roles.indexOf('tenant') === -1 && this.$store.state.user.roles.indexOf('general') === -1) { @@ -357,11 +360,26 @@ export default { /**加载地图*/ loadMap() { loadBMap().then(() => { - setTimeout(() => { - this.getmap(); // 里面有 setOption - }, 500); + import('echarts/extension/bmap/bmap').then(() => { + setTimeout(() => { + this.getmap(); + }, 500); + }); }); }, + handleResize() { + // 在大小变化时重新渲染图表 + if (this.bMapChart) { + this.bMapChart.resize(); + } + if (this.gMapChart) { + this.gMapChart.resize(); + } + if (this.pieCpuChart) { + this.pieCpuChart.resize(); + this.updateRadius(); + } + }, /** 查询服务器信息 */ getServer() { getServer().then((response) => {