Referencing Echarts in vue causes Cannot read property getAttribute of null?

this is the error message clipboard.png


clipboard.png
there should be a table

in this blank space.

paste the source code
< template >

below
<div class="table" style="height: 100%;">
    <div>
        <el-card class="box-card">
            <div slot="header">
                

</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:-sharp29a8cd;text-align: center;line-height: 50px">

</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:-sharp29a8cd;text-align: center;line-height: 50px">

</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: ["-sharp3398DB"],
                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 >

has been working on it all day

Mar.14,2021

I see that the initialization of your table in mounted is achieved by calling this.drawLine ();, but your charts is not in the page node at this time, because boxShow is false, so initialization is not successful. When initializing echats, the node must be real on the page.


you use dom, if. There is no dom, in the second tab, so echarts rendering fails. You can use v-show


getAttribute does not get the graphics container. VUE needs to render the container before mounting the echarts graphics.
when using v-if, the page rendering does not render the nodes in the node if, so the container cannot be found.
tried several methods:
1. Change v-if to vMurshow, which has been rendered but not displayed.
2.this.$nextTick (() = > {this.drawLine (); this.drawLine2 ();}) this can be done.
3.setTimeout (() = > {this.drawLine (); this.drawLine2 ();}, 10); get a timer and wait for the page to load, which is definitely not good.
has not found a better way for now, there is a better way to share!


secondly, you delete the two methods executed in


mounted to this.$nextTick (function () {}). You must ensure that the dom rendering is completed before you can get the dom node


first of all, if you download echarts, from npm install, then you only need import echarts from 'echarts'.


have you solved this

Menu