27 [ソースコード]データ視覚化大画面：Echarts +PythonFlaskに基づく32-9超広大画面の例-監視およびコマンドセンター

プログラミング 2022-03-25 08:37:06 訪問数: null

コンテンツ

結果を示す

1.エフェクトアニメーション

 2.さまざまなテーマ効果

1.需要計画を決定します

1.画面解像度

2.展開方法 

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

3.コーディングの実装（スペースと読みやすさの考慮事項に基づいて、いくつかのキーコードをここに示します）

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

1.1ワイドスクリーン32：9

1.2ページdivレイアウト 

2.フロントエンドJSコード-棒グラフEchartsオプション 

3.JSON通信データ定義-ヒストグラムチャートオプション 

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

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

4.コマンドを開始します

5.操作効果

6.ソースコードのダウンロード 

もっと素晴らしいケース

結果を示す

前面に書かれたこの超ワイドスクリーン32：9ケースには、基本的にビジュアル開発で一般的に使用されるすべてのチャートが含まれています。このケースをマスターすると、ビジュアル開発を非常に簡単に行うことができます〜

  1. 円グラフ
  2. バラの姿
  3. 水球チャートliquidFill
  4. カレンダーチャートカレンダー
  5. ヒストグラムバー
  6. 折れ線グラフ
  7. ピクトグラム絵
  8. バースタック
  9. ラインスタック
  10. 中国地図中国
  11. 世界地図世界
  12. ワードグラフwordcloud
  13. じょうごチャート
  14. レーダーチャート
  15. ビデオエリアビデオ
  16. カルーセルテーブル

1.エフェクトアニメーション

 2.さまざまなテーマ効果

 

 

 

1.需要計画を決定します

1.画面解像度

この場合の大画面解像度は4：3でも16：9でもありませんが、超ワイド画面32：9です。

コンピューターの解像度画面の適応ディスプレイによると、F11全画面表示。

2.展開方法 

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 getpollingmethodを使用します 。実際のアプリケーションでは、バックエンドデータのリアルタイム更新を監視し、状況に応じてリアルタイムでフロントエンドにプッシュすることもできます。

3.コーディングの実装（スペースと読みやすさの考慮事項に基づいて、いくつかのキーコードをここに示します）

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

ブートストラップコンテナを使用して実装-流体、行、列など。

1.1ワイドスクリーン32：9

超ワイドスクリーン32：9なので、ここの現像機は幅を200％に設定しています。

<body style="height: 100%; width:200%;" >
</body>

1.2ページdivレイアウト 

