echats重新加载重绘问题:页面刷新时图表无法加载
解决办法:将图标EChats 单独抽出来作为公共组件
在src下的components中新建一个文件夹为echats,存放图表文件

echats/index.vue 内容如下(此处为静态数据,还未使用动态数据,只是举个例子,实际使用场景随需求而定)
<template lang="pug">
.aum AUM: 23,000,000 HKD (approximate)
div(id="myEchart"
ref="myEchart")
</template>
<script>
export default {
data() {
return {
chart: ‘‘
}
},
mounted() {
let self = this
this.$nextTick(() => {
self.initChart()
})
},
methods: {
initChart() {
console.log(this.$refs.myEchart, ‘hhhhhhhhhhh‘)
this.chart = this.$echarts.init(this.$refs.myEchart)
// 把配置和数据放这里
this.chart.setOption({
backgroundColor: ‘‘, //背景颜色透明
color: ‘#1E93F3‘,
tooltip: {
trigger: ‘axis‘,
axisPointer: {
type: ‘cross‘,
crossStyle: {
color: ‘#999‘
}
}
},
grid: {
//统计图距离边缘的距离
top: ‘14%‘,
left: ‘10%‘,
right: ‘10%‘,
bottom: ‘14%‘
},
xAxis: [
{
type: ‘category‘,
axisTick: {
//y轴刻度线
show: false
},
axisLine: {
symbol: [‘none‘, ‘arrow‘],
symbolOffset: [0, 4],
lineStyle: { color: ‘#707070‘ }
},
data: [
‘Jan‘,
‘Feb‘,
‘Mar‘,
‘Apr‘,
‘May‘,
‘Jun‘,
‘Jul‘,
‘Aug‘,
‘Sep‘,
‘Oct‘,
‘Nov‘,
‘Dec‘
],
axisPointer: {
type: ‘shadow‘
}
}
],
yAxis: {
// show: true,
type: ‘value‘,
splitLine: { show: false }, //去除网格线
axisTick: {
//y轴刻度线
show: false
},
axisLine: {
symbol: [‘none‘, ‘arrow‘],
symbolOffset: [0, 4],
lineStyle: { color: ‘#707070‘ }
}
},
series: [
{
name: ‘降水量‘,
type: ‘line‘,
lineStyle: {
//线条的相关设置
normal: {
color: ‘#1E93F3‘ // 线条颜色
}
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: ‘rgba(30,147,243,0.3)‘
},
{ offset: 0.8, color: ‘rgba(30,147,243,0)‘ }
]
)
},
data: [
2.6,
5.9,
9.0,
26.4,
28.7,
70.7,
175.6,
182.2,
48.7,
18.8,
6.0,
2.3
]
}
]
})
}
}
}
</script>
<style lang="scss">
.aum {
padding: 15px 0 0 22px;
font-size: 16px;
font-family: Futura-Bold, Futura;
font-weight: bold;
color: rgba(34, 34, 34, 1);
#myEchart {
width: 100%;
height: 320px;
}
}
</style>
在父组件中引用
import echats from ‘@/components/echats‘

最后问题解决,没有报错

EChats使用报错之 《"TypeError: Cannot read property 'getAttribute' of undefined"》
原文:https://www.cnblogs.com/yycode01/p/13231568.html