在vue中引用了Echarts 导致Cannot read property getAttribute of null?

这是报错信息clipboard.png

这是网页画面
clipboard.png
本来这个空白地方时应该有一个表格的

下面贴上源代码
<template>

<div class="table" style="height: 100%;">
    <div>
        <el-card class="box-card">
            <div slot="header">
                <p>菜单列表</p>
            </div>
            <div class="text item" @click="tabId=0" :class="[tabId==0 ? 'active' : '']">里程分析</div>
            <div class="text item" @click="tabId=1" :class="[tabId==1 ? 'active' : '']">故障分析</div>
        </el-card>
        <div class="tablebox" v-show="tabId==0">
            <el-card class="table-card" style="height: 650px;overflow-y: auto">
                <v-ClassifyTree @handleClick="handleNodeClick"></v-ClassifyTree>
            </el-card>
            <div class="handle-box" v-if="nowShow">
                    <div  style="height: 80px;padding: 20px 10px;">
                        <p style="background-color:#29a8cd;text-align: center;line-height: 50px">请先选择需要操作的车辆</p>
                    </div>
            </div>
            <div class="handle-box" v-if="boxShow">
                <div>
                    <el-card>
                        <div slot="header">
                            <el-row><span style="font-size:20px">选择月份</span><el-date-picker v-model="value4" type="month" placeholder="选择月">
                            </el-date-picker></el-row>
                        </div>
                        <div id="charts" style="width: 100%;height: 250px;"></div>
                    </el-card>
                </div>
            </div>
        </div>

        <div class="tablebox" v-show="tabId==1">
            <el-card class="table-card" style="height: 650px;overflow-y: auto">
                <v-ClassifyTree @handleClick="handleNodeClick"></v-ClassifyTree>
            </el-card>
            <div class="handle-box">
                <div v-if="nowShow" style="height: 80px;padding: 20px 10px;">
                    <p style="background-color:#29a8cd;text-align: center;line-height: 50px">请先选择需要操作的车辆</p>
                </div>
                <div v-if="boxShow">
                    <el-card>
                        <div slot="header">
                            <el-row><span style="font-size:20px">选择月份</span><el-date-picker v-model="value2" type="month" placeholder="选择月">
                            </el-date-picker></el-row>
                        </div>
                        <div id="charts2" style="width: 100%;height: 250px;"></div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</div>

</template>

<script>

import vClassifyTree from '../common/ClassifyTree.vue';
let echarts = require('echarts/lib/echarts');
require('echarts/map/js/china');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/line');
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
export default {
    data() {
        return {
            tabId:0,
            value3:'',
            value4:'',
            value2:'',
            value1:'',
            boxShow:false,
            nowShow:true,
            node:'',
            show:'',
            carArchives:[],
        }
    },
    components:{
        vClassifyTree
    },
    mounted() {
        this.drawLine();
        this.drawLine2();    
    },
    methods: {
        drawLine(){
        let myChart = echarts.init(document.getElementById('charts'));
        var option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                        type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        name:'日期',
                        data : ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:'里程'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[10, 52, 200, 334, 390, 330, 220,10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            };
            myChart.setOption(option);
        },
        drawLine2(){
        let myChart = echarts.init(document.getElementById('charts2'));
         var option = {
             title : {
                 text: '报警占比统计',
                 x:'center'
             },
             tooltip : {
                 trigger: 'item',
                 formatter: "{a} <br/>{b} : {c} ({d}%)"
             },
             series : [
                 {
                     name: '访问来源',
                     type: 'pie',
                     radius : '55%',
                     center: ['50%', '60%'],
                     data:[
                         {value:335, name:'直接访问'},
                         {value:310, name:'邮件营销'},

                     ],
                     itemStyle: {
                         emphasis: {
                             shadowBlur: 10,
                             shadowOffsetX: 0,
                             shadowColor: 'rgba(0, 0, 0, 0.5)'
                         }
                     }
                 }
             ]
         };
            myChart.setOption(option);
            myChart.resize();
        },
       },
        //车辆列表展开
        handleNodeClick(childs) {
            this.nowShow=false;
            this.boxShow=true;
            this.node=childs;
            var this_ = this;
            if(this.node.leaf) {
                this_.show = true;
                this.$axios.post('api/achives/achivesInfo', {
                    'LicencePlate': this.node.name
                }).then((res) => {
                    this.carArchives.push(res.data.achivesInfo);
                    console.log(this.carArchives);
                });
            } else {
                console.log('你点击的不是车牌!');
            }
        }

    }
}

</script>

弄了一天

回答:

我看你这个表格的初始化在mounted的时候,通过调用this.drawLine();来实现的,但是你的charts这时候不在页面节点中,因为boxShow为false,所以初始化不成功。echats初始化的时候,节点一定要是在页面中真实存在的。

回答:

你用了v-if,第二个tab里么有dom,所以echarts渲染失败,可以用v-show

回答:

getAttribute是未获取到图形容器,VUE需要先把容器渲染出来才能挂载上echarts图形。
使用v-if的时候,页面渲染没有把节点if里面的节点渲染出来,所以无法找到容器。
试了几种方法:
1.把v-if改为v-show,后者已经渲染只是没有显示。
2.this.$nextTick(()=> { this.drawLine(); this.drawLine2(); }) 这样做能实现。
3.setTimeout(() => { this.drawLine(); this.drawLine2(); },10); 弄一个定时器,等页面加载完成后再执行,这方法肯定不咋样。
暂时没有找到更好办法,有更好方法的分享下!!!!!

回答:

其次 你先把这个删了v-if=”boxShow” 估计能出来

回答:

mounted里面执行的两个方法放到this.$nextTick(function(){})中试下,必须保证dom渲染完成完毕才可以获取dom节点

回答:

首先你是不是npm install 下载的echarts,如果是,那么只需要 import echarts from ‘echarts’就行了。

回答:

你这个解决了吗

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注