Detailliertes Tutorial zur Verwendung von Vue zur Entwicklung dynamischer Aktualisierungs-Echarts-Komponenten

In diesem Artikel wird hauptsächlich das detaillierte Tutorial zur Verwendung von Vue zur Entwicklung dynamischer Aktualisierungs-Echarts-Komponenten vorgestellt. Freunde, die es benötigen, können darauf verweisen

Anforderungshintergrund: Das Dashboard ist das „Gesicht“ des aktuellen Backends des Unternehmens Produkte, wie man eine effizientere und coole Anzeige statistischer Daten in Echtzeit erreichen kann, ist eine Frage, die von Front-End-Entwicklungsingenieuren und UI-Designern berücksichtigt werden sollte. Heute beginnen wir bei Null und kapseln eine Echarts-Liniendiagrammkomponente, die Daten dynamisch rendert, und beginnen gemeinsam über weitere interessante Komponenten nachzudenken.

Vorbereitungsarbeiten

Projektstrukturaufbau

Aufgrund von Produktionsanforderungen (eigentlich Faulheit), Daher verwendet dieses Tutorial ==vue-cli==, um die Infrastruktur des Projekts aufzubauen.

npm install -g vue-cli
vue init webpack vue-charts
cd vue-charts
npm run dev

Echarts installieren

Verwenden Sie npm zur direkten Installation.

npm install Echarts --save

Wir stellen vor: Echarts

//在main.js加入下面两行代码
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //将echarts注册成Vue的全局属性

Zu diesem Zeitpunkt sind die Vorbereitungen abgeschlossen.

Entwicklung statischer Komponenten

Weil mich der Artikel „React Programming Thoughts“ zutiefst vergiftet hat, ist der Autor es auch gewohnt, Schritt für Schritt von einfach zu fortgeschritten zu iterieren Komponenten entwickeln.

Der Zweck der statischen Komponente ist sehr einfach, nämlich das Echarts-Diagramm auf der Seite darzustellen.

Erstellen Sie eine neue Chart.vue-Datei

<template>
 <p :id="id" :style="style"></p>
</template>
<script>
export default {
 name: "Chart",
 data() {
  return {
   //echarts实例
   chart: ""  
  };
 },
 props: {
  //父组件需要传递的参数：id，width，height，option
  id: {
   type: String
  },
  width: {
   type: String,
   default: "100%"
  },
  height: {
   type: String,
   default: "300px"
  },
  option: {
   type: Object,
   //Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
   //使用闭包保证一个vue实例拥有自己的一份props
   default() {
    return {
     title: {
      text: "vue-Echarts"
     },
     legend: {
      data: ["销量"]
     },
     xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","tuoxie"]
     },
     series: [
      {
       name: "销量",
       type: "line",
       data: [5, 20, 36, 10, 10, 70]
      }
     ]
    };
   }
  }
 },
 computed: {
  style() {
   return {
    height: this.height,
    width: this.width
   };
  }
 },
 mounted() {
  this.init();
 },
 methods: {
  init() {
   this.chart = this.$echarts.init(document.getElementById(this.id));
   this.chart.setOption(this.option);
  }
 }
};
</script>

Die obige Datei ermöglicht das Rendern eines einfachen Liniendiagramms auf der Seite Komponenten, wie wäre es, wenn sie sehr einfach wären? Die einfachste Art, es zu verwenden, ist wie folgt:

App.vue

<template>
 <p id="app">
  <Chart id="test"/>
 </p>
</template>
<script>
import Chart from "./components/Chart";
export default {
 name: "App",
 data() {},
 components: {
  Chart
 }
}
</script>

An diesem Punkt, wenn Sie Wenn Sie das Programm ausführen, sollten Sie den folgenden Effekt sehen:

Erste Iteration

Da wir nun eine Basisversion haben, nehmen wir eine Schauen Sie sich an, was zu tun ist, ist nicht zufriedenstellend:

1. Das Diagramm kann nicht automatisch entsprechend der Fenstergröße skaliert werden, obwohl die Breite auf 100 % eingestellt ist, wird das Diagramm nicht neu gerendert bis die Seite aktualisiert wird, was dazu führt, dass die Benutzererfahrung schlecht wird.

2. Diagramme können Daten derzeit nicht automatisch aktualisieren
   

Lassen Sie uns diese beiden Punkte umsetzen:

Automatische Skalierung

Echarts selbst unterstützt keine automatische Skalierung, aber Echarts stellt uns die Methode zur Größenänderung zur Verfügung.

//在init方法中加入下面这行代码
window.addEventListener("resize", this.chart.resize);

Mit nur diesem Satz haben wir erkannt, dass sich das Diagramm an die Fenstergröße anpassen muss.

Unterstützt die automatische Datenaktualisierung

Da Echarts datengesteuert ist, bedeutet das, dass das Diagramm folgt, solange wir die Daten zurücksetzen Ein erneutes Rendern ist die Grundlage für die Umsetzung dieser Anforderung. Stellen wir uns noch einmal vor: Wenn Sie die automatische Aktualisierung von Daten unterstützen möchten, benötigen Sie einen Listener, der Datenänderungen in Echtzeit überwachen und Echarts dann anweisen kann, die Daten zurückzusetzen. Glücklicherweise stellt uns Vue die Funktion ==watcher== zur Verfügung, mit der wir die oben genannten Funktionen einfach implementieren können:

