Detaillierte Erläuterung der Verwendung von Echart-Diagrammen im Front-End und Back-End des Projekts

Detaillierte Erläuterung der Verwendung von Echart-Diagrammen im Front-End und Back-End des Projekts

Vorwort

Diagramme können uns dabei helfen, die Daten, die wir in unseren Projekten sehen möchten, klar zu erkennen, und durch die Bearbeitung von Diagrammen können wir schnell die gewünschten Informationen erhalten. Wenn Schüler einige coole Visualisierungsdiagramme auf Bilibili sehen, finden sie sie dann so cool und großartig? Dieses Projekt ist auf den ersten Blick fantastisch. Jetzt, da wir uns der Abschlussdesignphase nähern, kann das Erlernen der Verwendung von Echart-Diagrammen Ihren Lehrer mit Ihrem Projekt beeindrucken und Ihnen beim Schreiben Ihrer Arbeit etwas zu sagen geben. Wenn Sie bei der Arbeit Diagramme zeichnen können, sind Sie in den Augen Ihres Vorgesetzten ein Talent. Okay, kein Unsinn mehr, lasst uns anfangen!

1. Projektarchitektur

In meinem Artikel geht es um die Verwendung von Tabellen in Bildern. Wenn Sie alle gelernt haben, können Sie auf der offiziellen Echart-Website fortgeschrittenere und coolere Tabellen verwenden.

2. Besuchen Sie die offizielle Website von Echart und lernen Sie Selbstanalyse

2.1 Offizielle Echart-Dokumentation

Offizielle Echart-Website

Besuchen Sie die offizielle Website

Zugriff auf alle Instanzen

Klicken Sie auf das grundlegende Liniendiagramm

Oben sind die Schritte aufgeführt, die Sie zur Verwendung von Echart ausführen müssen.

2.2 Grundkenntnisse des Echart-Codes

Wir stellen zur Erklärung das grundlegende Faltdiagramm vor:

importiere * als echarts von „echarts“; //Echarts-Ressourcen einführen var chartDom = document.getElementById(„main“); //Suche den Block mit der Front-End-ID=main, in dem dein Diagramm angezeigt wird var myChart = echarts.init(chartDom); //Initialisiere das Diagramm im Front-End-Block var option; //Diagrammobjekt option = {
  xAxis: { //x-Achse im Diagrammobjekttyp: 'Kategorie', //Linientypdaten: ['Mon', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] //Daten auf der aktuellen Achse},
  yAxis: { //y-Achse im Icon-Objekttyp: 'value' //Typ ist value
  },
  Serie: [
    { //Objektwert, der der x-Achse entspricht, z. B. „Mon“ bis „150“
      Daten: [150, 230, 224, 218, 135, 147, 260],
      Typ: 'Zeile' //Der Typ ist Zeile}
  ]
};

option && myChart.setOption(option); //Speichern Sie das Optionsobjekt im Diagramm, setOption bedeutet, es zu ändern.

3. Verwendung von Liniendiagrammen

3.1 Einfaches Liniendiagramm

Frontend-Implementierung:

  1. Erstellen einer VUE-Datei
  2. Definieren Sie einen Front-End-Codeblock, der ein Diagramm anzeigt
  3. Positionierungs-ID
  4. Initialisieren des Diagramms
  5. Definieren von Optionsobjekten
  6. Aufrufen der Create-Methode

Erstellen einer VUE-Datei

Seitenstruktur:

<Vorlage>
  //Setze das Div der Tabelle hier ein
</Vorlage>

<Skript>

export default{ //JS-Codeblock-Framework data(){
        zurückkehren {

        }
    }

    
}

</Skript>

Definieren Sie einen Front-End-Codeblock, der ein Diagramm anzeigt

<Vorlage>
<div Klasse="Breite:600px;Höhe:400;">
   <div id="main"></div>  
</div>
</Vorlage>
<Skript>
Standard exportieren{

    Daten(){
        zurückkehren {

        }
    }  
}

</Skript>

Suchen Sie die ID und initialisieren Sie das Diagramm

<Vorlage>
    <!-- Der Container, der das E-Charts-Diagramm enthält, muss die Breite und Höhe haben -->
 <div>
 <div id="main" style="Höhe: 300px;Breite: 400px;"></div>
</div>

</Vorlage>


