echarts js报错 Cannot read property getAttribute of null【

来源:http://www.chinese-glasses.com 作者:Web前端 人气:166 发布时间:2020-04-15
摘要:时间: 2019-10-03阅读: 407标签: 报错 在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1.可视化的数据往往是异步加载的;2. 若一个页面存在大量的图表(尤其当存在关系图和地图时)

时间: 2019-10-03阅读: 407标签: 报错

在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的;2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可能在几秒内卡死,产生极差的用户体验。3. 引入 echarts 组件导致编译后的文件过大从而使得首次访问的加载极慢。关于第三点,大家可以参考之前的撰文 优化 Vue 项目编译文件大小。以下针对上述前两点,给出数据异步、延迟渲染的 echarts vue 组件的设计和实现方式,并对实现之中可能存在的问题进行介绍。

本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题

1. 抽离 echarts 公共部分形成基础组件


根据报错信息查找原因发现是因为 实例化 echarts 的元素不存在(未找到指定的元素),查看官方文档发现:

1.1 调研公共部分

首先,我们需要把 echarts 使用中公共的部分抽离出来,形成基础组件。

让我们在 官网 - 5 分钟上手 ECharts 教程中找到使用 echarts 的步骤:

# 1. 获取一个用于挂在 echarts 的 DOM 元素
let $echartsDOM = document.getElementById('echarts-dom')

# 2. 初始化
let myEcharts = echarts.init($echartsDOM)

# 3. 设置配置项
let option = {...}

# 4. 为 echarts 指定配置
myEcharts.setOption(option)
// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));
注:在 Vue 中,首先我们需要使用 import echarts from 'echarts' 以引入 echarts。

由上可知,在 echarts 使用中,除第三步设置配置项以外,其他的步骤都是重复的,即可以抽离出来放入组件中统一实现。

基于准备好的dom,初始化 echarts 实例,也就是只有页面存在的HTML元素才可以去初始化。

注:其实 option 配置中也存在可以抽离的部分,比如我们可以将 echarts 的颜色、散点大小、折线粗细等提取出来统一赋值,以保证 echarts 风格的统一。但由于不同类型的 ehcarts 图的颜色配置方式不同,因而实现起来相对繁琐,这里不进行说明,有兴趣的同学可以自行尝试。

解决方案:

1.2 实现 echarts 功能

10bet,首先我们书写一个简单 ehcart.vue,其中,配置项直接复制于官网的教程示例。

<style scoped>
    .echarts {
        width: 100%;
        height: 100%;
    }
</style>

<template>
    <div>
        <div class="echarts" id="echarts-dom"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'

     export default {
        name: 'echarts',
        data() {
            return {}
        },
        mounted() {
            let $echartsDOM = document.getElementById('echarts-dom')
            let myEcharts = echarts.init($echartsDOM)
            let option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }
            myEcharts.setOption(option)
        }
    }
</script>

然后在App.vue中引入这一组件,并设置 echarts 的宽高:

<style>
    .echarts-container{
        width: 100%;
        height: 20rem;
    }
</style>

<template>
    <div id="app">
        <i-echart class="echarts-container"></i-echart>
    </div>
</template>

<script>
    import iEchart from './components/echart'

    export default {
        name: 'app',
        components: {
            iEchart
        }
    }
</script>

刷新页面后,即可看到柱状图。

HTML DOM getElementById() 方法 (通过 指定ID查找元素),在初始化echarts之前打印一下看看此元素是否存在

1.3 组件化

由于我们需要抽离 option 部分,最好的方式是将其作为组件的属性,即 props 交由调用方配置:

# echart.vue

import echarts from 'echarts'

export default {
    name: 'echarts',
    props: {
        option: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    data() {
        return {}
    },
    mounted() {
        let $echartsDOM = document.getElementById('echarts-dom')
        let myEcharts = echarts.init($echartsDOM)
        let option = this.option
        myEcharts.setOption(option)
    }
}

本文由10bet发布于Web前端,转载请注明出处:echarts js报错 Cannot read property getAttribute of null【

关键词:

上一篇:MySQL数据库设计规范

下一篇:没有了

最火资讯