Swiper+echarts realisiert den Links- und Rechts-Scrolleffekt mehrerer Dashboards
|
In diesem Artikel wird der spezifische Code von Swiper + Echarts zur Erzielung des Links- und Rechts-Scroll-Effekts des Dashboards als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt 1. Verwendung von Swipera. Laden Sie zuerst das Plugin
<!DOCTYPE html>
<html>
<Kopf>
...
<link rel="stylesheet" href="dist/css/swiper.min.css" >
</Kopf>
<Text>
...
<script src="dist/js/swiper.min.js"></script>
...
</body>
</html>b.HTML-Inhalt
<div Klasse="Swiper-Container">
<div Klasse="swiper-wrapper">
<div class="swiper-slide">Folie 1</div>
<div class="swiper-slide">Folie 2</div>
<div class="swiper-slide">Folie 3</div>
</div>
<!-- Wenn Sie einen Pager benötigen <div class="swiper-pagination"></div>-->
<!-- Wenn Sie Navigationsschaltflächen benötigen -->
<div Klasse="swiper-button-prev"></div>
<div Klasse="swiper-button-next"></div>
<!-- Wenn Sie eine Bildlaufleiste benötigen <div class="swiper-scrollbar"></div>-->
</div>c. Möglicherweise möchten Sie eine Größe für Swiper definieren, aber das ist keine Pflicht.
.swiper-container {
Breite: 600px;
Höhe: 300px;
}d. Swiper initialisieren: vorzugsweise neben dem </body>-Tag
<Skript>
var meinSwiper = neuer Swiper ('.swiper-container', {
direction: 'vertical', // vertikale Umschaltoption loop: true, // Loop-Modus-Option // Wenn Sie einen Paginator benötigen pagination: {
el: '.swiper-pagination',
},
// Wenn Sie Vorwärts- und Zurück-Navigationstasten benötigen: {
nächstesEl: '.swiper-button-next',
vorheriges: '.swiper-button-prev',
},
// Wenn Sie eine Bildlaufleiste benötigen scrollbar: {
el: '.swiper-scrollbar',
},
})
</Skript>Hier ist der Effekt, den ich erreichen möchte
Der Code lautet wie folgtPlugins und Stile laden
<!DOCTYPE html>
<html>
<Kopf>
...
<link rel="stylesheet" href="dist/css/swiper.min.css" >
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.swiper-container{
Höhe: 200px;
Breite: 800px;
Rand: 0 automatisch;
Rand: 1px durchgezogen #ccc;
}
.swiper-slide{
Anzeige: Flex;
}
.swiper-slide .chart{
biegen: 1;
}
</Stil>
</Kopf>
<Text>
...
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="dist/js/swiper.min.js"></script>
...
</body>
</html>HTML-Struktur
<div Klasse="Swiper-Container">
<div Klasse="swiper-wrapper">
<div Klasse="swiper-slide">
<div Klasse="Chart" id="Chart1">1</div>
<div Klasse="chart" id="chart2">2</div>
<div Klasse="chart" id="chart3">3</div>
</div>
<div Klasse="swiper-slide">
<div Klasse="chart" id="chart4">4</div>
<div Klasse="chart" id="chart5">5</div>
<div class="chart" id="chart6">6</div>
</div>
<div Klasse="swiper-slide">
<div Klasse="chart" id="chart7">7</div>
<div Klasse="chart" id="chart8">8</div>
<div Klasse="chart" id="chart9">9</div>
</div>
</div>
<div Klasse="swiper-button-prev"></div>
<div Klasse="swiper-button-next"></div>
</div>Swiper initialisieren
var meinSwiper = neuer Swiper('.swiper-container', {
Autoplay:
Verzögerung: 5000
}, //Optionale Option, automatisches Gleiten\
Navigation:
nächstesEl: '.swiper-button-next',
vorheriges: '.swiper-button-prev',
}
})Echarts initialisieren
Funktion initChart(obj){
var myChart = echarts.init(document.getElementById(obj));
var option = {
Tooltip: {
Formatierer: "{a} <br/>{b} : {c}%"
},
Serie: [
{
Typ: "Messgerät",
Zentrum: ["50%", "50%"], // Standardradius des globalen Zentrums: "90%",
Startwinkel: 200,
Endwinkel: -20,
Achsenlinie : {
zeigen: wahr,
lineStyle : { // Attribut lineStyle steuert Linienstilfarbe : [ // Zifferblattfarbe [ 0.5, "#DA462C" ], // 0-50% Farbe [ 0.7, "#FF9618" ], // 51%-70% Farbe [ 0.9, "#FFED44" ], // 70%-90% Farbe [ 1,"#20AE51" ] // 90%-100% Farbe ],
Breite: 20 // Zifferblattbreite}
},
splitLine : { //Geteilter Linienstil (und 10, 20 usw. lange Linienstile)
Länge: 10,
lineStyle : { // Die lineStyle -Eigenschaft steuert die Linienbreite : 2
}
},
axisTick : { // Linienstil skalieren (und kurzer Linienstil)
Länge: 20
},
axisLabel : { //Textstil (und "10", "20" und andere Textstile)
Farbe: Schwarz",
Abstand: 10//Der Abstand zwischen dem Text und dem Zifferblatt},
Detail: {
Formatierer: "{score|{value}%}",
offsetCenter: [0, "40%"],
// Hintergrundfarbe: '#FFEC45',
Höhe: 20,
reich : {
Punktzahl : {
// Farbe: "#333",
Schriftfamilie: „Microsoft YaHei“,
Schriftgröße: 14
}
}
},
Daten: [{
Wert: 56,
Etikett: {
Textstil: {
Schriftgröße: 12
}
}
}]
}
]
}
setzeIntervall(Funktion () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
}Rufen Sie die initialisierte Echats-Funktion auf
initChart('Diagramm1')
initChart('diagramm2')
initChart('chart3')
initChart('chart4')
initChart('chart5')
initChart('chart6')
initChart('chart7')
initChart('chart8')
initChart('chart9')Fügen Sie eine Konfigurationsfunktion des Echarts-Dashboards ein
Funktion initChart(obj){
var myChart = echarts.init(document.getElementById(obj));
var option = {
Tooltip: {
Formatierer: "{a} <br/>{b} : {c}%"
},
// Werkzeugkasten: {
// Besonderheit: {
// wiederherstellen: {},
// AlsBild speichern: {}
// }
// },
Serie: [
{
Name: 'Geschäftsindikatoren',
Typ: "Messgerät",
Zentrum: ["50%", "45%"], // Radius der Instrumentenposition: "80%", // Detail der Instrumentengröße: {formatter:'{value}%'},
startAngle: 200, //Startwinkel endAngle: -20, //Endwinkel data: [{value: 30, name: ‚Abschlussrate‘}],
Achsenlinie: {
anzeigen: falsch,
lineStyle: { // Die Eigenschaft lineStyle steuert die Linienstilfarbe: [
[ 0,5, neue echarts.graphic.LinearGradient(0, 0, 1, 0, [{
Versatz: 1,
Farbe: "#E75F25" // 50% Farbe}, {
Versatz: 0,8,
Farbe: "#D9452C" // 40 % Farbe}], false) ], // 100 % Farbe[ 0,7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
Versatz: 1,
Farbe: "#FFC539" // 70% Farbe}, {
Versatz: 0,8,
Farbe: "#FE951E" // 66% Farbe}, {
Versatz: 0,
Farbe: "#E75F25" // 50% Farbe}], false) ],
[ 0.9, neue echarts.graphic.LinearGradient(0, 0, 0, 1, [{
Versatz: 1,
Farbe: "#C7DD6B" // 90% Farbe}, {
Versatz: 0,8,
Farbe: "#FEEC49" // 86% Farbe}, {
Versatz: 0,
Farbe: "#FFC539" // 70% Farbe}], false) ],
[1, neue echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
Versatz: 0,2,
Farbe: "#1CAD52" // 92% Farbe}, {
Versatz: 0,
Farbe: "#C7DD6B" // 90% Farbe}], false) ]
],
Breite: 10
}
},
geteilte Zeile: {
anzeigen:false
},
AchseTick: {
anzeigen:false
},
Achsenbezeichnung: {
anzeigen:false
},
Zeiger: { // Länge des Zeigerstils: '45%'
},
Detail: {
anzeigen:false
}
}
]
}
setzeIntervall(Funktion () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
}Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Zusammenfassung der MySQL-DML-Anweisungen
Artikel empfehlen
Detaillierte Erläuterung des Prozesses zur Bereitstellung von Tomcat und zur Erstellung des ersten Webprojekts in IDEA 2020.3.1
Inhaltsverzeichnis Tomcat-Einführung Tomcat-Berei...
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 16.04 MySQL 8.0
Grafisches Tutorial zur Installation und Konfigur...
Die Darstellung und Öffnungsmethode eines Hyperlinks
<br />Verwandte Artikel: So rufen Sie einen ...
Detaillierter Prozess der NTP-Serverkonfiguration unter Linux
Inhaltsverzeichnis 1. Umgebungskonfiguration 1.NT...
So verwenden Sie Port 80 in Tomcat unter Linux
Anwendungsszenario In vielen Fällen installieren ...
Einfache Schritte zum Konfigurieren des Nginx-Reverse-Proxys mit SSL
Vorwort Ein Reverse-Proxy ist ein Server, der übe...
Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)
Hintergrund Suchen Sie in der Suchmaschine nach d...
Benutzerdefinierte Komponente der unteren Navigationsleiste des WeChat-Applets
In diesem Artikelbeispiel wird der spezifische Im...
Concat() von kombinierten Feldern in MySQL
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
Einige Hinweise zur Verwendung von Standard-HTML-Codes bei der Webseitenerstellung
Der häufigste Fehler vieler Website-Designer ist,...
So weisen Sie Feldern bei der MySQL-Abfrage Standardwerte zu
brauchen Wenn Sie ein Feld abfragen, müssen Sie e...
WeChat-Applet-Canvas implementiert Signaturfunktion
Im WeChat-Applet-Projekt umfasst das Entwicklungs...
Erläuterung des MySQL-Multitabellen-Join-Abfragebeispiels
In tatsächlichen Projekten gibt es Beziehungen zw...
Detaillierte Erläuterung zur Lösung des Problems, dass der Docker-Container nicht über IP auf den Hostcomputer zugreifen kann
Ursprung des Problems Wenn ich Docker verwende, m...
Spezifische Methode zum Anzeigen von Benutzerautorisierungsinformationen in MySQL
Spezifische Methode: 1. Öffnen Sie die Eingabeauf...