suncg-sgla opened a new issue, #18690:
URL: https://github.com/apache/echarts/issues/18690
### What problem does this feature solve?
I defined a component of Vue3 which contains Echarts, when I use the
component in a parent compent for only one time, the resize function did work,
but when it comes to more than 2, the resize function broken unless the page is
refreshed.
The component of Echarts is below:
`<template>
<div ref="chartEl" class="chart" :id="chartID"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const chartEl = ref();
const { chartID, options } = defineProps({
chartID: {
type: String,
default: "chart",
},
options: {
type: Object,
default: () => {
return {};
},
},
});
onMounted(() => {
const chart = echarts.init(chartEl.value);
chart.setOption(options, true);
window.addEventListener("resize", () => {
chart.resize();
});
});
</script>
<style lang="less" scoped>
.chart {
flex: 1;
height: 500px;
text-align: center;
border: 1px solid #aaa;
margin: 0 10px;
}
</style>
`
And the parent component is like this:
`<template>
<div class="content">
<SideBar></SideBar>
<div class="chart-wrapper">
<chart chartID="future" :options="FutureOptions" />
<chart chartID="cot" :options="COTOptions" />
<chart chartID="scatter" :options="scatterOptions" />
</div>
</div>
</template>
<script setup>
import SideBar from "../components/SideBar.vue";
import Chart from "../components/Chart.vue";
import FutureOptions from "../assets/options/FuturesOptions";
import COTOptions from "../assets/options/COTOptions";
import scatterOptions from "../assets/options/scatterOptions";
</script>
<style scoped lang="less">
.content {
flex: 1;
display: flex;
.chart-wrapper {
flex: 1;
}
}
</style>
`
### What does the proposed API look like?
Is there any feature to solve the problem?
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
