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

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Wie lädt man das JAR-Paket in ein privates Lager ...

30 Tipps zum Schreiben von HTML-Code

1. HTML-Tags immer schließen Im Quellcode der vor...

Detailliertes Tutorial zum Erstellen eines privaten Git-Servers unter Linux

1. Server-Setup Das Remote-Repository unterscheid...

So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)

Inhaltsverzeichnis Vorwort Zustand Docker install...

Vue implementiert Studentenverwaltungsfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten

SVG (Scalable Vector Graphics) ist ein Bildformat...

So implementieren Sie eine MySQL-Datenbanksicherung in Golang

Hintergrund Navicat ist das beste MySQL-Visualisi...

Vorteile von INSERT INTO SET in MySQL

Daten in MySQL-Datenbank einfügen. Bisher häufig ...

CSS Polarkoordinaten Beispielcode

Vorwort Das Projekt stellt Anforderungen an Karte...

Javascript realisiert 10-Sekunden-Countdown zur Bezahlung

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

Das Balkendiagramm von Vue + Echart realisiert Statistiken zu Epidemiedaten

Inhaltsverzeichnis 1. Installieren Sie zuerst ech...

Detailliertes Installationstutorial für die MySQL-Zip-Archivversion (5.7.19)

1. Laden Sie die Zip-Archivversion von der offizi...