You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "18347272192 (via GitHub)" <gi...@apache.org> on 2024/12/19 10:00:07 UTC
[I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
18347272192 opened a new issue, #20604:
URL: https://github.com/apache/echarts/issues/20604
### Version
5.2.2
### Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
### Steps to Reproduce
### 封装的echart组件
<template>
<ec-canvas ref="ecCanvasRef" :canvas-id="canvasId" :ec="ec" style="height: 300px; width: 100%"></ec-canvas>
</template>
<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>
<template>
<EChart ref="addressOptions" canvas-id="pie-canvas1"
style="width: 100%; height: 250px;" />
<EChart ref="pastThreeYear" canvas-id="pie-canvas2"
style="width: 100%; height: 300px" />
</template>
### Current Behavior
只想页面里同时显示多个echarts ，是我封装的有问题吗
### Expected Behavior
正常展示多个echarts
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
Posted by "18347272192 (via GitHub)" <gi...@apache.org>.
18347272192 commented on issue #20604:
URL: https://github.com/apache/echarts/issues/20604#issuecomment-2556235197
没有一样的， <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" /> -----------
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;
}
});
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
Posted by "Ovilia (via GitHub)" <gi...@apache.org>.
Ovilia commented on issue #20604:
URL: https://github.com/apache/echarts/issues/20604#issuecomment-2556274957
This may be an issue related to your implementation of `import EcCanvas from "./ec-canvas.vue"`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
Posted by "18347272192 (via GitHub)" <gi...@apache.org>.
18347272192 commented on issue #20604:
URL: https://github.com/apache/echarts/issues/20604#issuecomment-2556234013
<template>
<view class="container">
<!-- 绑定 ecBar 和 ecScatter，确保数据传递正确 -->
<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" />
<ec-canvas id="mychart-dom-ba" :canvas-id="'mychart-dom-ba'" :ec="ecBar3" />
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from '@/components/echarts_line/echarts.min.js';
import EcCanvas from '@/components/echarts_line/ec-canvas.vue';
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;
}
});
const ecBar3 = ref({
onInit: (canvas, width, height, dpr) => {
const chart2 = echarts.init(canvas, null, {
width,
height,
devicePixelRatio: dpr
});
chart2.setOption({
title: { text: 'Bar Chart 3' },
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
yAxis: {},
series: [
{ type: 'bar', data: [15, 25, 35, 45, 55] }
]
});
return chart2;
}
});
// 组件挂载时执行
onMounted(() => {
// 页面首次渲染时，可以在这里做一些初始化操作
});
</script>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20px;
}
.ec-canvas {
width: 100%;
height: 300px;
/* 每个图表的高度 */
margin-bottom: 20px;
/* 设置每个图表之间的间距 */
}
</style>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
Posted by "Ovilia (via GitHub)" <gi...@apache.org>.
Ovilia commented on issue #20604:
URL: https://github.com/apache/echarts/issues/20604#issuecomment-2553467963
If you are passing the same dom element when calling `echarts.init`, it's expected to render in the same chart.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
Posted by "18347272192 (via GitHub)" <gi...@apache.org>.
18347272192 commented on issue #20604:
URL: https://github.com/apache/echarts/issues/20604#issuecomment-2556324968
ec-canvas.vue------
<template>
<!-- 确保绑定 ec 变量 -->
<canvas type="2d" class="ec-canvas" :canvas-id="canvasId" @touchstart="touchStart" @touchmove="touchMove"
@touchend="touchEnd" style="height: 300px; width: 100%">
</canvas>
</template>
<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 变量，例：<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
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>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
Posted by "18347272192 (via GitHub)" <gi...@apache.org>.
18347272192 commented on issue #20604:
URL: https://github.com/apache/echarts/issues/20604#issuecomment-2556235566
<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" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 同一个页面使用多个画布，会导致重叠在一起，只展示最后一个，独立的id 也设置了 [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] commented on issue #20604:
URL: https://github.com/apache/echarts/issues/20604#issuecomment-2553293382
@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. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**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.
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org