Springboot verwendet die Front-End- und Back-End-Interaktion von Vue + Echarts, um dynamische Donut-Diagramme zu realisieren

//npm ist das gleiche wie cnpm install echarts --save

//E-Charts einführen
E-Charts aus „E-Charts“ importieren
//Komponente registrieren Vue.prototype.$echarts = echarts

<Vorlage>
  <div Klasse="test2" Stil="Breite:600px;Höhe:400px;">
      <div id="meinChart" style="width:100%;height:278px;float:left;"></div>
  </div>
</Vorlage>

importiere * als E-Charts von „E-Charts“

<Skript>
     importiere * als E-Charts von „E-Charts“
     Standard exportieren {
       Name: 'test2',
       Daten () {
         zurückkehren {
         Abfrageinfo: {
         Abfrage: "",
         Seitennummer: 1,
         pageSize: 4, //Das Backend fordert 4 Datenkategorien an. Wenn Sie mehr als eine haben, ändern Sie diesen Parameter},
       AbfrageInfof: {
         Abfrage: "",
         Seitennummer: 1,
         Seitengröße: 100,
       },
           meinChart: '',
           MeinungDaten2:
           
           {"itemStyle":"#3F8FFF","name":"Bedrohungsangriffsprotokoll","value":200},
           {"itemStyle":"#6DC8EC","name":"Audit-URL-Ausnahme","value":388},  
           {"itemStyle":"#1FC48D","name":"Normales Netzwerkprotokoll","value":5287},         
           {"itemStyle":"red","name":"Anomalie im Verkehrsprotokoll","value":320}      
           ]
         }
       },
       montiert: Funktion () {
          dies.drawLine();

       },
     
       Methoden: {
          asynchrone Linie zeichnen() {
              // Post-Anfrage aufrufen /* const { data: res } = await this.$http.get("alldate", {
        Parameter: this.queryInfo
      });
      wenn (res.flag != "Erfolg") {
        return this.$message.error("Daten konnten nicht abgerufen werden!!!");
      }

      Konsole.log(res.flag)
       this.opinionData2 = res.opinionData2; // Die zurückgegebenen Daten zuweisen*/
           dies.meinChart = echarts.init(document.getElementById('meinChart'))
           dies.myChart.setOption({
             Titel:
               Text: ‚Analyse des abnormalen Datenverkehrs im Netzwerkprotokoll‘, // Untertext des Haupttitels: ‚‘, // Untertitel x: ‚links‘ // Ausrichtung auf der X-Achse},
             Raster: { containLabel: true },
             Tooltip: {
               Auslöser: 'Artikel',
               Formatierer: '{a} <br/>{b} : {d}%'
             },
             // Farbe: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
             Farbe: ['#1FC48D', 'rot', '#6DC8EC', '#3F8FFF'],
             // Hintergrundfarbe: '#ffffff',
             Legende: {
               ausrichten: 'vertikal',
               Symbol: „Kreis“,
               ausrichten: 'links',
               x: 'rechts',
               y: 'unten',
               Daten: ['Audit-URL-Anomalie', 'Normales Netzwerkprotokoll', 'Verkehrsprotokoll-Anomalie', 'Bedrohungsangriffsprotokoll']
             },
             Serie: [
               {
                 Name: 'Netzwerkprotokollstatus',
                 Typ: "Kuchen",
                 Radius: ['50%', '70%'],
                 avoidLabelOverlap: falsch,
                 Mitte: ['40%', '50%'],
                 Artikelstil: {
                   Schwerpunkt:
                     Schattenunschärfe: 10,
                     SchattenOffsetX: 0,
                     Schattenfarbe: 'rgba(0, 0, 0, 0,5)'
                   },
                   Farbe: Funktion (Parameter) {
                     // Benutzerdefinierte Farben var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
                     Farbliste zurückgeben[params.dataIndex]
                   }
                 },
                 Daten: this.opinionData2
               }
             ]
           })
         },
       }
     }
     </Skript>

öffentliche Klasse QueryInfo {
    private String-Abfrage;
    private int Seitennummer=1;
    private int Seitengröße=1;

    öffentliche QueryInfo() {
    }

    öffentliche QueryInfo(String query, int Seitennummer, int Seitengröße) {
        diese.Abfrage = Abfrage;
        this.pageNum = Seitennummer;
        this.pageSize = Seitengröße;
    }

    öffentliche Zeichenfolge getQuery() {
        Rückfrage;
    }

    öffentliche int getPageNum() {
        Seitennummer zurückgeben;
    }

    öffentliche int getPageSize() {
        Seitengröße zurückgeben;
    }

    öffentliche void setQuery(String query) {
        diese.Abfrage = Abfrage;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = Seitennummer;
    }

    public void setPageSize(int Seitengröße) {
        this.pageSize = Seitengröße;
    }

    @Überschreiben
    öffentliche Zeichenfolge toString() {
        return "QueryInfo{" +
                "query='" + query + '\'' +
                ", Seitennummer=" + Seitennummer +
                ", Seitengröße=" + Seitengröße +
                '}';
    }
}

