Heim > Web-Frontend > js-Tutorial > Hauptteil

Teilen Sie die Stiländerungen von sechs Echarts-Statistikdiagrammen

yulia
Freigeben: 2018-09-07 16:18:01
Original
4069 Leute haben es durchsucht

Die Erstellung von Echarts-Grafiken ist relativ einfach, zitieren Sie einfach Javascript direkt. Es gibt drei Hauptgründe für die Verwendung dieser Bibliothek. Einer davon ist, dass diese Bibliothek ein Baidu-Projekt ist und aktualisiert wurde. Zweitens ist die Projektdokumentation dieser Bibliothek relativ detailliert, jeder Punkt wird klar erklärt und ist auf Chinesisch, was das Verständnis erleichtert. Der dritte Punkt ist, dass diese Bibliothek eine Vielzahl von Grafiken unterstützt und Grafiken direkt umgeschaltet werden können, was die Verwendung sehr komfortabel macht.

1: Ändern Sie die Farbe der Liniendiagrammleiste

series : [ {
name : ‘SBP(收缩压)’,
type : ‘line’,
itemStyle : {
normal : {
lineStyle:{
color:’#f73d31’
}
}
},
data : y_data
},
Nach dem Login kopieren

2: Ändern Sie das Titelfarbattribut

Ändern Sie die Haupttitelfarbe des Symbols in Rot, fügen Sie einfach textStyle hinzu im Titel: : {color: 'red' } kann
picture.png

title: {
text: ‘平均耗时(分钟)’,
textStyle: {
color: ‘red’
},
},
Nach dem Login kopieren

3 sein: Hintergrundfarbe festlegen

var option={
backgroundColor:‘rgba(128, 128, 128, 0.1)’ //rgba设置透明度0.1
}
Nach dem Login kopieren

4: Die Seite so ändern, dass sie leer angezeigt wird

Wenn alle Daten normal sind und die Konsole keinen Fehler meldet, die Daten jedoch nicht auf der Seite angezeigt werden, ist eine feste Breite erforderlich.

5: Probleme bei der mobilen Anpassung, Anpassung an verschiedene Handy-Bildschirme

Wenn mehrere Diagramme vorhanden sind, fügen Sie nach var option = {} einfach einen Code wie diesen ein. Das Symbol ändert sich entsprechend Bildschirmgröße ändert sich.

window.onresize = function () {
myChart1.resize();
       myChart2.resize();      
        myChart3.resize();        
        }
Nach dem Login kopieren

6: Modifikation der xy-Achsen-Farbmodifikation, herzlich willkommen, sie zu lesen und daraus zu lernen!

Das obige ist der detaillierte Inhalt vonTeilen Sie die Stiländerungen von sechs Echarts-Statistikdiagrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!