最近在项目开发过程中遇到了一个难点,需要在vue中echarts仪表盘实时数据,通过websocket实时推送数据,将数据渲染到仪表盘中。实现步骤如下:
使用Echarts仪表盘展示实时数据之第一步:
基于准备好的dom,初始化echarts仪表盘实例。
使用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,
};
},
使用Echarts仪表盘展示实时数据之第三步:
因为是实时数据,就需要在watch中监听数据变化,实时更新。
注:这里我只监听一个参数变化,没有使用deep: true。
watch: {
//监听devicePressure的数据变化。
devicePressure(newData, oldData) {
//把更新后的数据newData,赋值给需要传入echarts中的参数。
this.upPressure = newData;
//一定要调用echarts实例,要不然echarts不实时展示。
this.drawLine();
},
},
使用Echarts仪表盘展示实时数据之第四步:
数据处理完之后,就要把它展示到仪表盘中了,所以直接找到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} <br/>{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,
},
},
],
});
},
},
}
使用Echarts仪表盘展示实时数据之第四步效果预览
发表评论 取消回复