[Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了

[zyhandgod]

Version

5.2.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius

Steps to Reproduce

封装的echart组件

父组件使用

Current Behavior

只想页面里同时显示多个echarts ，是我封装的有问题吗

Expected Behavior

正常展示多个echarts

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot[bot]]

@18347272192 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] Using multiple canvases on the same page will cause them to overlap and only the last one will be displayed. Independent IDs are also set.

[Ovilia]

If you are passing the same dom element when calling echarts.init, it's expected to render in the same chart.

[zyhandgod]

没有一样的， ----------- const ecBar = ref({ onInit: (canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width, height, devicePixelRatio: dpr }); chart.setOption({ title: { text: 'Bar Chart 1' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [5, 20, 36, 10, 10] } ] }); return chart; } });

const ecBar2 = ref({ onInit: (canvas, width, height, dpr) => { const chart1 = echarts.init(canvas, null, { width, height, devicePixelRatio: dpr }); chart1.setOption({ title: { text: 'Bar Chart 2' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [10, 15, 30, 20, 50] } ] }); return chart1; } });

[zyhandgod]

<ec-canvas id="mychart-dom-multi-bar" :canvas-id="'mychart-dom'" :ec="ecBar" />
    <ec-canvas id="mychart-dom-multi-scatter" :canvas-id="'mychart-dom-bar'" :ec="ecBar2" />

[Ovilia]

This may be an issue related to your implementation of import EcCanvas from "./ec-canvas.vue"

[zyhandgod]

ec-canvas.vue------

<canvas type="2d" class="ec-canvas" :canvas-id="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" style="height: 300px; width: 100%">

[weixunnaicha]

echart的渲染需要获取到绑定ref的具体结构，如果你是以二封组件的方式调用，得把前面绑定ref的地方也改成动态的才行，不然获取的是同一个结构