<div id="vue_app" class="container-fluid">
          <!-- 外框 1 -->
          <div class="row" style="height: 5%;">
               <div id="container_1" class="col" style="height: 100%; color:#00ffff; text-align: center; ">
                    <h3>【27】数据可视化大屏：基于 Echarts + Flask 实现的 32:9 超宽屏可视化范例 - 监控指挥中心 </h3>
               </div>
          </div>
          <div class="row" style="height: 2%;">
          </div>
          <!-- 外框 2 -->
          <div class="row" style="height: 60%;">
               <!-- 左侧 -->
               <div class="col" style="height: 100%">
                    <!-- 左侧第1行 -->
                    <div class="row" style="height: 30%">
                         <dv-border-box-7 class=" col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
                              style="width: 25%;">
                              <div id="container_l1" style="height: 100%;">
                              </div>
                         </dv-border-box-7>
                         <dv-border-box-7 class="col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
                              style="width: 25%;">
                              <div id="container_l2" style="height: 100%;">
                              </div>
                         </dv-border-box-7>

                         <dv-border-box-7 class="col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
                              style="width: 25%;">
                              <div id="container_l3" style="height: 100%;">
                              </div>
                         </dv-border-box-7>
                         <dv-border-box-7 class="col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
                              style="width: 25%;">
                              <div id="container_l4" style="height: 100%;">
                              </div>
                         </dv-border-box-7>
                    </div>
                    <!-- 左侧第2行 -->
                    <div class="row" style="height: 35%">
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col">
                              <div id="container_l5" style="height: 100%">
                              </div>
                         </dv-border-box-13>
                    </div>
                    <!-- 左侧第3行 -->
                    <div class="row" style="height: 35%">
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 40%;">
                              <div id="container_l6" style="height: 100%">
                              </div>
                         </dv-border-box-13>
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 60%;">
                              <div id="container_l7" style="height: 100%">
                              </div>
                         </dv-border-box-13>
                    </div>
               </div>
               <!-- 中间 -->
               <div class="col" style="height: 100%">
                    <div class="row" style="height: 100%">
                         <dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col"
                              style="width: 45%;">
                              <div id="container_m1" style="height: 100%; ">
                              </div>
                         </dv-border-box-7>
                         <dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col"
                              style="width:45%;">
                              <div id="container_m2" style="height: 100%;">
                              </div>
                         </dv-border-box-7>
                    </div>
               </div>
               <!-- 右侧 -->
               <div class="col" style="height: 100%">
                    <!-- 右侧第一行 -->
                    <div class="row" style="height: 30%">
                         <dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col">
                              <div id="container_r1" style="height: 100%">
                              </div>
                         </dv-border-box-7>
                         <dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col">
                              <div id="container_r2" style="height: 100%">
                              </div>
                         </dv-border-box-7>
                         <dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col">
                              <div id="container_r3" style="height: 100%">
                              </div>
                         </dv-border-box-7>
                    </div>
                    <!-- 右侧第二行 -->
                    <div class="row" style="height: 35%">
                         <div id="container_r4" class="col">
                              <iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                                   allowfullscreen="true" width="100%" height="100%"> </iframe>
                         </div>
                         <div id="container_r5" class="col">
                              <iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                                   allowfullscreen="true" width="100%" height="100%"> </iframe>
                         </div>
                         <div id="container_r6" class="col">
                              <iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                                   allowfullscreen="true" width="100%" height="100%"> </iframe>
                         </div>
                    </div>
                    <!-- 右侧第三行 -->
                    <div class="row" style="height: 35%">
                         <div id="container_r7" class="col">
                              <iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                                   allowfullscreen="true" width="100%" height="100%"> </iframe>
                         </div>
                         <div id="container_r8" class="col">
                              <iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                                   allowfullscreen="true" width="100%" height="100%"> </iframe>
                         </div>
                         <div id="container_r9" class="col">
                              <iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                                   allowfullscreen="true" width="100%" height="100%"> </iframe>
                         </div>
                    </div>
               </div>
          </div>
          <!-- 外框 3 -->
          <div class="row" style="height: 30%;">
               <div class="col" style="height: 100%">
                    <div class="row" style="height: 100%">
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 50%;">
                              <div id="container_b1" style="height: 100%;">
                              </div>
                         </dv-border-box-13>
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 50%;">
                              <div id="container_b2" style="height: 100%; ">
                              </div>
                         </dv-border-box-13>
                    </div>
               </div>
               <div class="col" style="height: 100%">
                    <div class="row" style="height: 100%">
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 33%; ">
                              <div id="container_b3" style="height: 100%; ">
                              </div>
                         </dv-border-box-13>
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 33%; ">
                              <div id="container_b4" style="height: 100%; ">
                              </div>
                         </dv-border-box-13>
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 33%; ">
                              <div id="container_b5" style="height: 100%; ">
                              </div>
                         </dv-border-box-13>
                    </div>
               </div>
               <div class="col" style="height: 100%">
                    <div class="row" style="height: 100%">
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 50%;">
                              <div id="container_b6" style="height: 90%; ">

                              </div>
                         </dv-border-box-13>
                         <dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col"
                              style="width: 50%; padding: 2%;">
                              <div id="container_b7">
                                   <dv-scroll-board :config="config" />
                              </div>
                         </dv-border-box-13>
                    </div>
               </div>
          </div>
     </div>
</div>

2.フロントエンドJSコード-棒グラフEchartsオプション 

