You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "suncg-sgla (via GitHub)" <gi...@apache.org> on 2023/06/02 08:43:49 UTC
[GitHub] [echarts] suncg-sgla opened a new issue, #18706: When the options of a stock chart changed in Vue 3, the chart is broken![Feature]
suncg-sgla opened a new issue, #18706:
URL: https://github.com/apache/echarts/issues/18706
### What problem does this feature solve?
The option of a stock chart changed but the chart can not update accordingly but show like this:
After refreshing the webpage the chart shows correctly like this:
The chart.vue code is:
```
<template>
<div ref="chartEl" class="chart" :id="chartID"></div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
const chartEl = ref();
const { chartID, options } = defineProps({
chartID: {
type: String,
default: "chart",
},
options: {
type: Object,
default: () => {
return {};
},
},
});
function chartInit() {
const chart = echarts.init(chartEl.value);
chart.setOption(options, true);
window.addEventListener("resize", () => {
chart.resize();
});
}
onMounted(() => {
chartInit();
});
watch(
options,
(newVal, preVal) => {
console.log(newVal);
chartInit();
},
{
deep: true,
}
);
</script>
<style lang="less" scoped>
.chart {
flex: 1;
height: 500px;
text-align: center;
border: 1px solid #aaa;
margin: 0 10px;
}
</style>
```
### What does the proposed API look like?
How can let the chart automatically update correctly?
--
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
[GitHub] [echarts] helgasoft commented on issue #18706: [Feature] When the options of a stock chart changed in Vue 3, the chart is broken!
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #18706:
URL: https://github.com/apache/echarts/issues/18706#issuecomment-1574341329
That is a **Vue debugging** question.
--
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