//在Chart.vue中加入watch
 watch: {
  //观察option的变化
  option: {
   handler(newVal, oldVal) {
    if (this.chart) {
     if (newVal) {
      this.chart.setOption(newVal);
     } else {
      this.chart.setOption(oldVal);
     }
    } else {
      this.init();
    }
   },
   deep: true //对象内部属性的监听，关键。
  }
 }

Der obige Code implementiert unsere Überwachung von Eigenschaftsänderungen im Optionsobjekt. Sobald sich die Daten in der Option ändern, wird das Diagramm neu gerendert.

Dynamische Aktualisierung erreichen

Der nächste Schritt, den jeder kennt, besteht meiner Meinung nach darin, regelmäßig Daten aus dem Hintergrund abzurufen und dann die Option zu aktualisieren übergeordnete Komponente Ganz gut. Hier müssen zwei Fragen berücksichtigt werden:

1. Wenn das Diagramm das Hinzufügen von Daten pro Sekunde erfordert, wie sollte die Datenanforderung durchgeführt werden, um ein Gleichgewicht zwischen Leistung und Benutzererfahrung zu erreichen?

2. Soll der Code zum dynamischen Aktualisieren von Daten in der übergeordneten Komponente oder der untergeordneten Komponente platziert werden?
   

Für die erste Frage ist es definitiv die genaueste, die Serverdaten jede Sekunde in Echtzeit zu erhalten. Es gibt zwei Lösungen:

• Anforderung an den Hintergrund einmal pro Sekunde

• Behalten Sie eine lange Verbindung bei, und der Hintergrund überträgt Daten einmal pro Sekunde an das Frontend
  

Nein. Eine Lösung verursacht zweifellos eine große Leistungs- und Ressourcenverschwendung; dieser Ansatz ist nicht zu empfehlen.

Die zweite Lösung erfordert den Einsatz von web Socket, aber auf der Serverseite sind zusätzliche Entwicklungsarbeiten erforderlich.

Basierend auf den tatsächlichen Anforderungen des Projekts (die Echtzeitanforderungen sind nicht hoch und die im Hintergrund generierten Daten weisen auch eine gewisse Verzögerung auf) hat der Autor die folgende Lösung gewählt:

1. Jedes Mal, wenn die Front-End-Daten einmal pro Minute vom Hintergrund angefordert werden, handelt es sich um die Daten der vorherigen Minute der aktuellen Zeit.

2. Die Vorderseite end setzt die oben genannten Daten jede Sekunde in das Diagramm
   

关于第二个问题：笔者更倾向于将Chart组件设计成纯组件，即只接收父组件传递的数据进行变化，不在内部进行复杂操作；这也符合目前前端MVVM框架的最佳实践；而且若将数据传递到Chart组件内部再进行处理，一是遇到不需要动态渲染的需求还需要对组件进行额外处理，二是要在Chart内部做ajax操作，这样就导致Chart完全没有了可复用性。

接下来我们修改App.vue

<template>
 <p id="app">
  <Chart id="test" :option="option"/>
 </p>
</template>

<script>
import vueEcharts from "./components/vueEcharts";
export default {
 name: "App",
 data() {
  return {
   //笔者使用了mock数据代表从服务器获取的数据
   chartData: {
    xData: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    sData: [5, 20, 36, 10, 10, 70]
   }
  };
 },
 components: {
  Chart
 },
 mounted() {
  this.refreshData();
 },
 methods: {
  //添加refreshData方法进行自动设置数据
  refreshData() {
   //横轴数据
   let xData = this.chartData.xData,
    //系列值
     sData = this.chartData.sData;
   for (let i = 0; i < xData.length; i++) {
    //此处使用let是关键，也可以使用闭包。原理不再赘述
      setTimeout(() => {
     this.option.xAxis.data.push(xData[i]);
     this.option.series[0].data.push(sData[i]);
    }, 1000*i)//此处要理解为什么是1000*i
   }
  }
 }
};
</script>

至此我们就实现了图表动态数据加载，效果如下图：

 

总结

这篇教程通过一个动态图表的开发，传递了以下信息：

• Echarts如何与Vue结合使用

• Vue组件开发、纯组件与“脏”组件的区别

• Vue watch的用法

• let的特性

• JavaScript EventLoop特性

• ...

大家可以根据这个列表查漏补缺。

后续优化

1. 这个组件还有需要需要优化的点，比如：

2. 间隔时间应该可配置

3. 每分钟从后台获取数据，那么图表展示的数据将会越来越多，越来越密集，浏览器负担越来越大，直到崩溃

4. 没有设置暂停图表刷新的按钮

5. ...

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax+Struts2实现验证码验证功能（图文教程）

Ajax点击不断加载数据列表（图文教程）

非常实用的ajax用户注册模块

Das obige ist der detaillierte Inhalt vonDetailliertes Tutorial zur Verwendung von Vue zur Entwicklung dynamischer Aktualisierungs-Echarts-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!