Así que he estado tratando de hacer que un gráfico de líneas funcione con Echarts. Hice este LineChart.vue y espero que obtenga accesorios, que son matrices, de su componente padre como datos de opciones de Echarts.
Pero los accesorios, que son proxies de matrices, no parecen funcionar bien. En la consola se muestra que tiene el objetivo correcto, pero Echarts no reconoce este proxy, por lo que no había datos en mi gráfico.
Y para hacerlo más extraño para mí, accidentalmente descubrí que si mantengo mi terminal abierta, realizo algunos cambios en el código (que no es más que comentar y descomentar las mismas líneas) y guardarlo (lo que probablemente vuelve a generar este componente), ¡los accesorios de alguna manera funcionan y el gráfico de líneas realmente aparece! Pero si actualizo la página, los datos vuelven a quedar en blanco.
Aquí está mi código:
<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 are the four lines that I commented and uncommented to make things wierd 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> Y así es como es el proxy antes y después de que hice algunos cambios menores en el código . También intenté convertir este proxy xAxisData en un objeto usando Object.assign() , ¡pero resultó estar vacío! Estoy empezando a pensar que podría tener algo que ver con el ciclo de vida del componente, pero no tengo idea de cuándo y dónde puedo obtener un proxy funcional. ¿Alguien puede decirme qué está pasando realmente?
FYI, aquí están el valor de los accesorios en la consola y el valor de los accesorios en vue devtool .
Acabo de descubrirlo. Solo para que lo sepas, la información proporcionada anteriormente no era suficiente, e hice un movimiento de novato.
Mi componente vue estaba bien, fue una solicitud asíncrona la que causó este problema. Los datos para mis accesorios de Echarts se solicitan a través de una solicitud de Axios, y mi componente secundario (el gráfico de líneas) se procesó antes de obtener los datos. De alguna manera, los proxies de las matrices no tienen los datos, pero obtuvieron el objetivo que se muestra a la derecha. En el momento en que mi componente secundario obtuvo los datos correctos, el Echart ya estaba renderizado con datos de opciones obsoletos, que por cierto estaban vacíos. Y es por eso que volver a renderizar puede mostrarnos los datos. No tiene nada que ver con el proxy, el proxy funciona bien. Soy yo el que necesita prestar más atención al movimiento aysnc. Además, aprendí que, obviamente, watch no era reactivo en absoluto, así que vi los accesorios y actualicé la opción de esta manera:
watch :{ xAxisData: { handler: function (newData) { this.option.xAxis.data = newData; this.chart.clear(); this.chart.setOption(this.option); }, deep: true, }, }Funciona.