Echarts.drawChart happened Error in mounted hook: “TypeError: Cannot read properties of null (reading ‘getWidth’)”
I remember that it was able to run at first, but it couldn’t run last night. Today, it was the same problem when I pulled it out alone. This should be an error reported by the get width function called by echarts itself.
Wǒ jìdé zuì kāishǐ shì kěyǐ yùnxíng de, dàn zài zuótiān wǎnshàng jiù run bù qǐláile, jīntiān ba tā dāndú lā chūlái yěshì yīyàng de wèntí, zhège yīnggāi shì echarts zìjǐ qù diàoyòng de get width hánshù bào de cuòwù
used vue 2 and element-ui
Error line
Occur line
This is code
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="./css/element-ui.css" />
<script src="./js/element-ui.js"></script>
<script src="./js/host_config.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/axios.js"></script>
</head>
<body>
<div class="index" id="index">
<div style="display: flex;">
<div style="width: 12%;min-width: 205px">
<el-row class="tac unSelected">
<el-col :span="12">
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo">
</el-menu>
</el-col>
</el-row>
</div>
<div style="width: 87%; min-width: 1200px">
<div>
<el-card class="box-card unSelected">
<div style="width: 100%;height: 300px" ref="top-count">
</div>
</el-card>
</div>
<div style="display: flex;flex-direction: row;margin-top: 15px;font-weight: bold" class="unSelected">
<el-card class="" style="width: 80%">
<div ref="main" style="width: 100%;height: 200px">
</div>
</el-card>
<el-card class="monitor-card">
</el-card>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#index",
data() {
return {
isLoading: false,
refreshIcon: "el-icon-refresh",
icon: ['el-icon-refresh', 'el-icon-loading'],
counted: {},
result: [],
activeIndex: '1',
graph_data: [],
graph_date: [],
api_name: [],
api_count: [],
line_name: ['总数', '成功数', '失败数'],
count: [],
servers: []
};
},
methods: {
loadData() {
axios.get(window.RT_ENV.host_config.host + "/api/statistics").then(res => {
this.result = res.data.data[1]
let apiCount = res.data.data[2]
this.overview[0].data = res.data.data[0].total
this.overview[1].data = res.data.data[0].success
this.overview[2].data = res.data.data[0].failed
this.overview[3].data = res.data.data[0].successRate
let sort = [{}, {}, {}, {"2": "1"}, {}]
this.result.forEach(i => {
if (i.date === "今天") {
sort[0] = i;
} else if (i.date === "昨天") {
sort[1] = i;
} else if (i.date === "前天") {
sort[2] = i;
} else {
if (sort[3]["2"] === "1") {
sort[3] = i
} else {
sort[4] = i
}
}
})
const totalArray1 = [];
const successArray1 = [];
const failed1 = [];
const time = [];
apiCount.forEach(item => {
this.api_name.push(item.name)
totalArray1.push(item.total);
successArray1.push(item.success);
failed1.push(item.failed)
time.push(item.time)
})
this.api_count.push(totalArray1, successArray1, failed1, time)
const totalArray = [];
const successArray = [];
const failed = [];
sort.forEach(item => {
this.graph_date.push(item.date)
totalArray.push(item.total);
successArray.push(item.success);
failed.push(item.failed)
});
this.graph_data.push(totalArray, successArray, failed)
this.drawChart();
this.refreshIcon = this.icon[0]
this.isLoading = false
this.$loading().close()
}).catch(e => {
this.isLoading = false
this.$loading().close()
e.toString()
})
},
drawChart() {
let myChart = echarts.init(this.$refs['main'])
let top = echarts.init(this.$refs['top-count']);
let option1 = {
title: {
text: '调用详情'
},
tooltip: {
trigger: 'axis',
axisPointer: {type: 'shadow'}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: this.api_name
},
series: [{
name: '成功数',
type: 'bar',
data: this.api_count[1]
},
{
name: '失败数',
type: 'bar',
data: this.api_count[2]
},
{
name: '总调用数',
type: 'bar',
data: this.api_count[0]
},
{
name: '平均耗时',
type: 'bar',
data: this.api_count[3]
}
]
};
let option = {
xAxis: {
type: 'category',
data: this.graph_date
},
yAxis: {
type: 'value'
},
title: {
text: '调用趋势图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: this.line_name //header
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: false,
}
},
series: [{
name: this.line_name[0],
type: 'line',
data: this.graph_data[0]
},
{
name: this.line_name[1],
type: 'line',
data: this.graph_data[1]
},
{
name: this.line_name[2],
type: 'line',
data: this.graph_data[2]
},
]
};
top.setOption(option1)
myChart.setOption(option);
},
init() {
this.loadData()
this.drawChart()
},
},
mounted() {
this.init()
},
});
</script>
<style>
.box-card {
text-align: left;
margin-top: 15px;
}
.monitor-card {
text-align: left;
margin-left: 15px;
width: 20%;
}
.count-card {
text-align: left;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
}
.top-content {
overflow: hidden;
padding: 5px;
font-size: 14px;
font-weight: bold;
color: rgba(2, 2, 2, 0.6);
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 150px;
//width: 50px;
}
.top-title {
font-size: 16px;
font-weight: bold;
color: rgba(2, 2, 2, 0.7);
max-width: 150px;
}
.unSelected {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dividing-lines {
border: rgba(2, 2, 2, 0.05) 1px solid;
margin: 0 20px 0 20px;
}
.red {
color: red;
}
.green {
color: green;
}
.text-t {
font-size: 14px;
}
.item-t {
padding: 25px 0;
font-size: 17px;
}
.box-card-t {
margin-left: 2%;
color: #ffffff;
margin-right: 2%;
width: 250px;
cursor: pointer;
border-radius: 15px !important;
}
.el-menu-item {
width: 200px !important;
height: 100%;
}
.el-col-12 {
width: 100% !important;
}
.tac {}
.el-menu {
background: none;
}
</style>
</html>
host_config.js
!function () {
window.RT_ENV = {
host_config: {
host: 'https://47.109.110.245:443/apis'
}
}
}()
No way found, Please give me some advice!