一种 vue element 技术栈刷新 echarts 图表的实现方法

一种 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'));
版权声明

弈心博客


本文首发弈心博客,转载请附上博文链接!