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
1. Ursache Der offizielle Cerbot ist zu nervig. E...
Wie lädt man das JAR-Paket in ein privates Lager ...
Vorwort: Letzten Sonntag bat mich ein Senior, ihm...
1. HTML-Tags immer schließen Im Quellcode der vor...
1. Server-Setup Das Remote-Repository unterscheid...
Inhaltsverzeichnis Vorwort Zustand Docker install...
In diesem Artikelbeispiel wird der spezifische Co...
Inhaltsverzeichnis 1. Einleitung 2. Nutzung 3. En...
SVG (Scalable Vector Graphics) ist ein Bildformat...
Hintergrund Navicat ist das beste MySQL-Visualisi...
Daten in MySQL-Datenbank einfügen. Bisher häufig ...
Vorwort Das Projekt stellt Anforderungen an Karte...
In diesem Artikel wird der spezifische Code von J...
Inhaltsverzeichnis 1. Installieren Sie zuerst ech...
1. Laden Sie die Zip-Archivversion von der offizi...