I've been facing a challenge while working with Echarts to create a line chart. I have created a LineChart.vue component in which I expect to receive array props from its parent component to use as data options for Echarts.
However, the array props, which act as proxies for the arrays, don't seem to function correctly. Although the console shows that they are targeting the right object, Echarts does not recognize these proxies, resulting in no data being displayed on the chart.
What's more puzzling is that I discovered a workaround by accident - if I leave my terminal open, make some insignificant changes to the code (such as commenting and uncommenting the same lines), and save it (triggering a re-render of the component), the props magically start working and the line chart appears! But upon page refresh, the data disappears again.
Below is the code snippet:
<template>
<div id="chart"></div>
</template>
<script>
let chart;
export default {
data() {
return {
option: {
name: "demo",
xAxis: {
type: "category",
data: [],
},
yAxis: {
// type: "value",
},
series: [
{
data: [],
type: "line",
},
],
},
};
},
props: {
xAxisData: Array,
seriesData: Array,
},
methods: {
initChart() {
chart = this.$echarts.init(document.getElementById("chart"));
// These four lines were the ones I manipulated to achieve the 'weird' result
this.option.xAxis.data = this.xAxisData;
this.option.series[0].data = this.seriesData;
console.log(this.option.xAxis.data);
console.log(this.option.series[0].data);
chart.setOption(this.option);
},
},
mounted() {
this.initChart();
},
watch: {
xAxisData: {
handler: function (newData) {
this.option.xAxis.data = newData;
},
deep: true,
},
seriesData: {
handler: function (newData) {
this.option.series[0].data = newData;
},
deep: true,
},
},
};
</script>
<style scoped>
#chart {
height: 250px;
width: 400px;
}
</style>
Here iswhat the proxy looks like before and after minor code changes. I also attempted using Object.assign() to convert the proxy xAxisData into an object, but it appeared empty! Could this be related to the component lifecycle? I'm unsure about when and where I can obtain a functional proxy. Any insights on what might be causing this issue?
For reference, here are the values of the props shown in the console (console) and in Vue devtools (Vue devtools).