Vorwortecharts 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. Anwendung1. 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 }]) } } } } ] ZusammenfassenDies 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:
|
<<: Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden
>>: So stellen Sie mit Navicat eine Remoteverbindung zur Cloud-Server-Datenbank her
Inhaltsverzeichnis Vorwort Funktionen von Vue Nat...
Hintergrund Da ich alle meine Aufgaben auf Docker...
Unterrichtsthemen Webseite Anwendbare Klasse Zwei...
1. Firewall-Regeln festlegen Beispiel 1: Port 808...
Dieser Artikel beschreibt hauptsächlich die Auswi...
Dies ist eine Sammlung häufig verwendeter, aber l...
In diesem Artikel wird der spezifische JavaScript...
Detailliertes Download-, Installations- und Konfi...
Inhaltsverzeichnis Parser und Präprozessoren Abfr...
Inhaltsverzeichnis Frage verlängern Lösung des Pr...
Nur als Referenz für Python-Entwickler, die Ubunt...
Inhaltsverzeichnis Vorwort 1. Grundlegende Umgebu...
Hintergrund-Controller @RequestMapping("/get...
In diesem Artikel wird der spezifische Code von r...
In diesem Artikel wird der spezifische Code von V...