如何用Vue结合Echarts实现实时数据的长尾词仪表盘展示？

本文共计590个文字，预计阅读时间需要3分钟。

在Vue中，使用echarts图表展示实时数据，彩笔一键，简单记录如下：

业务场景：通过WebSocket实时推送数据，将数据渲染到图表中。

第一步：基于良好的DOM准备，初始化echarts图表实例。

第二步：通过WebSocket接收数据，动态更新图表。

在vue中echarts仪表盘实时数据
彩笔一枚，简单记录一下。
业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。

第一步：
基于准备好的dom，初始化echarts仪表盘实例。

第二步：
我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中

父组件中 <div class="chart" shadow="always"> <objEcharts :devicePressure="pressure"></objEcharts> </div> 子组件中 export default { props: { devicePressure: { type: String, require: true }, }, data() { return { upPressure: this.devicePressure, }; },

第三步：
因为是实时数据，就需要在watch中监听数据变化，实时更新。