动态创建元素上无法加载ECharts问题求助

动态创建元素后初始化ECharts出现空白，大概率是以下几个原因，对应解决办法如下：

核心问题：元素未挂载到DOM树 #

ECharts初始化时需要读取元素的实际布局信息，你创建的chartDom只是内存中的元素，还没添加到页面DOM里，自然无法渲染。

修改代码，添加挂载步骤：

let chartDom = document.createElement("div");
chartDom.style.height = "350px";
chartDom.style.width = "100%"; // 必须设置宽度，不然默认宽度为0
// 把元素挂载到页面的父容器中（这里示例挂到body，你可以换成自己的容器）
document.body.appendChild(chartDom);

// 再初始化ECharts
var myChart = echarts.init(chartDom, null, {
    renderer: 'canvas',
});

// 关键：必须传入图表配置项
const option = {
    // 替换成你的图表配置，比如示例折线图
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 220, 180, 250],
        type: 'line'
    }]
};
myChart.setOption(option);

其他可能的原因 #

• 未设置元素宽度：只给高度不给宽度，元素宽度默认0，图表无法显示，一定要显式设置width（可以是固定像素或百分比）
• 忘记调用setOption：初始化ECharts后必须传入配置项，否则图表没有任何内容
• 异步场景下时机不对：如果是在接口请求完成后创建元素，确保元素挂载完成后再初始化，或者初始化后调用myChart.resize()强制重新计算尺寸

内容的提问来源于stack exchange，提问作者Nitesh Kumar