Echarts.init在同一个DOM上多次调用-为什么有效?

时间:2019-02-10 12:15:17

标签: javascript echarts

在Echarts的官方文档中,他们声明

  

您不得在单个容器上初始化多个ECharts实例。

docs source

我可能对文档有误解,但是当我尝试在已经包含实例的DOM容器上调用echarts.init()时,我会例外。相反,我取回了相同的现有echarts实例。这实际上是有用的,但是在通过.setOption()更新图表内容时,我曾避免使用同一图表的双重实例化。

您能解释一下它为什么起作用以及您认为什么是“最佳实践”吗?

>> Codepen

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>

0 个答案:

没有答案