How to retrieve all ECharts instance after initialization?

Question

How do I get all ECharts instance without knowing their id's?

As I know, this approach is doable with other chart libraries like chart.js, here is an example

Answer 1

You can use echarts.getInstanceByDom.

The question is how do you identify the echart containing DOM elements.

• The safest solution would be to search all divs and canvas elements (target: HTMLDivElement|HTMLCanvasElement).

function getAllInstances(){
    const instances = [];
    document.querySelectorAll('canvas, div').forEach(
        function(e){
            const instance = echarts.getInstanceByDom(e);
            if(instance){
                instances.push(instance);
            }
        }
    );
    return instances;
}

this might be excessive for heavy pages.

• The cheekiest solution is to use the non-documented attribute _echarts_instance_ that all echarts containers seem to have

function getAllInstances(){
    const instances = [];
    document.querySelectorAll('canvas[_echarts_instance_], div[_echarts_instance_]').forEach(
        function(e){
            const instance = echarts.getInstanceByDom(e);
            if(instance){
                instances.push(instance);
            }
        }
    );
    return instances;
}

this is slightly unsafe, as the undocumented property can change in the future without notice.

• the solution in the code below, attempting to get the middle way, finds all canvas and svg elements and then goes up the parent element DOM chain until an instance is found or we get to the top of the document:

function getAllInstances(){
    const instances = [];
    document.querySelectorAll('canvas, svg').forEach(
        function(e){
            let instance = echarts.getInstanceByDom(e);
            do{
                instance = echarts.getInstanceByDom(e);
                if(instance){
                    console.log(e)
                    break;
                }
                e = e.parentElement;
            }while(e);
            if(instance){
                instances.push(instance);
            }
        }
    );
    return instances;
}

Here's a test example with different types of echarts containers:

const option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [1, 2, 5, 4, 3, 6, 7],
            type: 'line'
        }
    ]
}

const myChart1 = echarts.init(document.getElementById('chart-container1'), null, { renderer: 'svg' });
myChart1.setOption(option);

const myChart2 = echarts.init(document.getElementById('chart-container2'));
myChart2.setOption(option);

const myChart3 = echarts.init(document.getElementById('chart-container3'));
myChart3.setOption(option);

function getAllInstances(){
    const instances = [];
    document.querySelectorAll('canvas, svg').forEach(
        function(e){
            let instance = null;
            do{
                instance = echarts.getInstanceByDom(e);
                if(instance){
                    break;
                }
                e = e.parentElement;
            }while(e);
            if(instance){
                instances.push(instance);
            }
        }
    );
    return instances;
}

const instances = getAllInstances();
console.log(instances.includes(myChart1), instances.includes(myChart2), instances.includes(myChart3));

* {
    margin: 0;
    padding: 0;
}
.chart {
    display: inline-block;
    width: 30vw;
    height: 260px;
    position: relative;
}

<div class="chart" id="chart-container1"></div>
<div class="chart" id="chart-container2"></div>
<canvas id="chart-container3" height="260" class="chart"></canvas>
<canvas id="non_chart_canvas"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>