Echarts realisiert einen großen visuellen Bildschirm

Führen Sie Sie Schritt für Schritt durch, um einen großen visuellen Bildschirm zu erstellen und die endgültigen Hausaufgaben problemlos zu erledigen.
Achten Sie auf das offizielle Konto „ Python-Crawler und Datenanalyse “ und antworten Sie auf „ Visual Big Screen “, um Code und Daten zu erhalten

Beteiligte Technologien: Echarts, HTML, CSS, JavaScript

Offizielle Echarts-Website:
https://echarts.apache.org/handbook/zh/concepts/axis/

Inhalt
1. Echarts zeigt mehrere Bilder gleichzeitig an.
2. Verwenden Sie CSS, um die Benutzeroberfläche zu optimieren.
3. Fügen Sie einen Titel hinzu
. 4. Verwenden Sie Ajax, um Daten zu lesen
. 5. Fügen Sie ein Wasserzeichen hinzu

1. Echarts zeigt mehrere Bilder gleichzeitig an

Abbildung 1-1
Als ich anfing, E-Charts zu lernen, habe ich es einzeln gelernt. Geben Sie Abbildung 1-1 unten ein, deklarieren Sie ein Div, geben Sie die Höhe und Breite an und fügen Sie dann das Diagramm in das Div ein. Der einfachste Weg, mehrere Bilder gleichzeitig anzuzeigen, besteht darin, mehrere Divs zu deklarieren, wie in Abbildung 1-2 unten dargestellt.

Abbildung 1-2

2. Verwenden Sie CSS, um die Schnittstelle zu optimieren

Nachdem Sie das Problem der Anzeige mehrerer Bilder behoben haben, sollten Sie darüber nachdenken, das Bild an eine bestimmte Position anzupassen. Zu diesem Zeitpunkt können Sie die Position des HTML-Tags über CSS anpassen. Verschieben Sie das Bild unten wie in Abbildung 1-2 gezeigt in die gleiche Zeile wie das erste Bild

Abbildung 2-1
Ich werde nicht auf die Bedeutung dieser CSS-Parameter eingehen.
Hinweis: Die Standardeinstellung für HTML-Elemente, d. h. keine Positionierung, folgt normalen Dokumentflussobjekten. Statisch positionierte Elemente werden von oben, unten, links und rechts nicht beeinflusst.

3. Titel hinzufügen

Die beiden Untertitel in Abbildung 3-1
sind Schaltflächen, und der mittlere Titel ist eigentlich ein grauer Untertitel (div) mit hinzugefügtem Text. Die Implementierung ist einfach, indem 4 Schaltflächen-Tags und dann 4 h3-Tags deklariert werden und schließlich CSS an h3 übergeben wird Tag wird auf die entsprechende Schaltfläche verschoben.

Abbildung 3-2
erläutert kurz die Parameter:

• Konvertieren Sie den Begrenzungsrahmen von einem Rechteck in ein Parallelogramm

Fügen Sie einfach den Parameter „transform: skew(30deg)“ wie folgt zum CSS hinzu:

.button1 {
    
    
    background-color: white;
    border: 2px solid #EEEEEE;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 9px 2px;
    cursor: pointer;
    width: 140px;
    transform: skew(30deg);
    position: relative;
    left: 470px;
}

• Priorität: Z-Index : 999. Dies soll verhindern, dass dieses Tag von anderen Tags abgedeckt wird. Je größer die Zahl, desto höher die Priorität.

4. Verwenden Sie Ajax zum Lesen von Daten

Ich habe es beim Schreiben von Code immer vermieden, Werte direkt zu verwenden, sondern Variablen zu verwenden, wodurch bei Datenänderungen viele Änderungen vermieden werden können.
Die Json-Datei lautet wie folgt:

{
    
    
"消费地点":["教学楼","食堂","体育馆","田径场","操场"],
"用户人数":[35, 25, 9, 21, 18]
}

Abbildung 4-1
Deklarieren Sie zwei leere Listen -> Schleife zum Lesen von Daten in der Methode -> Aufrufen der Methode
Hier ist der Parameter async: false in Ajax der entscheidende Punkt. Dieser Parameter hebt die asynchrone Funktion von Ajax auf, sodass Ajax bestellt werden kann von oben nach unten umsetzen.

5. Wasserzeichen hinzufügen

Das Hinzufügen eines Wasserzeichens ist sehr einfach. Fügen Sie einfach einen Code zum Body-Tag hinzu.

function WaterMarker(str) {
    
    
    var can = document.createElement('canvas');
    var body = document.body;
    body.appendChild(can);
    can.width = 300; // 画布的宽
    can.height = 200; // 画布的高度
    can.style.display = 'none';
    var cans = can.getContext('2d');
    cans.rotate(-10 * Math.PI / 180); // 画布里面文字的旋转角度
    cans.font = "25px Microsoft JhengHei"; // 画布里面文字的字体
    cans.fillStyle = "rgba(17, 17, 17, 0.50)"; // 画布里面文字的颜色,第四个参数为透明度
    cans.textAlign = 'left'; //画布里面文字的水平位置
    cans.textBaseline = 'Middle'; // 画布里面文字的垂直位置
    cans.fillText(str, can.width / 3, can.height / 2); // 画布里面文字的间距比例
    body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; // 把画布插入到body中
}

WaterMarker("coder 谢公子");

Achten Sie auf das offizielle Konto „ Python-Crawler und Datenanalyse “ und antworten Sie auf „ Visual Big Screen “, um Code und Daten zu erhalten