在Echarts的官方文档中,他们声明
您不得在单个容器上初始化多个ECharts实例。
我可能对文档有误解,但是当我尝试在已经包含实例的DOM容器上调用echarts.init()时,我会例外。相反,我取回了相同的现有echarts实例。这实际上是有用的,但是在通过.setOption()更新图表内容时,我曾避免使用同一图表的双重实例化。
您能解释一下它为什么起作用以及您认为什么是“最佳实践”吗?
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
const InstanceA = echarts.init(document.getElementById('chart'))
InstanceA.setOption(option)
// Here I would expect an exception from my understanding of
// https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init
const InstanceB = echarts.init(document.getElementById('chart'))
InstanceB.setOption({ series: [{ type: 'bar', data: [10,10,10,10,10,10,10] }] })
// InstanceB still points to InstanceA
#chart {
width: 400px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<div id="chart"></div>