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 Swiper

a. 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 folgt

Plugins 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:

Swiper realisiert Navigations-Scrolling-Effekt
Swiper realisiert den Scroll-Effekt der Navigationsleiste
Detaillierte Erklärung der Bildlaufleistenkomponente Swiper Scrollbar
Das WeChat-Applet implementiert die Methode, die eingebettete Bildlaufleiste der Swiper-Umschaltkarte nicht anzuzeigen
So lösen Sie das Problem, dass das Scroll-Diagramm bei Verwendung von Swiper in AngularJS nicht gleitet

<<: Zusammenfassung der MySQL-DML-Anweisungen

>>: Das Linux-Betriebssystem verwendet Python, um die Visualisierungsfunktion des Task-Managers zu implementieren