use echarts in vue: Uncaught Error: Initialize failed: invalid dom.

created at 06-09-2022 views: 20

When using the Vue created method to initialize echarts, the following prompts will appear:

Uncaught Error: Initialize failed: invalid dom

created just completed the initialization of vue and has not completed the mount. If you call init of echarts at this time, you will find that dom is invalid, so it will prompt invalid because dom has not yet been completed at this time. initialized

Because we can use the mounted function to let dom complete the initialization first. When the call is made, echarts can complete the initialization

<script>
    var app = new Vue({
        el: '#app',
        created:function () {
          alert("Vue initialized successfully")
        },
        mounted:function () {
            //Complete the initialization of echarts here
            this.drawPie('main')
        },
        methods:{
            drawPie(id){
                alert("drawPie was called")
                console.log(document.getElementById(id))
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a}<br/>{b}:{c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:this.opinion
                    },
                    series: [
                        {
                            name: 'Access source',
                            type:'pie',
                            radius:['50%','70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'blod'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.opinionData
                        }
                    ]
                })
            }


        },
// data data object
        data: {
                charts: '',
                opinion:['Direct access','email marketing','affiliate advertising','video advertising','search engine'],
                opinionData:[
                    {value:335, name:'Direct access'},
                    {value:310, name:'email marketing'},
                    {value:234, name:'Affiliate Ads'},
                    {value:135, name:'Video ad'},
                    {value:1548, name:'Search Engine'}
                ]
        }
    })
</script>

In this way, when the page is loaded, the chart can be displayed.

created at:06-09-2022
edited at: 06-09-2022: