這期內容當中小編將會給大家帶來有關Vue中使用Echarts實現儀表盤展示實時數據，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
在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中監聽數據變化，實時更新。
注：這里我只監聽一個參數變化，沒有使用deep: true。
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} <br/> : {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,
},
},
],
});
},
},
}上述就是小編為大家分享的Vue中使用Echarts實現儀表盤展示實時數據了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