öffentliche Klasse Showdate {
    privater String-Name;
    privater String-Elementstil;
    privater int-Wert;


    öffentliches Showdate() {

    }

    öffentliches Showdate(Stringname, Stringelementstil, int-Wert) {
        dieser.name = Name;
        this.itemStyle = Artikelstil;
        dieser.Wert = Wert;
    }

    öffentliche Zeichenfolge getName() {
        Rückgabename;
    }

    öffentliche void setName1(String name) {
        dieser.name= Name;
    }

    öffentliche Zeichenfolge getItemStyle() {
        Artikelstil zurückgeben;
    }

    öffentliche void setItemStyle(String itemStyle) {
        this.itemStyle = Artikelstil;
    }

    öffentliche int getValue() {
        Rückgabewert;
    }

    öffentliche void setValue(int Wert) {
        dieser.Wert = Wert;
    }

    @Überschreiben
    öffentliche Zeichenfolge toString() {
        return "Showdate{" +
                "name='" + name + '\'' +
                ", Artikelstil = '" + Artikelstil + '\'' +
                ", Wert=" + Wert +
                '}';
    }
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.naughty.userlogin02.dao.ShowdateDao">


    <select id="getAlldate" resultType="com.naughty.userlogin02.bean.Showdate">
        Wählen Sie * aus Datum1
        <if test="name!=null">
            WO Name wie #{name}
        </if>
        LIMIT #{pageStart},#{pageSize}
    </Auswählen>

    <Aktualisierungs-ID="aktualisierenneu">
        UPDATE date1 SET value = #{Anzahl} WHERE name = #{name}
    </Aktualisieren>


</mapper>

#mysql
Frühling:
  Datenquelle:
    #MySQL-Konfiguration Treiberklassenname: com.mysql.cj.jdbc.Driver
    URL: jdbc:mysql://localhost:3306/weblog?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
    Benutzername: root
    Passwort: root

mybatis:
  Mapper-Standorte: Klassenpfad:Mapper/*.xml
  Typ-Alias-Paket: com.example.demo.model
Server:
  Hafen: 9000

importiere com.naughty.userlogin02.bean.Showdate;
importiere org.apache.ibatis.annotations.Param;
importiere org.springframework.stereotype.Repository;

importiere java.util.List;
@Repository
öffentliche Schnittstelle ShowdateDao {

    öffentliche Liste<Showdate> getAlldate(@Param("name") Stringname, @Param("pageStart") int pageStart, @Param("pageSize") int pageSize);

    öffentliche int updatenew(String-Name, int-Anzahl);
}

   @Autowired
    ShowdateDao showdateDao; //Sie müssen es an die Front-End-Datenbanktabelle weitergeben @Autowired
    FlowDao flowDao; //Die Effekt-Datenbanktabelle Ihrer Datenquelle

Paket com.naughty.userlogin02.controller;

importiere com.alibaba.fastjson.JSON;
importiere com.naughty.userlogin02.bean.*;
importiere com.naughty.userlogin02.dao.CheckDao;
importiere com.naughty.userlogin02.dao.FlowDao;
importiere com.naughty.userlogin02.dao.SafeDao;
importiere com.naughty.userlogin02.dao.ShowdateDao;
importiere org.springframework.beans.factory.annotation.Autowired;
importiere org.springframework.web.bind.annotation.*;

importiere java.util.HashMap;
importiere java.util.List;
importiere java.util.Stack;

@RestController
öffentliche Klasse ShowdateController {

    @Autowired
    ShowdateDao ShowdateDao;
    @Autowired
    Dienstprogramme
//Protokolldaten an der Rezeption aktualisieren @CrossOrigin
    @RequestMapping("/alldate")//Front-End-Anforderungskanal public String getAlldateList(QueryInfo queryInfo){
        System.out.println(queryInfo);
        int SeiteStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
        Liste<Showdate>-Daten = showdateDao.getAlldate("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
   
      für(int i =0;i<dates.size();i++){
          System.out.println(dates.get(i).toString());
      }
        //Überprüfung//Das überprüfte Verkehrsprotokoll einkapseln HashMap<String, Object> res = new HashMap<>();
        res.put("Flagge","Erfolg");
        res.put("Meinungsdaten2",Daten);
        : Geben Sie date_json in das Feld date_json ein.
        System.out.println(date_json.toString());
        gibt date_json zurück;
    }

//Die Implementierungsmethode der Datenbankdatenquelle besteht darin, die Daten in der Datenbanktabelle Date1 zu ändern @RequestMapping("/getupdata")
    öffentliche Zeichenfolge updateDate(QueryInfo queryInfo){

        String s = „Ausnahme im Verkehrsprotokoll“;
        Zeichenfolge s1 = „URL-Ausnahme prüfen“;
        Zeichenfolge s2 = „Bedrohungsangriffsprotokoll“;
        String s3 = „Normales Netzwerkprotokoll“;
        /*int Anzahl = getUserList(queryInfo);
        int count1 =getChickList(queryInfo); //Die vier Methoden müssen von Ihnen entsprechend dem spezifischen Geschäft implementiert werden int count2 =getSafeDate(queryInfo);
        int Anzahl3 = alleBlognum(Abfrageinfo)-(Anzahl+Anzahl1+Anzahl2);*/
        showdateDao.updatenew(s,Anzahl);
        showdateDao.updatenew(s1,Anzahl1);
        showdateDao.updatenew(s2,Anzahl2);
        int i = showdateDao.updatenew(s3,count3);
        System.out.println("Ausnahmetyp: "+s);
        System.out.println("Anzahl der abnormalen Protokolle:"+Anzahl);
        String str = i >0?"erfolg":"Fehler";
        gibt str zurück;
    }

}

   <Skript>
     importiere * als E-Charts von „E-Charts“
     Standard exportieren {
       Name: 'test2',
       Daten () {
         zurückkehren {
         Abfrageinfo: {
         Abfrage: "",
         Seitennummer: 1,
         Seitengröße: 4,
       },
       AbfrageInfof: {
         Abfrage: "",
         Seitennummer: 1,
         Seitengröße: 100,
       },
           meinChart: '',
           MeinungDaten2:
     
// Front-End-Testdaten löschen]
         }
       },
       montiert: Funktion () {
          dies.drawLine();

       },
       erstellt() {
         this.getdateList(); //Aktualisieren Sie die Datenbankdaten bei jedem Aufruf der Seite, um eine dynamische Datenbindung zu erreichen},
       Methoden: {
          asynchrone Linie zeichnen() {
              // Rufen Sie die Post-Anfrage auf, um den Wert der Backend-Datenbank abzurufen const { data: res } = await this.$http.get("alldate", {
        Parameter: this.queryInfo
      });
      wenn (res.flag != "Erfolg") {
        return this.$message.error("Daten konnten nicht abgerufen werden!!!");
      }

      Konsole.log(res.flag)
       this.opinionData2 = res.opinionData2; // Weisen Sie die zurückgegebenen Daten zu this.myChart = echarts.init(document.getElementById('myChart'))
           dies.myChart.setOption({
             Titel:
               Text: ‚Analyse des abnormalen Datenverkehrs im Netzwerkprotokoll‘, // Untertext des Haupttitels: ‚‘, // Untertitel x: ‚links‘ // Ausrichtung auf der X-Achse},
             Raster: { containLabel: true },
             Tooltip: {
               Auslöser: 'Artikel',
               Formatierer: '{a} <br/>{b} : {d}%'
             },
             // Farbe: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
             Farbe: ['#1FC48D', 'rot', '#6DC8EC', '#3F8FFF'],
             // Hintergrundfarbe: '#ffffff',
             Legende: {
               ausrichten: 'vertikal',
               Symbol: „Kreis“,
               ausrichten: 'links',
               x: 'rechts',
               y: 'unten',
               Daten: ['Audit-URL-Anomalie', 'Normales Netzwerkprotokoll', 'Verkehrsprotokoll-Anomalie', 'Bedrohungsangriffsprotokoll']
             },
             Serie: [
               {
                 Name: 'Netzwerkprotokollstatus',
                 Typ: "Kuchen",
                 Radius: ['50%', '70%'],
                 avoidLabelOverlap: falsch,
                 Mitte: ['40%', '50%'],
                 Artikelstil: {
                   Schwerpunkt:
                     Schattenunschärfe: 10,
                     SchattenOffsetX: 0,
                     Schattenfarbe: 'rgba(0, 0, 0, 0,5)'
                   },
                   Farbe: Funktion (Parameter) {
                     // Benutzerdefinierte Farben var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
                     Farbliste zurückgeben[params.dataIndex]
                   }
                 },
                 Daten: this.opinionData2
               }
             ]
           })
         },
         asynchron getdateList() {
      // Post-Anfrage aufrufen const { data: res } = await this.$http.get("getupdata", {
        Parameter: this.queryInfof
      });
      wenn (res != "Erfolg") {
        return this.$message.error("Daten konnten nicht abgerufen werden!!!");
      }
      Konsole.log(res)
        },
       }
     }
     </Skript>