大画面ビジュアルを実現したEcharts

大きなビジュアル画面を段階的に作成し、最後の宿題を簡単に完了できます。
公式アカウント「Python クローラーとデータ分析」に注目し、「ビジュアルビッグスクリーン」に返信してコードとデータを取得します

ここに画像の説明を挿入

関連するテクノロジー: Echarts、HTML、CSS、JavaScript

Echarts 公式ウェブサイト:
https://echarts.apache.org/handbook/zh/concepts/axis/

目次
1. echarts は複数の画像を同時に表示します
2. CSS を使用してインターフェースを最適化し
ます 3. タイトルを追加します
4. Ajax を使用してデータを読み取ります
5. ウォーターマークを追加します

1. echarts は複数の画像を同時に表示します

1111
図 1-1
echarts を学習し始めた頃は、以下の図 1-1 を入力して div を宣言し、高さと幅を指定してグラフを div に入れて、一つずつ学習していました。複数の画像を同時に表示する最も簡単な方法は、以下の図 1-2 に示すように、複数の div を宣言することです。

ここに画像の説明を挿入

図1-2

2. CSSを使用してインターフェースを最適化する

複数の画像が表示される問題に対処した後、画像を特定の位置に調整することを検討する必要がありますが、このとき、css を使用して html タグの位置を調整できます。図 1-2 に示すように、下の画像を最初の画像と同じ行に移動します。

ここに画像の説明を挿入

図 2-1
これらの CSS パラメーターの意味については説明しません。
注: HTML 要素のデフォルト (つまり、位置決めなし) は、通常のドキュメントフローオブジェクトに従います。静的に配置された要素は、上下左右の影響を受けません。

3. タイトルを追加する

ここに画像の説明を挿入
図 3-1 では
、2 つのサブタイトルはボタンであり、中央のタイトルは実際にはテキストが追加された灰色の下部 (div) です。実装は 4 つのボタンタグ、次に 4 つの h3 タグを宣言し、最後に CSS を渡すことで簡単に実行できます。 to h3 タグが対応するボタンに移動されます。

ここに画像の説明を挿入

図 3-2 は
パラメータを簡単に説明しています。

バウンディングボックスを長方形から平行四辺形に変換します

次のように、パラメーター —transform: skew(30deg) を CSS に追加するだけです。

.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;
}

優先度: z-index :999、これはこのタグが他のタグによってカバーされるのを防ぐためのもので、数値が大きいほど優先度が高くなります。

4. Ajax を使用してデータを読み取る

私はコードを書くときに値を直接使用することを常に避けてきましたが、データ変更時の多くの変更を避けることができる変数を使用しました。
Json ファイルは次のとおりです。

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

ここに画像の説明を挿入

図 4-1
2 つの空のリストを宣言 -> メソッド内でデータを読み取るループ -> メソッドの呼び出し
ここで、Ajax のパラメーター async: false が重要なポイントです。このパラメーターは Ajax の非同期機能をキャンセルするため、Ajax を順序付けできるようになります。上から下まで実装します。

5.透かしを追加する

ウォーターマークの追加は非常に簡単で、body タグにコードを追加するだけです。

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 谢公子");

公式アカウント「Python クローラーとデータ分析」に注目し、「ビジュアルビッグスクリーン」に返信してコードとデータを取得します