<Skript>
importiere * als E-Charts von „E-Charts“;
Standard exportieren {
    Daten (){
        zurückkehren {
        }
    },
    montiert() {
        this.getchart(); //Definieren Sie eine Schnittstellenmethode und rufen Sie sie in Methoden auf},
    Methoden: {
   
        //Diagrammmethode getchart() {
            //ID abrufen und Diagramm initialisieren var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            //Konfigurationselement var option;
            Option = {
           x-Achse:
              Typ: "Kategorie",
              Daten: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
            },
           yAchse: {
            Typ: "Wert"
             },
            Serie: [
              {
              Daten: [150, 230, 224, 218, 135, 147, 260],
           Typ: "Zeile"
             }
           ]
         };
            option && myChart.setOption(option) //Erstellen Sie ein Diagramm mit der Methode setOption()},
    },
}
</Skript>
<Stilbereich>
    .allgemeinerStil {
        Breite: 100 %;
        Höhe: 90%;
    }
</Stil>

Laufergebnisse:

Jetzt kann unser Front-End angezeigt werden, aber die Daten im Front-End sind fest codiert. Wie können wir das Back-End aufrufen, um die Dateninteraktion zwischen Front-End und Back-End zu realisieren?

Backend-Implementierung:

  1. Analysieren Sie den Front-End-Code
  2. Front-End-Schreibanforderungsmethode
  3. Frontend-Ersatzdaten
  4. Schreiben von Backend-Methoden

Analysieren Sie den Front-End-Code:

Schreiben von Anforderungsmethoden

Wir schreiben den Code für die Anforderungsschnittstelle in Methoden und verwenden Axios.

Richten Sie das Routing in main.js in unserem Vue-Projekt ein.

Vue von „vue“ importieren
App aus „./App.vue“ importieren
Router aus „./router“ importieren 
importiere './assets/css/global.css'

// Iconfront importieren
importiere './assets/font/iconfont.css'
// Axios importieren
Axios von „Axios“ importieren
Vue.prototype.$echarts = fenster.echarts
// Axios in $http des Vue-Prototyps einbinden
Vue.prototype.$http = axios
// Setze den Stammpfad der Anfrage axios.defaults.baseURL = "http://localhost:9000/" // Ändere den Domänennamen des Backend-Servers, um die Domänennamenbindung zu realisieren axios.interceptors.request.use(config => {
  konsole.log(konfiguration);
  // Informationen zur Header-Montage anfordern config.headers.Authorization = window.sessionStorage.getItem("flag");
  // Am Ende müssen Sie die Konfiguration zurückgeben
  Konfiguration zurückgeben;
})
Vue.config.productionTip = falsch

neuer Vue({
  Router,
  rendern: h => h(App)
}).$mount('#app')

Gehen Sie dann zurück zur gerade erstellten Vue-Seite und schreiben Sie die Schnittstellenanforderungsmethode:

Definieren Sie x- und y-Datenvariablen in Daten

      Daten (){
        zurückkehren {
            xdata:[], //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der x-Achse ydata:[] //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der y-Achse }
    },

Schreiben Sie Schnittstellenmethoden in Methoden;

    //Rufen Sie die Backend-Schnittstelle async getSendata(){

        const { data: res } = await this.$http.post("api/echartdata"); //Rufen Sie die Backend-Schnittstelle api/echartdata auf, wenn (res!=null) {
            //Das Backend definiert eine verknüpfte Liste zum Speichern von Zeichenfolgen, teilt sie durch ',' und gibt ein Array zurück, oder das Backend gibt eine Array-verknüpfte Liste zurück this.xdata = res[0].split(","); //res ist ein verknüpfter Listentyp, das erste Element speichert die Daten der x-Achse
             this.ydata = res[1].split(","); //res ist ein verknüpfter Listentyp, das zweite Element speichert die Daten der Y-Achse
        }
        this.getchart() //Die Datenerfassung ist abgeschlossen und die Tabelle wird erneut initialisiert;
       },

Ersetzen von Daten

Ersetzen Sie die Daten der X-Achse und der Y-Achse in der Tabelle durch das, was wir in den Daten definiert haben:

xdata:[], //Speichern Sie die von der Schnittstelle zurückgegebenen Koordinatendaten der X-Achse

ydata:[] //Speichern Sie die von der Schnittstelle zurückgegebenen Koordinatendaten der Y-Achse

Backend-Code

Schreiben Sie die Schnittstellenmethode in die Controller-Ebene:

    @PostMapping("/api/echartdata")
    öffentliche Zeichenfolge getchartdata(){
      Zeichenfolge x = „Ali, Tencent, Baidu, JD.com, Meituan“;
      Zeichenfolge y = "200,120,200,160,120";
      List<String> Liste = neue LinkedList<>();
      Liste.Hinzufügen(x);
      Liste.Hinzufügen(y);
      Zeichenfolge s = JSON.toJSONString(Liste);
        System.out.println(s);
      Rückgabe s;
    }

