In vue, the real-time data of the echarts dashboard is a
colored pen for simple recording.
Business scenario: Push data in real time through websocket, and render the data to the dashboard.
The first step:
based on the prepared dom, initialize the echarts dashboard instance.
The second step:
I receive the data through the parent-child component passing value, define the upPressure parameter in the data, and assign the received devicePressure parameter to it, so that the value can be passed into echarts later.
父组件中
<div class="chart" shadow="always">
<objEcharts :devicePressure="pressure"></objEcharts>
</div>
子组件中
export default {
props: {
devicePressure: {
type: String, require: true },
},
data() {
return {
upPressure: this.devicePressure,
};
},
Step 3:
Because it is real-time data, you need to monitor data changes in watch and update it in real time.
Note: I only monitor one parameter change here, without using deep: true.
watch: {
//监听devicePressure的数据变化。
devicePressure(newData, oldData) {
//把更新后的数据newData，赋值给需要传入echarts中的参数。
this.upPressure = newData;
//一定要调用echarts实例，要不然echarts不实时展示。
this.drawLine();
},
},
Step 4: After the
data is processed, it will be displayed in the dashboard, so just find the place where data is needed in echarts.
Between the dashboard style, it can be customized in conjunction with official documents.
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,
},
},
],
});
},
},
}
