Tengo un gráfico así:

 ..... <div class="flex flex-auto"> <apexchart width="300%" height="380" type="line" :options="optionsLine" :series="seriesLine" ></apexchart> .....

Y el componente vue tiene un método así:

 methods: { getTraceData: function (data) { var esocket = new WebSocket( "ws://localhost:5001/provideTraceData?serverHost=" + data ); esocket.onmessage = function (event) { var res = JSON.parse(event.data); var ts = []; var dataLength = res["timeseries"].length; console.log(res); for (var i = dataLength - 1; i > dataLength - 11; i--) { ts.push([ res["timeseries"][i]["timestamp"], res["timeseries"][i]["ttfb"], ]); } console.log("==", ts); this.optionsLine = { tooltip: { shared: false, x: { formatter: function (val) { var date = new Date(val * 1000); // Hours part from the timestamp var hours = date.getHours(); // Minutes part from the timestamp var minutes = "0" + date.getMinutes(); // Seconds part from the timestamp var seconds = "0" + date.getSeconds(); // Will display time in 10:30:23 format var formattedTime = hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2); return formattedTime; }, }, }, }; this.seriesLine = [ { name: "TTFB", data: ts, }, ]; }; } }

Del servidor WebSocket obtengo una respuesta JSON, la analizo, etc., etc., y luego trato de actualizar la serie de gráficos. Pero por alguna razón, el gráfico no parece mostrarse. Pero cuando uso un punto final HTTP básico sin WebSocket para obtener los mismos datos, el gráfico se muestra. Soy una especie de javascript nuevo, ¿hay algunas travesuras asíncronas detrás de escena que no conozco? La lógica de actualizar el gráfico es la misma, la diferencia entre las versiones HTTP y WebSocket es básicamente la cadena de URL y el controlador de eventos, el resto es igual.