一种 vue element 技术栈刷新 echarts 图表的实现方法
将 echarts 图封装在子组件,数据由父组件传入。在父组件强制刷新子组件实现echarts数据刷新。
组件强制刷新方法请参考小编昨天的博客vue使用key实现组件刷新(渲染重置)笔记
全部代码太多,仅贴和问题相关的关键步骤。
<template>
<sa :ids="ids" :datas="datas" :key="randerKey" />
</template>
ids 和 datas 是传入的数组类型数据,randerKey用于强制刷新子组件。细节请传送
<template>
<el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" v-for="(item, index) in ids" :key="index">
<div class="grid-content bg-purple rander-item">
<div :id="index" style="width: 100%; height: 300px;"></div>
</div>
</el-col>
</template>
<script>
import echarts from "echarts";
export default {
props: {
ids: Array,
datas: Array
},
}
</script>
这样,在补充业务代码后可以实现:当数据刷新时,子组件强制刷新以实现echarts图表重新渲染
比如报错:Cannot read property 'getAttribute' of
类似于这样:
echarts.min.js:22 Uncaught TypeError: Cannot read property 'getAttribute' of null
at Wi (echarts.min.js:22)
at Ds (echarts.min.js:22)
at Object.t.init (echarts.min.js:22)
出现这个问题,是echarts找不到 id,请检查id~
比如,在下面这一行代码中的 main
是否在模板中存在?
var myChart = echarts.init(document.getElementById('main'));