VueではEchartsダッシュボードを使ってリアルタイムデータの実現を展示しています。

vueの中でechartsダッシュボードのリアルタイムデータ
カラーペン一枚、簡単に記録してください。
業務シーン：websocketを通じてリアルタイムでデータを送り、メーターディスクにデータをレンダリングする。
ステップ1:
準備されたdomに基づいて、echarts計器ディスクの例を初期化する。
ステップ2:
私は父と子のコンポーネントを通じてデータを受信し、dataでuplessureパラメータを定義し、受信した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,
  };
 },

ステップ3:
リアルタイムデータなので、watchでデータの変化をモニターしてリアルタイムで更新する必要があります。
ここではパラメータの変化をモニターしていますが、deep:trueは使用していません。

watch: {
 	//  devicePressure     。
  devicePressure(newData, oldData) {
  //       newData，       echarts    。
   this.upPressure = newData;
  //     echarts  ，   echarts     。
   this.drawLine();
  },
 },

ステップ4:
データ処理が終わったら、メーターの中に展示しますので、直接に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, 
      },
     },
    ],
   });
  },
 },
}

ここでは、Vueの中でEchartsダッシュボードを使ってリアルタイムデータの実現を示す文章を紹介します。Vue Echartsメーターの内容については、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。