apache / apache/echarts

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

Open
#20,604 7 comments 0 reactions 0 assignees View on GitHub
pending support
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.