在vue中引用了Echarts 導致Cannot read property getAttribute of null？

這是報錯信息

這是網(wǎng)頁畫面

本來這個空白地方時應該有一個表格的

下面貼上源代碼
<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 : {            // 坐標軸指示器，坐標軸觸發(fā)有效
                        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: '報警占比統(tǒng)計',
                 x:'center'
             },
             tooltip : {
                 trigger: 'item',
                 formatter: "{a} <br/> : {c} (iom4quc%)"
             },
             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>

弄了一天