echarts导出、保存图片不显示数据问题

需求是使用echarts的图表功能先生成图片，通过浏览发现  每次生成的都是只有  底图没有数据。就是下面这种效果

网址：https://www.echartsjs.com/zh/api.html#echartsInstance.getDataURL

解决这个问题的 办法 有两个

1，就是  延迟 相机的 拍照时间  

setTimeout(function() {this.chartImgUrl = chart.getDataURL({pixelRatio: 2,backgroundColor: '#fff'});
}, 1000)						        

2 就是 取消 图表里面动画效果，

就是在 option 中添加一个  animation: false 属性 就可以解决这个问题

在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案 - 近距离 - 博客园

 

ptContent.value.forEach(item => {chartOption({ id: item }).then(res => {if (res.code == 200) {const optionString = res.result;nextTick(() => {try {// 关键修改1：在闭包内声明独立实例const currentItem = item; // 创建块级作用域// 初始化ECharts实例（确保在闭包内声明）const chartInstance = echarts.init(document.getElementById(currentItem.toString()));// 解析option（可移出闭包优化）function parseOptionWithFunctions(optionString) {try {const optionFunction = new Function(`return ${optionString};`);return optionFunction();} catch (error) {return null;}}const option = parseOptionWithFunctions(optionString);chartInstance.setOption(option);// 窗口resize监听（需移除旧监听）window.addEventListener('resize', () => chartInstance.resize());// 关键修改2：使用闭包捕获独立实例和itemsetTimeout((function(ci, ciItem) {return function() {try {const baseImage = ci.getDataURL("png");const doc = parseHTML(charset.value);const workingDoc = doc.cloneNode(true);const workingDivs = workingDoc.querySelectorAll('div.dynamic-div');workingDivs.forEach(div => {// 严格匹配ID（确保类型一致）if (div.id === ciItem.toString()) {const img = workingDoc.createElement('img');img.src = baseImage;img.alt = `Image for ${ciItem}`;img.className = 'dynamic-image';div.parentNode.replaceChild(img, div);}});charset.value = serializeHTML(workingDoc.body);} catch (e) {console.error('Image capture failed:', e);}};})(chartInstance, currentItem), 1000); // 传递实例和item} catch (e) {console.error('Failed to render chart:', e);}});}});
});