大屏中使用地图时因为返回的数据点太多,造成页面加载过慢,卡顿等影响,优化过后,性能提升。
1、创建map.vue组件
<template>
<div class="map">
<h3>
<span class="icon-cube"></span>
活跃运营中心数据统计
</h3>
<div class="geo" id="geo"></div>
</div>
</template>
<script>
// 优化1--不要在data里创建,影响性能
let myechart = null;
export default {
components: {},
props: {
memberCitys: Array,
},
data() {
return {
list: [],
};
},
mounted() {
// 优化2--防止重复创建
if (myechart != null) {
myechart.dispose();
}
if (this.memberCitys) {
// 优化3--相比其他echarts,地图最后渲染,防止阻塞
setTimeout(() => {
this.cardMapOption();
}, 0);
// 优化4--3秒后再渲染绿点,防止初始加载太慢
setTimeout(() => {
this.cardMap.count1 = this.list;
this.cardMapOption();
}, 3000);
}
},
computed: {
cardMap() {
let mapData = {
data: [],
count1: [],
count2: [],
};
this.memberCitys.map((x) => {
mapData.data.push({
name: x.cityName,
value: [x.longitude, x.latitude, 70],
count: x.count,
});
});
mapData.data.map((y) => {
if (y.count < 10) {
this.list.push(y);
} else {
mapData.count2.push(y);
}
});
return mapData;
},
},
methods: {
// 地图初始化配置
cardMapOption() {
let _this = this;
// var color = ['#3ed4ff', '#a6c84c'];
var series = [];
[_this.cardMap.count1, _this.cardMap.count2].map(function () {
series.push(
{
name: "10个以内",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 1,
rippleEffect: {
brushType: "stroke",
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}",
},
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: "#a6c84c",
},
},
data: _this.cardMap.count1,
},
{
name: "10个以上",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 1,
rippleEffect: {
brushType: "stroke",
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}",
},
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: "#ff0000",
},
},
data: _this.cardMap.count2,
}
);
});
var option = {
backgroundColor: "#080a20",
title: {
left: "left",
textStyle: {
color: "#fff",
},
},
legend: {
top: 0,
left: 0,
textStyle: {
color: "#fff",
},
},
geo: {
map: "china",
zoom: 1.2,
label: {
emphasis: {
show: false,
},
},
roam: true,
itemStyle: {
normal: {
areaColor: "#142957",
borderColor: "#0692a4",
},
emphasis: {
areaColor: "#0b1c2d",
},
},
},
series: series,
};
myechart = echarts.init(document.getElementById("geo"));
myechart.setOption(option);
},
},
beforeDestroy() {
// 优化5--销毁地图组件,释放内存
myechart.dispose();
clearInterval(this.timer);
},
};
</script>
<style scoped>
.map {
height: 24.1rem;
margin-bottom: 0.833rem;
display: flex;
flex-direction: column;
}
.map h3 {
line-height: 1;
padding: 0.667rem 0;
margin: 0;
font-size: 0.833rem;
color: #fff;
}
.map .icon-cube {
color: #68d8fe;
}
.map .chart {
flex: 1;
background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {
width: 100%;
height: 100%;
}
</style>
2、在index.vue中引入使用
import map from "./screen1/map.vue";
components:{
map
}
<template>
<!-- 地图 -->
<!-- memberCitys 从后台获取的城市数据 -->
<map-show
v-if="mData.memberCitys"
:memberCitys="mData.memberCitys"
></map-show>>
</template>