function init_echart_bar_horizontal(container) {
  var chartDom = document.getElementById(container);
  var myChart = echarts.init(chartDom, window.gTheme);
  var option = {
    title: {
      text: "供应商",
      top: "5%",
      left: "2%",
      textStyle: {
        // color: "#3690be",
        fontSize: "12",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} 亿元",
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      },
    },
    legend: {
      data: ["成交额", "综合评价"],
      textStyle: {
        color: "rgba(255,255,255,.8)",
        fontSize: "10",
      },
      top: "15%",
    },
    grid: {
      left: "10%",
      top: "30%",
      right: "5%",
      bottom: "2%",
      containLabel: true,
    },
    dataZoom: [
      {
        type: "slider",
        yAxisIndex: 0,
        left: "5%",
        start: 95,
        end: 100,
      },
    ],
    xAxis: [
      {
        name: "成交额(亿元)",
        type: "value",
        min: 0,
        max: 5000,
        nameLocation: "start",
        nameTextStyle: {
          color: "#3690be",
          fontSize: 10,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 10,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.8)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
      },
      {
        name: "综合评价",
        type: "value",
        min: 0,
        max: 100,
        nameLocation: "start",
        nameTextStyle: {
          color: "#3690be",
          fontSize: 10,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 10,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.8)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
      },
    ],
    yAxis: {
      // name:'供应商',
      type: "category",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.8)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    series: [
      {
        name: "成交额",
        type: "bar",
        xAxisIndex: 0,

        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [],
      },
      {
        name: "综合评价",
        type: "bar",
        xAxisIndex: 1,
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [],
      },
    ],
  };

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

function async_echart_bar_horizontal(container, filename) {
  $.getJSON(filename).done(function (data) {
    var myChart = echarts.init(
      document.getElementById(container),
      window.gTheme
    );

    myChart.setOption({
      yAxis: { data: data["yAxis"]["data"] },
      series: [
        { data: data["series"][0]["data"] },
        { data: data["series"][1]["data"] },
      ],
    });
  }); //end $.getJSON}
}

3.JSON通信データ定義- 棒グラフEchartsオプション 

{"yAxis": {"data": ["竞帝科技", "东方电子", "华兴科技", "华通科技", "正大科技", "卓越科技", "蓝讯科技", "科赛科技", "乐怿科技", "大族科技", "泓是科技", "卓蓝科技", "讯飞科技", "头头是道科技", "三一科技", "绿卓科技", "讯天科技", "鸿海科技", "中正电子", "和讯元器件", "普飞电子", "宏达科技", "正视公司", "和达有线科技", "傲视科技", "通达科技", "迅雷电子", "暴风电子", "搜狐电子", "腾科电子", "百世电子", "东正科技", "东方红科技", "宏景科技", "雷赛科技", "丰辰科技", "台达科技"]}, "series": [{"data": [91, 27, 90, 94, 50, 60, 76, 60, 23, 83, 98, 43, 21, 47, 26, 74, 89, 57, 50, 32, 98, 86, 25, 91, 82, 26, 25, 92, 52, 93, 71, 51, 64, 73, 80, 68, 86]}, {"data": [40, 63, 41, 29, 97, 68, 79, 38, 90, 55, 32, 62, 58, 42, 26, 37, 30, 94, 72, 73, 25, 58, 44, 58, 52, 26, 62, 40, 78, 61, 28, 92, 27, 81, 38, 24, 78]}]}

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

 // 定时1s执行数据更新函数
  setInterval(function () {
    async_echart_bar_horizontal(
      container,
      path_bar_horizontal + "bar_horizontal.json"
    );
  }, 1000);

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

我的微信号：6550523  欢迎多多交流

5.操作効果

6.ソースコードのダウンロード 

27 [ソースコード]データ視覚化大画面：Echarts +PythonFlaskに基づく32-9超広大画面の例-監視およびコマンドセンター  

https://download.csdn.net/download/lildkdkdkjf/84992072 

もっと素晴らしいケース

YYDatavのデータ視覚化「素晴らしい事例の要約」_YYDataVのブログ-CSDNブログ

 

おすすめ

転載: blog.csdn.net/lildkdkdkjf/article/details/123523203
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com