それほど難しいことではなく、Echarts + Python Flask をベースに動的なリアルタイム大画面を簡単に実現できます

開発 2022-10-25 00:41:35 訪問数: null

記事ディレクトリ

結果を示す

1.動的なリアルタイム更新データのレンダリング

2bff5af5d5944ea2a2630cd7c7b4be71.gif

2. 右クリックでテーマを切り替える

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ソースコード

次のように取得します

現在、3,000 人以上のメンバーが参加する技術交流グループが開設されています.追加する際の最良の発言方法は、ソース + 興味の方向性です.これは、情報へのより迅速なアクセスを見つけてグループに参加するのに便利です.

方法①、WeChat ID追加：dkl88191、備考：CSDN＋大画面から
方法②、WeChat検索公開番号：Python学習とデータマイニング、バックグラウンド返信：大画面

1.需要計画の決定

  1. 画面の解像度

この場合の解像度は、最も一般的に使用されるワイドスクリーンの比率である 16:9 です。

コンピューターの解像度画面適応ディスプレイによると、F11 フルスクリーン ビュー。

  1. 導入方法

B/S モード: Windows、Linux、Mac およびその他の主流のオペレーティング システムをサポート; 主流のブラウザー Chrome、Microsoft Edge、360 などをサポート; サーバーは Python 言語で記述され、Python 環境を構成できます。

2.全体のアーキテクチャ設計

  1. フロントエンド Echarts オープン ソース ライブラリ: WebStorm エディターを使用します。
  2. バックエンド http サーバー: Python 実装に基づき、Pycharm または VSCode エディターを使用。
  3. データ送信フォーマット: JSON;
  4. データ ソースの種類: JSON ファイル。実際の開発要件では、カスタム HTTP API インターフェイスまたは PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel フォームなどの他のタイプのデータベースをサポートしています。
  5. データ更新方法: http get polling メソッドを使用します。実際のアプリケーションでは、バックエンド データのリアルタイム更新を監視し、状況に応じてリアルタイムでフロントエンドにプッシュすることも選択できます。

3. コーディングの実装 (スペースと読みやすさを考慮して、いくつかの主要なコードをここに示します)

  1. フロントエンドのhtmlコード

このページ レイアウトは H5 のグリッド レイアウトを使用しており、 コードはシンプルで操作が簡単です。

<div class="grid-container">
        <div id="lo_0">
            <h2>32 数据可视化-银行监管系统</h2>
        </div>
        <div id="lo_1">

        </div>
        <div id="lo_2">

        </div>
        <div id="lo_3">

        </div>
        <div id="lo_4">

        </div>
        <div id="lo_5">

        </div>
        <div id="lo_6">

        </div>
        <div id="lo_7">

        </div>
        <div id="lo_8">
            <div style="height: 10%;">
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirmAdd')">新增金额</button>
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirm')">累计金额</button>
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'nowConfirm')">现有金额</button>
            </div>
            <div id="container_8" style="height: 90%;"></div>
        </div>
        <div id="lo_9">9</div>
        <div id="lo_10">10</div>
    </div>

グリッドコンテナの定義

.grid-container {
            display: grid;
            /* 6列，定义列宽 */
            grid-template-columns: 14% 14.5% 20% 20% 14.5% 14%;
            /* auto: 它用于自动设置行的高度，即取决于行中容器和内容的大小。 */
            grid-template-rows: 10% 25% 30% 30%;
            grid-gap: 10px;
            /* background-color: #2196F3; */
            padding: 0;
            width: 100%;
            height: 100%;
        }

複数の行と列にまたがるグリッド定義の場合

  #lo_5 {
            grid-area: 3 / 1 / 4 / 3;
        }
  1. フロントエンド JS - echarts チャート
