What problem does this feature solve?

For SVG renderer, it would be flexible and creative if allow adding DOM to the chart through foreignObject .

What does the proposed API look like?

Currently no good idea about how to design the API in ECharts. Here is the proposed usage in zrender.

DOM string

// DOM string
const dom = new zrender.ForeignObject({
    style: {
        x: 600,
        y: 250,
        width: 200,
        height: 400
    },
    rotation: -60 * Math.PI / 180,
    originX: 600 + 200 / 2,
    originY: 250 + 400 / 2,
    // scaleX: 2,
    // scaleY: 2,
    html: `
<h1 class="hover-change-color" style="color:#F72C5B">Apache ECharts</h1>
<h4>一个基于 JavaScript 的开源可视化图表库</h3>
<img height="150" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/index-home-pie.png?_v_=20200710_1" />
`
});
zr.add(dom);

DOM Array

// DOM array
const h1 = document.createElement('h1');
h1.className = 'hover-change-color';
h1.innerText = 'Created Element';
const p = document.createElement('p');
p.innerText = new Date().toLocaleString();
setInterval(() => p.innerText = new Date().toLocaleString(), 1e3);

const dom2 = new zrender.ForeignObject({
    style: {
        x: 600,
        y: 150,
        width: 200,
        height: 200
    },
    originX: 600 + 200 / 2,
    originY: 150 + 200 / 2,
    scaleX: 0.8,
    scaleY: 0.8,
    html: [h1, p]
});
zr.add(dom2);

Video

// video
const video = document.createElement('video');
video.src = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/zh/video/index.mp4';
video.poster = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/zh/video/index-4.jpg';
video.muted = true;
video.autoplay = true;
video.controls = true;
video.loop = true;
video.style.objectFit = 'contain';
video.style.maxWidth = '100%';

const videoDom = new zrender.ForeignObject({
    style: {
        x: 50,
        y: 250,
        width: 400,
        height: 400
    },
    html: video
});
zr.add(videoDom);

Screenshot