vue使用echarts时created里拿到的数据无法渲染的解决

使用echarts时created里拿到的数据无法渲染

问题描述

在vue里使用echart时，created里请求的数据，但是却无法渲染；

代码如下：

//created里获取数据
async created() {
  const res = await this.$http.get('reports/type/1')
  this.option.legend.data = res.data.data.series.map((item) => item.name)
  console.log('created' + this.option.legend.data)
},
//mounted里渲染echart表格
mounted() {
  let myChart = this.$echarts.init(this.$refs.myEchart)
  this.option && myChart.setOption(this.option)
},

原因分析

通过vue插件调试，数据确实已经拿到了，但是却无法渲染，数据拿到，但是无法渲染，推断应该是执行顺序出了问题，获取的数据在渲染之后才拿到的。 初步怀疑是await的问题，加入验证代码测试一下：

async created() {
  const res = await this.$http.get('reports/type/1')
  this.option.legend.data = res.data.data.series.map((item) => item.name)
  //打印1
  console.log(1)
},
 mounted() {
  let myChart = this.$echarts.init(this.$refs.myEchart)
  this.option && myChart.setOption(this.option)
  //打印2
  console.log(2)
},

神奇的一幕出现了，果然和我们想的一样：先执行了mounted()里的函数

mounted()为什么会打印在created()前面呢？

让我们来了解一下async/await ：await会阻塞其所在表达式中后续表达式的执行(在和await在同一函数内但在await后面的代码会被阻塞，形成类似微任务的存在)，但是不会阻碍外部函数的执行！！

结论：await阻碍了同函数内的代码，整个created函数执行变慢（相当于变成异步），所以mounted先执行，导致数据无法获取；

解决措施

将请求放在mounted里

	//正确代码
async mounted() {
	//获取数据
  const res = await this.$http.get('reports/type/1')
  this.option.legend.data = res.data.data.series.map((item) => item.name)
  this.option.series = res.data.data.series
	//渲染
  let myChart = this.$echarts.init(this.$refs.myEchart)
  this.option && myChart.setOption(this.option)
},

echarts报错Cannot read property ‘getAttribute‘ of undefined

今天在查看项目时，发现控制台莫名报错，Cannot read property 'getAttribute' of undefined

通过查看，问题定位在这一行，也就是echarts初始化的时候:

const chart = echarts.init(this.$refs['chart']);

结合报错信息可以得知，错误原因是因为没获取到dom属性。

在vue中获取不到dom一般分为两种情况，一是在created中获取，这个时候只是创建了vue实例，dom并没有开始渲染。所以自然拿不到，如果你是在created中初始化echarts，那么你只需要把初始化的方法放到mounted中执行，因为mounted是dom挂载完成的生命周期。这时候顺理成章就可以取到dom。

另外一种情况就是v-if导致dom没有渲染，接下来咱们看一下html部分:

<div style="width: 100%; height: 500px">
    <!-- 暂无数据/加载中组件 -->
    <tableLoading border 
        v-if="!conditionBoxLoading && hostAgentNameList.length === 1">
    </tableLoading>
    <!-- echarts -->
    <div ref="chart" style="width: 100%; height: 500px" v-else >
    </div>
</div>

只需要将v-if / v-else改成v-show就可以了，因为v-if是条件判断是否渲染，v-show是是否显示，所以使用v-show的话即便dom被隐藏，它依然是已经创建完成了，可以获取到。解决方法如下:

<div style="width: 100%; height: 500px">
    <!-- 暂无数据/加载中组件 -->
    <tableLoading border 
        v-show="!conditionBoxLoading && hostAgentNameList.length === 1">
    </tableLoading>
    <!-- echarts -->
    <div ref="chart" style="width: 100%; height: 500px" 
        v-show="hostAgentNameList.length > 1" >
    </div>
</div>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程宝库。

 方式1使用在线链接访问在iconfont找到自己的项目的图标选择Symbol获取在线链接2：在vue3项目中找到public的index.html进行script进行引入打开浏览器看：这样就 ...