New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug] Vue3 support seems not to behave correctly #17723
Comments
Please search related issues with the keyword “vue” and you might find the answer. :) |
@plainheart It still seems a bug to me given it's not behaving as expected and there's no explaination on what is going wrong... |
@Tails128 <script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { useWindowSize } from "@vueuse/core";
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
const graphRef = ref()
let chart = null as unknown as echarts.ECharts
onMounted(() => {
chart = echarts.init(graphRef.value);
chart.setOption(option);
const { width } = useWindowSize();
watch(width, () => {
if (chart != undefined) {
console.log("Trying to resize!");
chart.resize({
width: width.value,
height: 300
});
console.log(width.value)
}
});
})
</script>
<template>
<div style="
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-items: center;
">
<div id="graph" ref="graphRef" style="width: 100%; height: 300px" />
</div>
</template>
<style>
body,
html {
margin: 0;
padding: 0;
}
</style> |
This comment was marked as off-topic.
This comment was marked as off-topic.
I see... do you think it would be possible to include this in the "get started" section or in any documentation? While it's true there are closed issues already, it's not super simple to find them and a simple warning text could save devs a lot of time and it could also save the project a lot of duplicated bugs |
Thanks for your suggestion. Though it's possible to mention this issue in the handbook or the FAQ page, I think it is mainly due to the third-party 'vue' and this is not a bug of ECharts. We need to read the documentation carefully and notice the warnings about the usage when using a third-party library. It's always good to report a bug without any external framework. |
Version
5.4.*
Link to Minimal Reproduction
https://github.com/Tails128/echart-vue-issue
Steps to Reproduce
Please refer to the github repo for how the chart was created & what the option is.
In order to see the error (you will see it in the console), just resize the window.
I am afraid I'm setting it up incorrectly, if so please add a guide on how to setup echart for vue3
Current Behavior
Expected Behavior
Environment
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: