Uncaught (in promise) Error: please specify container or renderCanvas!

404_Not_Found11

已于 2025-03-08 11:10:21 修改

阅读量263

点赞数 4

文章标签： javascript 前端 vue.js vcharts

于 2025-03-08 11:09:28 首次发布

本文链接：https://blog.youkuaiyun.com/2301_80587300/article/details/146112792

版权

用vcharts可视化出现了这个报错

翻译为：请指定图表的容器！

原代码

<template>
    <div id="com-container">
        <div id="myChart"></div>
    </div>
 </template>

<script setup>
import VChart from '@visactor/vchart';
const spec = {
    // 跟着文档配置
}

const myChart = document.getElementById('myChart');
console.log(myChart)
const vchart = new VChart(spec, { dom: myChart });
vchart.renderSync();

window['vchart'] = vchart;

</script>

通过打印 myChart 发现值为null

说明要么元素不存在（id写错）要么元素还没加载出来

排除第一种，解决第二种情况使用 document.addEventListener 来监听dom的加载

document.addEventListener('DOMContentLoaded',function(){
    const myChart = document.getElementById('myChart');
    console.log(myChart)
    if(myChart){
        const vchart = new VChart(spec, { dom: myChart });
        vchart.renderSync();

        window['vchart'] = vchart;
    }else{
        console.log('找不到myChart')
    }
})

dom加载完后才触发执行接下来的操作，报错解决了