Problemaufzeichnung bei der Verwendung des Vue+Echarts-Diagramms

Problemaufzeichnung bei der Verwendung des Vue+Echarts-Diagramms

Vorwort

echarts ist mein am häufigsten verwendetes Diagrammtool und verfügt außerdem über ein sehr vollständiges Ökosystem und Inhalte, die für unseren täglichen Gebrauch ausreichen. Ich habe vor Kurzem an einer Big-Data-Plattformseite gearbeitet und musste viele Diagramme verwenden, also habe ich E-Charts verwendet. Während des Verwendungsprozesses bin ich auch auf einige schwierige Probleme oder einige Eigenschaften gestoßen, die tief im Konfigurationshandbuch versteckt sind. Ich werde sie heute aufzeichnen.

Anwendung

1. Das Raster des Diagramms löschen und die Farbe des Rasters ändern

// Steuern, ob die Gitternetzlinie angezeigt wird splitLine: {
    show: false, //Ob die Gitternetzlinien angezeigt werden//Stil ändern lineStyle: {
       color: '#ccc' //Ändere die Farbe der Gitternetzlinien}                            
},

2. Ändern Sie den Stil der Koordinatenachse

xAchse: [
              {
                  Typ: "Kategorie",
                  boundageGap: falsch,
                  Daten: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni'],
                  Achsenlinie:{
                      Linienstil: {color:"#ccc"}
                  },
                  AchseTick: {
                    show: false // Skala entfernen},
                  axisLabel:{//Schriftstil ändernshow: true,//Anzeigen und AusblendentextStyle:{color:"#ccc"}
                  },
                  // Steuern, ob die Gitternetzlinie angezeigt wird splitLine: {
                 show: false, //Ob die Gitternetzlinien angezeigt werden//Stil ändern lineStyle: {
                     color: '#ccc' //Ändere die Farbe der Gitternetzlinien}                            
},
              }
          ],
          yAchse: [
              {
                  Typ: "Wert",
                  Name: '(mal)',
                  Achsenlinie:{
                      Linienstil: {Farbe: "#ccc", Schriftgröße: '16'}
                  },
                  AchseTick: {
                    show: false // Skala entfernen},
              }
          ],

3. Einige Stiländerungen oder Konfigurationen des Donut-Diagramms

//Ändern Sie den Stil des Textes in der Mitte des Kreistitels: {
          Text: Wert.Wert+'mal',
          Untertext: Wert.Name,
          x: 'Mitte',
          y: 'Mitte',
          Artikellücke: 0,
          Textstil: {
            Schriftgröße: 26,
            Schriftstärke: "fett",
            Farbe: 'rgb(0,237,255)'
          },
          Untertextstil: {
            Schriftgröße: 16,
            Schriftstärke: "fett",
            Farbe: '#fff'
          },
},
//Löscht den Schwebeeffekt des Kreises bei aufeinanderfolgenden Mausbewegungen: [
            {
              hoverAnimation:false, //Dieses Attribut hinzufügen}
    ]

4. Wechseln Sie zwischen mehreren Diagrammen und löschen Sie die zuletzt geladenen Daten

Fügen Sie „true“ zu „setOption“ hinzu

Option und meinChart.setOption(Option,true);

5. Verwendung von Farbverläufen in Diagrammen

echarts.graphic.LinearGradient