function init_echart_line_visualMap(container) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(container), gTheme);
  option = {
    title: {
      text: "股票市值实时监测",
      // top: 0,
      // left: "center",
      textStyle: {
        // color: "#17c0ff",
        fontSize: "12",
      },
    },

    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      },
    },

    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      top: "25%",
      containLabel: true,
    },

    xAxis: {
      name: "名称",
      type: "category",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          //fontSize: 14,
        },
        // formatter: "{value}%",
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    yAxis: {
      name: "亿元",
      type: "value",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          //fontSize: 14,
        },
        formatter: "{value}",
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    visualMap: {
      top: "top",
      left: "right",
      textStyle: {
        color: "rgba(255,255,255,.8)",
        //fontSize: 14,
      },
      pieces: [
        {
          gt: 0,
          lte: 100,
          color: "#FF0000",
        },
        {
          gt: 100,
          lte: 800,
          color: "#FFA500",
        },
        {
          gt: 800,
          lte: 900,
          color: "#2E8B57",
        },
      ],
    },
    series: [
      {
        name: "年龄分布",
        type: "line",
        // stack: "total",
        // label: {
        //   show: true,
        // },
        // 使用系统函数
        markPoint: {
          label: {
            textStyle: {
              color: "rgba(255,255,255,.8)",
              //fontSize: 14,
            },
          },
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
        // 自定义数据
        // markLine: {
        //   // 图形是否不响应和触发鼠标事件
        //   silent: true,
        //   label: {
        //     textStyle: {
        //       color: "rgba(255,255,255,.8)",
        //       //fontSize: 14,
        //     },
        //   },
        //   data: [
        //     {
        //       yAxis: 100,
        //       lineStyle: {
        //         color: "#FF0000",
        //       },
        //     },
        //     {
        //       yAxis: 800,
        //       lineStyle: {
        //         color: "#FFA500",
        //       },
        //     },
        //     {
        //       yAxis: 900,
        //       lineStyle: {
        //         color: "#2E8B57",
        //       },
        //     },
        //   ],
        // },
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function getKeys(dataList) {
  var keys = [];
  var len = dataList.length;
  for (var i = 0; i < len; i++) keys.push(dataList[i].name);
  return keys;
}

3. フロントエンド JS - データタイミング更新制御

各 Echarts チャートでの定期更新の間隔の独立した制御をサポートします。

 // 定时1s执行数据更新函数
  setInterval(function () {
    async_echart_bar_horizontal(
      container,
      path_bar_horizontal + "bar_horizontal.json"
    );
  }, 1000);
  1. データ転送フォーマット - JSON 定義
[
    {
        "name": "10:00",
        "value": 300
    },
    {
        "name": "10:01",
        "value": 301
    },
    {
        "name": "10:02",
        "value": 301
    },
    {
        "name": "10:03",
        "value": 300
    },
    {
        "name": "10:04",
        "value": 300
    },
    {
        "name": "10:05",
        "value": 303
    },
    {
        "name": "10:06",
        "value": 303
    },
    {
        "name": "10:07",
        "value": 303
    }
]

5. バックエンド フラスコ サーバー

from flask import Flask
app = Flask(__name__, static_folder="static", template_folder="template")


# 主程序在这里
if __name__ == "__main__":

    # 开启线程，触发动态数据
    a = threading.Thread(target=asyncJson.loop)
    a.start()

    # 开启 flask 服务
    app.run(host='0.0.0.0', port=88, debug=True)

4.開始コマンド

<!-- 启动server命令 -->
python main.py 

<!-- 浏览器中输入网址查看大屏（端口为 main.py 中的 port 参数定义） -->
http://localhost:88/static/index.html

<!-- 更多资料参考我的博客主页  -->
https://yydatav.blog.csdn.net/

<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616

5. 運用効果

b663c751daec4b828796a112e43585c8.gif

おすすめ

転載: blog.csdn.net/m0_59596937/article/details/127187339
おすすめ
ランキング
SLAM 14 講義 - ch3 演習
bootstrap4在庫スタイルリスト（見つけるために）
件名インターネット
スレッドのタイムアウト
LinuxのLinuxのコマンド必見マスター初心者注3。
コンピュータネットワークのネットワークアプリケーションの00 05基本原則
「10の花」
Classic topic: the maximum value of the sliding window + the first K high-frequency elements
fastjson の脆弱性のさまざまなバージョンのペイロード テスト
PythonクローラーBaidu広告フィルタリングシステム
アーカイブ
もっと
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)
2024-04-16(23)

コードワールド

© 2018 codetd.com