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

Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker

Problemphänomen: [root@localhost ~]# Docker-Image...

Verwendung von MySQL DDL-Anweisungen

Vorwort Die Sprachklassifikation von SQL umfasst ...

Tutorial zur Installation und Konfiguration von Hbase unter Linux

Inhaltsverzeichnis Hbase-Installation und -Konfig...

Allgemeine Array-Operationen in JavaScript

Inhaltsverzeichnis 1. verketten() 2. beitreten() ...

So verwenden Sie MySQL-Stresstest-Tools

1. MySQLs eigenes Stresstest-Tool – Mysqlslap mys...

Detaillierte Erklärung der Lösung zum Vergessen des Passworts in MySQL 5.7

Umwelt: [root@centos7 ~]# uname -r 3.10.0-514.el7...

Besser aussehende benutzerdefinierte CSS-Stile (Titel h1 h2 h3)

Rendern Häufig verwendete Stile im Blog Garden /*...

Detaillierte Erklärung der drei Möglichkeiten zum Festlegen von Rahmen in HTML

Drei Möglichkeiten zum Festlegen von Rahmen in HT...

Einige Dinge, die beim Erstellen einer Webseite zu beachten sind

--Backup der Homepage 1.txt-Text 2. Scannen Sie da...

Detaillierte Erklärung der Abkürzung von State in React

Vorwort Was ist Staat Wir alle sagen, dass React ...