HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化大屏页面第一次跳转图表不显示问题

zzq
刘妍 2024-06-18 17:39:06 +08:00
parent f2d783714a
commit 336786356c
1 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/map/dataScreen/index.vue
View File

@ -64,12 +64,16 @@
<div class="show-search-title"></div>
<div class="show-search-content">
<div class="show-search-item" v-for="(item, index) in searchList" :key="index">
<div style="width:100%;color:#D3F1FF">
<div style="display:flex;justify-content: space-between;margin-bottom: 8px">
<div class="item-name">{{item.name}}</div>
<div class="item-person-name">{{item.personName}}</div>
<div style="width: 100%; color: #d3f1ff">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px">
<div class="item-name">{{ item.name }}</div>
<div class="item-person-name">{{ item.personName }}</div>
</div>
<div class="item-address"><img :src="'dataScreen/address.svg'" style="margin-right: 10px"/>{{item.address}}</div>
<div class="item-address"
><img :src="'dataScreen/address.svg'" style="margin-right: 10px" />{{
item.address
}}</div
>
</div>
</div>
</div>
@ -78,11 +82,11 @@
<div class="show-enterprise-info" :style="`top:${infoPosition.top};left:${infoPosition.left}`">
<div class="title-div">
<div class="title-span">隆兴板材厂A</div>
<div class="title-close-button"><img :src="'dataScreen/info-close.svg'"/></div>
<div class="title-close-button"><img :src="'dataScreen/info-close.svg'" /></div>
</div>
<div v-for="(item, index) in enterpriseInfo" :key="index" class="show-info-item">
<div class="first-span">{{item.title}}</div>
<div class="last-span">{{showEnterpriseInfoData[item.key] }}</div>
<div class="first-span">{{ item.title }}</div>
<div class="last-span">{{ showEnterpriseInfoData[item.key] }}</div>
</div>
<div class="show-image">图片</div>
</div>
@ -91,9 +95,10 @@
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, h } from 'vue';
import { onMounted, ref, h, onBeforeUnmount } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { enterpriseInfo } from './util';
const mapClick = (event) => {
let left = 0;
let top = 0;
@ -419,22 +424,34 @@
},
],
};
let enterpriseAreaBarChart = {};
let enterpriseIncomeBarChart = {};
let landAreaPieChart = {};
let realEstateAreaPieChart = {};
onMounted(() => {
let enterpriseAreaBarDom = document.getElementsByClassName('enterprise-area-bar')[0];
let enterpriseIncomeBarDom = document.getElementsByClassName('enterprise-income-bar')[0];
let landAreaPieDom = document.getElementsByClassName('land-area-pie')[0];
let realEstateAreaPieDom = document.getElementsByClassName('real-estate-area-pie')[0];
let enterpriseAreaBarChart = echarts.init(enterpriseAreaBarDom);
let enterpriseIncomeBarChart = echarts.init(enterpriseIncomeBarDom);
let landAreaPieChart = echarts.init(landAreaPieDom);
let realEstateAreaPieChart = echarts.init(realEstateAreaPieDom);
enterpriseAreaBarChart = echarts.init(enterpriseAreaBarDom);
enterpriseIncomeBarChart = echarts.init(enterpriseIncomeBarDom);
landAreaPieChart = echarts.init(landAreaPieDom);
realEstateAreaPieChart = echarts.init(realEstateAreaPieDom);
enterpriseAreaBarChart.setOption(enterpriseAreaBarChartOption);
enterpriseIncomeBarChart.setOption(enterpriseIncomeBarChartOption);
landAreaPieChart.setOption(landAreaPieChartOption);
realEstateAreaPieChart.setOption(realEstateAreaPieChartOption);
});
onBeforeUnmount(() => {
// 及时销毁
enterpriseAreaBarChart.dispose();
enterpriseIncomeBarChart.dispose();
landAreaPieChart.dispose();
realEstateAreaPieChart.dispose();
console.log('onBeforeUnmount>>>');
});
const value = ref('');
const showEnterpriseInfoData = ref({
legalPerson: '刘明',