Wir haben es hier vollständig geschrieben und jetzt fangen wir an zu laufen;

Denken Sie daran, die Schnittstellenmethode zu initialisieren, um die Hintergrunddaten abzurufen.

Das Front-End und Back-End wurden erfolgreich ausgeführt!

Vollständiger Code:

Frontend:

<Vorlage>
    <!-- Der Container, der das E-Charts-Diagramm enthält, muss die Breite und Höhe haben -->
 <div>
 <div id="main" style="Höhe: 300px;Breite: 400px;"></div>
</div>

</Vorlage>


<Skript>
importiere * als E-Charts von „E-Charts“;
Standard exportieren {
    Daten (){
        zurückkehren {
            xdata:[], //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der x-Achse ydata:[] //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der y-Achse }
    },
    montiert() {
        this.getSendata(); //Definieren Sie eine Schnittstellenmethode und rufen Sie sie in Methoden auf},
    Methoden: {
       
       //Rufen Sie die Backend-Schnittstelle async getSendata(){

        const { data: res } = await this.$http.post("api/echartdata"); //Rufen Sie die Backend-Schnittstelle api/echartdata auf, wenn (res!=null) {
            //Das Backend definiert eine verknüpfte Liste zum Speichern von Zeichenfolgen, teilt sie durch ',' und gibt ein Array zurück, oder das Backend gibt eine Array-verknüpfte Liste zurück this.xdata = res[0].split(","); //res ist ein verknüpfter Listentyp, das erste Element speichert die Daten der x-Achse
             this.ydata = res[1].split(","); //res ist ein verknüpfter Listentyp, das zweite Element speichert die Daten der Y-Achse
        }
        this.getchart() //Die Datenerfassung ist abgeschlossen und die Tabelle wird erneut initialisiert;
       },
          

        //Diagrammmethode getchart() {
            //ID abrufen und Diagramm initialisieren var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            //Konfigurationselement var option;
            Option = {
           x-Achse:
              Typ: "Kategorie",
              Daten: this.xdata,
            },
           yAchse: {
            Typ: "Wert"
             },
            Serie: [
              {
              Daten:diese.ydata,
           Typ: "Zeile"
             }
           ]
         };
            option && myChart.setOption(option) //Erstellen Sie ein Diagramm mit der Methode setOption()},
    },
}
</Skript>
<Stilbereich>
    .allgemeinerStil {
        Breite: 100 %;
        Höhe: 90%;
    }
</Stil>

3.2 Glattes Liniendiagramm

Wir haben die Erstellung des Code-Frameworks im grundlegenden Liniendiagramm bereits abgeschlossen, daher müssen wir nur unsere initialisierte Echart-Funktion in der Echart-Instanz ersetzen.

Vollständiger Code:

<Vorlage>
    <!-- Der Container, der das E-Charts-Diagramm enthält, muss die Breite und Höhe haben -->
 <div>
 <div id="main" style="Höhe: 300px;Breite: 400px;"></div>
</div>

</Vorlage>


<Skript>
importiere * als E-Charts von „E-Charts“;
Standard exportieren {
    Daten (){
        zurückkehren {
            xdata:[], //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der x-Achse ydata:[] //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der y-Achse }
    },
    montiert() {
        this.getSendata(); //Definieren Sie eine Schnittstellenmethode und rufen Sie sie in Methoden auf},
    Methoden: {
       
       //Rufen Sie die Backend-Schnittstelle async getSendata(){

        const { data: res } = await this.$http.post("api/echartdata"); //Rufen Sie die Backend-Schnittstelle api/echartdata auf, wenn (res!=null) {
            //Das Backend definiert eine verknüpfte Liste zum Speichern von Zeichenfolgen, teilt sie durch ',' und gibt ein Array zurück, oder das Backend gibt eine Array-verknüpfte Liste zurück this.xdata = res[0].split(","); //res ist ein verknüpfter Listentyp, das erste Element speichert die Daten der x-Achse
             this.ydata = res[1].split(","); //res ist ein verknüpfter Listentyp, das zweite Element speichert die Daten der Y-Achse
        }
        this.getchart() //Die Datenerfassung ist abgeschlossen und die Tabelle wird erneut initialisiert;
       },
          

        //Diagrammmethode getchart() {
            //ID abrufen und Diagramm initialisieren var chartDom = document.getElementById('main');
       var myChart = echarts.init(chartDom);  
       var-Option;

     Option = {
      x-Achse:
      Typ: "Kategorie",
      Daten:diese.xdata
     },
     yAchse: {
      Typ: "Wert"
     },
     Serie: [
      {
      Daten: diese.ydata,
      Typ: "Linie",
      glatt: wahr
      }
    ]
  };
    Option && meinChart.setOption(Option);
        },
    },
}
</Skript>
<Stilbereich>
    .allgemeinerStil {
        Breite: 100 %;
        Höhe: 90%;
    }
