[ECharts] There is a chart instance already initialized on the dom渲染不出来
时间: 2024-12-26 12:24:32 浏览: 4
### ECharts 图表实例初始化冲突解决方案
当遇到 `ECharts chart instance already initialized` 错误时,通常是因为尝试在同一DOM节点上多次初始化图表实例。为了避免这种情况发生,在每次创建新实例之前应先检查并销毁已存在的实例。
```javascript
// 获取DOM元素
var domElement = document.getElementById('main');
// 检查是否存在旧的chart实例
if (window.myChart) {
window.myChart.dispose(); // 销毁现有实例
}
// 初始化新的echarts实例
window.myChart = echarts.init(domElement);
// 设置配置项和数据
myChart.setOption({
title: { text: 'ECharts Example' },
tooltip: {},
xAxis: { data: ["shirt", "cardign", "chiffon shirt"]},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36]
}]
});
```
为了进一步优化此过程,可以封装成函数以便重复利用:
```javascript
function initOrReplaceChart(id, option){
var container = document.getElementById(id);
if (!container.__chartInstance__) {
container.__chartInstance__ = echarts.init(container);
} else {
container.__chartInstance__.dispose();
container.__chartInstance__ = echarts.init(container);
}
container.__chartInstance__.setOption(option);
}
```
通过上述方法可以在渲染页面时有效防止因重复初始化而引发的问题[^1]。
阅读全文