Serie: [
          {
            Typ: "Kuchen",
            Mitte: ['50%', '49%'],
            Radius: ['45%', '73%'],
            // minWinkel: 0,
            startAngle: 0, // Farbverlaufswinkel avoidLabelOverlap: true, // Ob die Verhinderung von Beschriftungsüberlappungen aktiviert werden soll emphasis: {
              Etikett: {
                zeigen: wahr,
                Position: "Mitte"
              }
            },
            Daten: Seriendaten,
            Artikelstil: {
              Schwerpunkt:
                Schattenunschärfe: 10,
                SchattenOffsetX: 0,
                Schattenfarbe: 'rgba(0, 0, 0, 0,5)',
                Etikett: {
                  zeigen: wahr,
                }
              },
              normal: {
                Farbe: Funktion (Parameter) { //Farbverlauf var Farbliste = [
                    {
                      c1: "#3288FC",
                      c2: '#36B4FD'
                    },
                    {
                      c1: '#CBA0FF',
                      c2: '#598EFE'
                    },
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //Die ersten vier Parameter der Farbverlaufsfunktion repräsentieren jeweils die vier Positionen links, unten, rechts und oben. Offset: 0,
                    Farbe: Farbliste[Params.Datenindex].c1
                  }, {
                    Versatz: 1,
                    Farbe: Farbliste[Params.Datenindex].c2
                  }])

                }
              }
            }
          }
        ]

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Vue+Echarts-Diagrammen. Weitere relevante Inhalte zur Verwendung von Vue+Echarts-Diagrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Grundlegendes Tutorial zum Hinzufügen von Echarts-Diagrammen in Vue
  • Vue + echarts realisiert die Methode zum dynamischen Zeichnen von Diagrammen und zum asynchronen Laden von Daten
  • Beispiel für die Funktion zum Vergrößern und Verkleinern von Entwicklungsdiagrammen in Vue.js+Echarts
  • Implementieren Sie die Loop-Darstellung mehrerer identischer E-Charts-Diagramme in Vue
  • Detaillierte Methode zur Verwendung von Echarts-Diagrammen in Vue
  • Detaillierte Erklärung zur Verwendung des Beispielcodes für E-Chart-Diagramme in Vue
  • Vue2 verwendet Echarts, um Beispielcode für Diagramme zu erstellen
  • Mehrere Lösungen für Vue zur Verwendung der Echarts-Diagrammanpassung
  • Fall, in dem sich die Größe des E-Chart-Diagramms in Vue an die Fenstergröße anpasst und nicht aktualisiert werden muss

<<:  Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden

>>:  So stellen Sie mit Navicat eine Remoteverbindung zur Cloud-Server-Datenbank her

Artikel empfehlen

Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

Vor kurzem hatte ich zufällig Kontakt mit dem Pro...

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

Theoretisch entspricht der von MySQL verwendete S...

Countdown-Effekt mit Javascript implementieren

Verwenden Sie Javascript, um den Countdown-Effekt...

Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten

Inhaltsverzeichnis Benutzerdefinierte Vite-Plugin...

JavaScript zur Implementierung eines einfachen Web-Rechners

Hintergrund Da ich einem neuen Projektteam zugewi...

Erzielen Sie mit reinem CSS3 in wenigen einfachen Schritten einen 3D-Flip-Effekt

Als Pflichtkurs für Frontend-Entwickler kann CSS3...

So implementieren Sie die Fernzugriffskontrolle in Centos 7.4

1. SSH-Remoteverwaltung SSH ist ein sicheres Kana...

So verwenden Sie den regulären Matching-Selektor für CSS-Attributwerte (Tipps)

Es gibt drei Typen von regulären Matching-Selekto...

Mehrere Methoden zum Ändern des MySQL-Root-Passworts (empfohlen)

Methode 1: Verwenden Sie den Befehl SET PASSWORD ...

So verwenden Sie Nginx zum Simulieren der Canary-Freigabe

Dieser Artikel stellt die Blue-Green-Bereitstellu...

So gestalten Sie das Frontend einer Website elegant und attraktiv für Benutzer

Das Temperament einer Web-Frontend-Website ist ein...

Details zum JavaScript-Timer

Inhaltsverzeichnis 1. Kurze Einführung 2. Interva...

Lösung zum Einfügen eines Formulars mit einer Leerzeile oben und unten

Ich weiß nicht, ob Ihnen beim Erstellen einer Webs...

Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy

Beim Konfigurieren des Nginx-Reverse-Proxys könne...