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/>{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 계기판 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!