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

[18347272192]

Version

5.2.2

Link to Minimal Reproduction

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

Steps to Reproduce

封装的echart组件

<script lang="js"> import echarts from './echarts.min.js'; import { ref, reactive } from "vue"; import EcCanvas from "./ec-canvas.vue"; export default { components: { EcCanvas }, props: { canvasId: { type: String, default: '' } }, setup(props, { expose, emit }) { const ec = reactive({ lazyLoad: true }); const ecCanvasRef = ref(null); const refresh = (options) => { if (!ecCanvasRef.value) { console.error('ecCanvas未获取到dom'); return; } ecCanvasRef.value?.init((canvas, width, height, canvasDpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: canvasDpr }); canvas.setChart(chart); chart.setOption(options); // 监听图形绘制完成事件 chart.on('finished', () => { emit('send-data', Date.now()) // console.log('图形绘制完成城市分布', props.canvasId, Date.now()); // emit('send-data', Date.now()) // 在这里可以执行你想要的操作，表示图形已经绘制完成 }); return chart; }); }; expose({ refresh, }); return { ec, ecCanvasRef, }; }, }; </script>

父组件使用

<script setup> import EChart from 'e-charts.v' </script>

Current Behavior

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

Expected Behavior

正常展示多个echarts

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-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.

[18347272192]

没有一样的，
-----------
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;
}
});

[18347272192]

<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"

[18347272192]

ec-canvas.vue------

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

<script setup> import { defineProps, onMounted, ref } from 'vue'; import Taro from "@tarojs/taro"; import WxCanvas from './WxCanvas'; import echarts from './echarts.min.js'; // 定义props const props = defineProps({ canvasId: { type: String, default: '' }, ec: { type: Object, default: null } }); const canvasNode = ref(null); const chart = ref(null); // 组件初始化 onMounted(() => { echarts.registerPreprocessor(option => { if (option && option.series) { if (option.series.length > 0) { option.series.forEach(series => { series.progressive = 0; }); } else if (typeof option.series === 'object') { option.series.progressive = 0; } } }); // 检查是否传递了ec数据 if (!props.ec) { console.warn('组件需绑定 ec 变量，例：'); return; } // 如果没有 lazyLoad，调用初始化 if (!props.ec.lazyLoad) { init(); } }); // 初始化图表 function init() { const query = Taro.createSelectorQuery(); query.select('.ec-canvas') .fields({ node: true, size: true }) .exec(res => { if (!res || res.length === 0 || res[0].node === null) { console.error('未获取到canvas的dom节点,请确认在页面渲染完成后或节点,taro中页面渲染完成的生命周期是useReady'); return; } const canvasNodeElement = res[0].node; const canvasDpr = Taro.getSystemInfoSync().pixelRatio; const canvasWidth = res[0].width; const canvasHeight = res[0].height; const ctx = canvasNodeElement.getContext("2d"); const canvas = new WxCanvas(ctx, props.canvasId, true, canvasNodeElement); echarts.setCanvasCreator(() => canvas); if (typeof props.ec.onInit === "function") { chart.value = props.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr); } else { // 如果没有传递 onInit，可以触发init事件 props.ec.onInit?.(canvas, canvasWidth, canvasHeight, canvasDpr); } }); } // canvas触摸事件 function touchStart(e) { if (chart.value && e.touches.length > 0) { const touch = e.touches[0]; const handler = chart.value.getZr().handler; handler.dispatch('mousedown', { zrX: touch.x, zrY: touch.y }); handler.dispatch('mousemove', { zrX: touch.x, zrY: touch.y }); handler.processGesture(wrapTouch(e), "start"); } } function touchMove(e) { if (chart.value && e.touches.length > 0) { const touch = e.touches[0]; const handler = chart.value.getZr().handler; handler.dispatch('mousemove', { zrX: touch.x, zrY: touch.y }); handler.processGesture(wrapTouch(e), "change"); } } function touchEnd(e) { if (chart.value) { const touch = e.changedTouches ? e.changedTouches[0] : {}; const handler = chart.value.getZr().handler; handler.dispatch('mouseup', { zrX: touch.x, zrY: touch.y }); handler.dispatch('click', { zrX: touch.x, zrY: touch.y }); handler.processGesture(wrapTouch(e), "end"); } } function wrapTouch(event) { for (let i = 0; i < event.touches.length; ++i) { const touch = event.touches[i]; touch.offsetX = touch.x; touch.offsetY = touch.y; } return event; } </script> <style scoped> .ec-canvas { width: 100%; height: 100%; } </style>