apache
[Bug] TypeError: Cannot read properties of undefined (reading 'regions')
Version
5.3.3
Link to Minimal Reproduction
打包发布到正式环境报错TypeError: Cannot read properties of undefined (reading 'regions')
Steps to Reproduce
<template>
<div class="chart-container" v-loading="loading">
<div ref="chartContainer" style="width: 100%; height: 800px;"></div>
<!-- <div ref="rankContainer" style="width: 100%; height: 80px;"></div>-->
<!-- 添加悬浮右侧卡片 -->
<ElCard
class="defense-ranking-card"
:style="cardStyle"
:body-style="{height: '520px', overflowY: 'auto'}"
>
<template #header>
<div class="card-header">国防费排名</div>
<el-select
v-model="year"
placeholder="请选择需要展示的年份"
@change="getRankData(row)"
style="width: 200px; margin: 0 0 0 15px"
>
<el-option
v-for="item in yearList"
:key="item.id"
:label="item.year"
:value="item.id"
/>
</el-select>
</template>
<ul>
<li v-for="(item, index) in rankedDefenseData" :key="index">
{{ index + 1 }}. {{ item.name }}: {{ item.value }} (百万美元)
</li>
</ul>
</ElCard>
</div>
</template>
<script>
import * as echarts from 'echarts'; // 引入世界地图数据
import {ElCard} from 'element-plus';
import gffYearsService from "@/api/gff/year/gffYearsService";
import gffCountriesService from "@/api/countries/gffCountriesService";
import gffCountryScaleDataDollarService from "@/api/gff/dollar/gffCountryScaleDataDollarService";
import 'echarts/map/js/world.js';
import ECharts from "vue-echarts";
export default {
name: 'WorldMapChart',
components: {
'v-chart': ECharts,
},
data() {
return {
chartInstance: null,
rankInstance: null,
defenseData: [], // 假设这是你的国防费数据数组
rankedDefenseData: [], // 排序后的国防费数据，用于显示排名
yearList: [],
year: '1787693061358878722',
guojiaList: [],
nameMap: {},
loading:false,
}
},
async mounted() {
this.chartInstance = echarts.init(this.$refs.chartContainer);
await this.fetchData(); // 假设这是获取数据的方法
},
created() {
this.getNianfenList()
},
methods: {
async fetchData() {
this.loading = true;
// 获取数据列表
gffCountryScaleDataDollarService.listYear({
'current': 0,
'size': -1,
'yearId': this.year === '' ? '1787693061358878722' : this.year,
}).then((data) => {
this.defenseData = data
this.calculateRanking(); // 计算排名数据
this.getGuojiaList()
// 定时器一秒后执行
setTimeout(() => {
this.loading = false;
}, 1000);
})
},
renderChart() {
const nameMap = this.nameMap
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} (百万美元)',
},
visualMap: {
min: 0,
max: 800000,
text: ['低', '高'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered'],
},
},
series: [
{
type: 'map',
mapType: 'world',
roam: true,
label: {
show: false,
emphasis: {
show: true,
},
},
nameMap,
data: this.defenseData,
left: '1%',
},
],
};
this.chartInstance.setOption(option);
},
getNianfenList() {
this.loading = true
gffYearsService.list({
'current': 0,
'size': -1,
}).then((data) => {
this.yearList = data.records
})
},
getGuojiaList() {
gffCountriesService.listMap({
'current': 0,
'size': -1,
}).then((data) => {
this.nameMap = data.data
this.renderChart();
})
},
calculateRanking() {
// 对国防费数据按value降序排列
this.rankedDefenseData = this.defenseData.sort((a, b) => b.value - a.value);
},
getRankData(row) {
this.fetchData(row);
},
},
beforeDestroy() {
if (this.chartInstance) {
this.chartInstance.dispose();
}
},
computed: {
cardStyle() {
return {
position: 'absolute',
left: '77%',
top: ' 5%',
width: '20%',
height: 'auto',
zIndex: 1000,
opacity: 0.8,
};
},
},
};
</script>
<style scoped>
.chart-container {
position: relative;
}
/* 排行榜容器样式 */
.rank-container {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.7);
padding: 10px 20px;
}
.container {
position: relative;
}
.map-chart {
width: 100%;
height: 600px;
}
.defense-ranking-card {
width: 100%;
height: 100%;
border-radius: 0;
}
.card-header {
font-weight: bold;
padding: 10px 16px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 5px 16px;
}
</style>
Current Behavior
开发环境是没用问题的可以正常显示 我是用的是Springboot+vue3前后端分离的项目结构 发布到生产环境之后世界地图就不现实了
Expected Behavior
我希望生产环境也可以正常显示
Environment
- OS:麒麟银河v10
- Browser:edge
- Framework:Vue@3
Any additional comments?
No response
@xiaoyangege It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
BODY
Version
5.3.3
Link to Minimal Reproduction
When packaging and publishing to the official environment, an error occurs: TypeError: Cannot read properties of undefined (reading 'regions')
Steps to Reproduce
<ElCard class="defense-ranking-card" :style="cardStyle" :body-style="{height: '520px', overflowY: 'auto'}"
<template #header>
- {{ index + 1 }}. {{ item.name }}: {{ item.value }} (millions of dollars)
Current Behavior
There is no problem in the development environment and it can be displayed normally. I use Springboot+vue3 with a project structure that separates the front and back ends. After publishing to the production environment, the world map becomes unrealistic.
Expected Behavior
I hope the production environment can also display normally
Environment
- OS:Kirin Galaxy v10
-Browser:edge
- Framework:Vue@3
Any additional comments?
No response
![echarts-bot[bot] avatar](https://avatars.githubusercontent.com/in/20872?v=4 "Published by a pub.dev verified publisher"){kind=small}
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'regions')
at e.getInitialData (index-ffeb37e7.1719541145924.js:40:10737)
at e.init (index-ffeb37e7.1719541145924.js:36:4664)
at Proxy.
上面是我客户端的报错信息 本地没问题 部署到生产就出现这个问题了
我看你示例里有这行代码，如果用的 5.5.3，应该引用不到报错才对，map 目录 v5 已经移除了。
import 'echarts/map/js/world.js';
倒也不用降低版本，可以把那个 world.js 拷贝到你项目的某个目录下，然后 import 进来。从 v5 版本开始，不再提供地图数据了，需要开发者自行获取地图数据并注册。
