livecharts中仪表盘_Vue中使用Echarts仪表盘展示实时数据的实现

在vue中echarts仪表盘实时数据

彩笔一枚，简单记录一下。

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

第一步：

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

第二步：

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

父组件中

子组件中

export default {

props: {

devicePressure: { type: String, require: true },

},

data() {

return {

upPressure: this.devicePressure,

};

},

第三步：

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

注：这里我只监听一个参数变化，没有使用deep: true。

watch: {

//监听devicePressure的数据变化。

devicePressure(newData, oldData) {

//把更新后的数据newData，赋值给需要传入echarts中的参数。

this.upPressure = newData;

//一定要调用echarts实例，要不然echarts不实时展示。