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    

Artikel empfehlen

Beheben von Problemen beim Importieren und Exportieren von Mysql

Hintergrund Da ich alle meine Aufgaben auf Docker...

Web-Unterrichtspläne, Unterrichtspläne für Anfänger

Unterrichtsthemen Webseite Anwendbare Klasse Zwei...

Einen Web-Rechner mit Javascript schreiben

Dieser Artikel beschreibt hauptsächlich die Auswi...

26 häufig vergessene CSS-Tipps

Dies ist eine Sammlung häufig verwendeter, aber l...

JavaScript, um den Effekt des Klickens auf das Untermenü zu erzielen

In diesem Artikel wird der spezifische JavaScript...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27

Detailliertes Download-, Installations- und Konfi...

Grundlegendes zum MySQL-Abfrageoptimierungsprozess

Inhaltsverzeichnis Parser und Präprozessoren Abfr...

echars 3D-Kartenlösung für benutzerdefinierte Farben von Regionen

Inhaltsverzeichnis Frage verlängern Lösung des Pr...

Installieren Sie eine virtuelle Python-Umgebung in Ubuntu 18.04

Nur als Referenz für Python-Entwickler, die Ubunt...

react+antd.3x implementiert IP-Eingabefeld

In diesem Artikel wird der spezifische Code von r...

Vue+echarts realisiert gestapelte Balkendiagramme

In diesem Artikel wird der spezifische Code von V...