</Stil>

Ausführungsergebnis:

3.3 Flächenliniendiagramm

Lassen Sie uns das ohne weiteres ändern. Aber ich weiß nicht, ob Sie bemerkt haben, dass dem glatten Liniendiagramm gerade ein Attribut zur Serie hinzugefügt wurde, das mit dem grundlegenden Liniendiagrammcode identisch ist:

  Serie: [
    {
      Daten: [820, 932, 901, 934, 1290, 1330, 1320],
      Typ: "Linie",
      smooth: true //Glättung aktivieren}
  ]

Daher muss das Flächenliniendiagramm nur die Attribute in der Reihe ändern

  Serie: [
    {
      Daten: [820, 932, 901, 934, 1290, 1330, 1320],
      Typ: "Linie",
      areaStyle: {} //Bereichsattribut}
  ]

Sehen Sie die Wirkung:

3.4 Coole Kombinationsbilder

Ersetzen Sie mit derselben Methode die Methode zum Initialisieren der Tabelle und dann die Daten durch die von der Back-End-Schnittstelle zurückgegebenen Daten. Dann können Sie tun, was Sie wollen!

Führen Sie die Backend-Schnittstelle direkt ein, um res in der Methode zurückzugeben

Ersetzen der Quelldaten

Vollständiger Front-End-Code:

<Vorlage>
    <!-- Der Container, der das E-Charts-Diagramm enthält, muss die Breite und Höhe haben -->
 <div>
 <div id="main" style="Höhe: 300px;Breite: 400px;"></div>
</div>

</Vorlage>


<Skript>
importiere * als E-Charts von „E-Charts“;
Standard exportieren {
    Daten (){
        zurückkehren {
            xdata:[], //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der x-Achse ydata:[] //Speichert die von der Schnittstelle zurückgegebenen Koordinatendaten der y-Achse }
    },
    montiert() {
        this.getchart(); //Definieren Sie eine Schnittstellenmethode und rufen Sie sie in Methoden auf},
    Methoden: {
       

        //Diagrammmethode getchart() {
            //ID abrufen und Diagramm initialisieren//Backend-Schnittstelle aufrufen const { data: res } = await this.$http.post("api/echartdata1"); //Backend-Schnittstelle aufrufen api/echartdata interface var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var-Option;

            setzeTimeout(Funktion () {
       Option = {
      Legende: {},
      Tooltip: {
      Auslöser: 'Achse',
      Inhalt anzeigen: false
    },
    Datensatz:
      Quelle: [
         res[0].split(","),
         res[1].split(","),
         res[2].split(","),
         res[3].split(","),
         res[4].split(","),
      ]
    },
    xAchse: { Typ: 'Kategorie' },
    yAchse: { gridIndex: 0 },
    Raster: { oben: '55 %' },
    Serie: [
      {
        Typ: "Linie",
        glatt: wahr,
        seriesLayoutBy: 'Zeile',
        Hervorhebung: { Fokus: 'Serie' }
      },
      {
        Typ: "Linie",
        glatt: wahr,
        seriesLayoutBy: 'Zeile',
        Hervorhebung: { Fokus: 'Serie' }
      },
      {
        Typ: "Linie",
        glatt: wahr,
        seriesLayoutBy: 'Zeile',
        Hervorhebung: { Fokus: 'Serie' }
      },
      {
        Typ: "Linie",
        glatt: wahr,
        seriesLayoutBy: 'Zeile',
        Hervorhebung: { Fokus: 'Serie' }
      },
      {
        Typ: "Kuchen",
        ID: "Kuchen",
        Radius: '30%',
        Mitte: ['50%', '25%'],
        Schwerpunkt:
          Fokus: „selbst“
        },
        Etikett: {
          Formatierer: '{b}: {@2012} ({d}%)'
        },
        kodieren: {
          itemName: 'Produkt',
          Wert: '2012',
          Tooltip: „2012“
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', Funktion (Ereignis) {
    const xAxisInfo = event.axesInfo[0];
    wenn (xAxisInfo) {
      Konstante Dimension = xAxisInfo.Wert + 1;
      myChart.setOption({
        Serie: {
          ID: "Kuchen",
          Etikett: {
            Formatierer: '{b}: {@[' + Dimension + ']} ({d}%)'
          },
          kodieren: {
            Wert: Dimension,
            Tooltip: Dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

Option && meinChart.setOption(Option);

        },
    },
}
</Skript>
<Stilbereich>
    .allgemeinerStil {
        Breite: 100 %;
        Höhe: 90%;
    }
</Stil>

Vollständiger Backend-Code:

 @PostMapping("/api/echartdata1")
    öffentliche Zeichenfolge getchartdata1(){
        Zeichenfolge data1 = "Produkt, 2012, 2013, 2014, 2015, 2016, 2017";
        Zeichenfolge data2 = "Tencent, 56,5, 82,1, 88,7, 70,1, 53,4, 85,1";
        Zeichenfolge data3 = "Ali, 51.1, 51.4, 55.1, 53.3, 73.8, 68.7";
        Zeichenfolge data4 = "JD.com, 40.1, 62.2, 69.5, 36.4, 45.2, 32.5";
        Zeichenfolge data5 = "Baidu, 25.2, 37.1, 41.2, 18, 33.9, 49.1";
        List<String> Liste = neue LinkedList<>();
        Liste.Hinzufügen(Daten1);
        Liste.Hinzufügen(Daten2);
        Liste.Hinzufügen(Daten3);
        Liste.Hinzufügen(Daten4);
        Liste.Hinzufügen(Daten5);
        Zeichenfolge s = JSON.toJSONString(Liste);
        System.out.println(s);
        Rückgabe s;
    }

laufen:

Oben finden Sie den detaillierten Inhalt der ausführlichen Erläuterung zur Verwendung von Echart-Diagrammen im Front-End und Back-End des Projekts. Weitere Informationen zur Verwendung von Echart-Diagrammen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Praxis der Realisierung der Breiten- und Höhenanpassung von Echarts-Diagrammen in Vue
  • Vue importiert Echarts, um ein Linienstreudiagramm zu realisieren
  • Vue verwendet ECharts zur Implementierung von Liniendiagrammen und Kreisdiagrammen
  • Vue echarts realisiert horizontales Balkendiagramm
  • Vue + echart realisiert Doppelsäulendiagramm

<<:  Erste Schritte Tutorial für Anfänger⑧: Einfaches Erstellen einer Artikel-Site

>>:  Die Hintergrundfarbe oder das Bild im Div-Container wächst mit dem Wachstum

Artikel empfehlen

CSS implementiert die Webkomponentenfunktion zum Verschieben des Nachrichtenfelds

Hallo zusammen, ich frage mich, ob ihr die gleich...

Lösung für FEHLER 1366 bei der Eingabe von Chinesisch in MySQL

Beim Eingeben von Chinesisch in MySQL tritt der f...

Auch Webdesigner müssen Web-Coding lernen

Oftmals wird nach der Fertigstellung eines Webdes...

MySQL 8.0 MIT Abfragedetails

Inhaltsverzeichnis Informationen zu WITH-Abfragen...

Eine detaillierte Einführung in die CSS-Namensspezifikation BEM von QQtabBar

BEM von QQtabBar Zunächst einmal: Was bedeutet BE...

Der Unterschied und die Verwendung des Kommunikationsbusses der Bruderkomponenten von Vue2 und Vue3

Inhaltsverzeichnis vue2.x vue3.x Verwendung des T...

Möglicherweise benötigen Sie einen digitalen Großbild-Scrolling-Effekt wie diesen

Der digitale Scrolleffekt auf großen Bildschirmen...

MySQL 5.7.17 Winx64 Installations- und Konfigurations-Tutorial

Heute habe ich die MySQL-Datenbank erneut auf mei...

Dateisicherungslösung zwischen Servern: Wie sichere ich Serverdateien automatisch auf einem anderen Server?

Viele Organisationen müssen Dateiserver sichern u...

So verpacken Sie das Uniapp-Projekt als Desktop-Anwendung

Electron installieren cnpm installiere Electron -...

Die Aktualisierungsseite für die Formularübermittlung springt nicht zum Quellcodedesign

1. Quellcode entwerfen Code kopieren Der Code laut...

So verhindern Sie, dass Iframes in HTML zur Seite springen, und verwenden Iframes, um die WeChat-Webversion in die Seite einzubetten

Ich möchte nur eine kleine Sache machen, die Winf...

Eine kurze Analyse, wie Sie das Root-Passwort in Linux suse11 ändern können, wenn Sie es vergessen haben

So lösen Sie das Problem des Vergessens des Root-...

VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion

Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...

Docker: Das Ändern des DOCKER_OPTS-Parameters in /etc/default/docker wird nicht wirksam

Standardmäßig wird die Konfiguration /etc/default...