在vue中echarts仪表盘实时数据
彩笔一枚，简单记录一下。
业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。在vue中echarts仪表盘实时数据第一步：
基于准备好的dom，初始化echarts仪表盘实例。第一步：第二步：
我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中第二步：
父组件中


子组件中
export default {
props: {

devicePressure: { type: String, require: true },
},
data() {

return {

upPressure: this.devicePressure,

};
},

父组件中


子组件中
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不实时展示。

this.drawLine();

},
},

watch: {

//监听devicePressure的数据变化。

devicePressure(newData, oldData) {

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

this.upPressure = newData;

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

this.drawLine();

},
},
第四步：
数据处理完之后，就要把它展示到仪表盘中了，所以直接找到echarts中需要数据的地方就好了。
介于仪表盘样式，可结合官方文档自定义。第四步：
export default {
props: {

devicePressure: { type: String, require: true },
},
data() {

return {

upPressure: this.devicePressure,

};
},
mounted() {

this.drawLine();
},
watch: {


devicePressure(newData, oldData) {

this.upPressure = newData;

this.drawLine();

},
},
methods: {

drawLine() {

// 基于准备好的dom，初始化echarts实例

let visualOneChart = this.$echarts.init(document.getElementById("visualOneChart"));

// 绘制图表

visualOneChart.setOption({

tooltip: {

formatter: "{a}
{b} : {c}Pa",

},

series: [

{

name: "压力值",

type: "gauge",

clockwise: true,

detail: {

formatter: this.upPressure,

textStyle: {

fontSize: 14,

},

},

data: [{ value: this.upPressure, name: "压力值" }],

radius: "90%",

axisLabel: {// 刻度标签。

show: true,

distance: -5,

color: "black",

fontSize: 10,

formatter: "{value}",

},

axisLine: {// 仪表盘轴线(轮廓线)相关配置。

show: true,

lineStyle: {// 仪表盘轴线样式。

opacity: 1,

width: 15,

shadowBlur: 10,

},

},

pointer: { // 仪表盘指针。

show: true,

length: "70%",

width: 4,

},

},

],

});

},
},
}

export default {
props: {

devicePressure: { type: String, require: true },
},
data() {

return {

upPressure: this.devicePressure,

};
},
mounted() {

this.drawLine();
},
watch: {


devicePressure(newData, oldData) {

this.upPressure = newData;

this.drawLine();

},
},
methods: {

drawLine() {

// 基于准备好的dom，初始化echarts实例

let visualOneChart = this.$echarts.init(document.getElementById("visualOneChart"));

// 绘制图表

visualOneChart.setOption({

tooltip: {

formatter: "{a}
{b} : {c}Pa",

},

series: [

{

name: "压力值",

type: "gauge",

clockwise: true,

detail: {

formatter: this.upPressure,

textStyle: {

fontSize: 14,

},

},

data: [{ value: this.upPressure, name: "压力值" }],

radius: "90%",

axisLabel: {// 刻度标签。

show: true,

distance: -5,

color: "black",

fontSize: 10,

formatter: "{value}",

},

axisLine: {// 仪表盘轴线(轮廓线)相关配置。

show: true,

lineStyle: {// 仪表盘轴线样式。

opacity: 1,

width: 15,

shadowBlur: 10,

},

},

pointer: { // 仪表盘指针。

show: true,

length: "70%",

width: 4,

},

},

],

});

},
},
}