[Bug] 同一个页面使用多个画布,会导致重叠在一起,只展示最后一个,独立的id 也设置了
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.2.2
### Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
### Steps to Reproduce
### 封装的echart组件
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,
};
},
};
### 父组件使用
import EChart from 'e-charts.v'
### Current Behavior
只想页面里同时显示多个echarts ,是我封装的有问题吗
### Expected Behavior
正常展示多个echarts
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.