一种 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'));