【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传_数据可视化:基于 echarts + python flask 动态实时【拖放】大屏 - 数据分析看

<div class="container_fluid">
        <!-- 标题栏 -->
        <div class="row_fluid">
            <div id="container_1" class="col-xs-12 col-md-12">
 
            </div>
        </div>
 
        <!-- 上栏 -->
        <div class="row_fluid">
 
            <!-- 上左栏 -->
            <div id="container_2" class="col-xs-12 col-md-4">
                <div id="container_2_1" class="col-xs-12 col-md-6">
                </div>
                <div id="container_2_2" class="col-xs-12 col-md-6">
                </div>
                <div id="container_2_3" class="col-xs-12 col-md-12">
                </div>
            </div>
 
            <!-- 上中栏 -->
            <div id="container_3" class="col-xs-12 col-md-4">
                <iframe src="myimg/video.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                    allowfullscreen="true" width="100%" height="100%"> </iframe>
            </div>
 
            <!-- 上右栏 -->
            <div id="container_4" class="col-xs-12 col-md-4">
                <div id="container_4_1" class="col-xs-12 col-md-3">
                </div>
 
                <div id="container_4_2" class="col-xs-12 col-md-3">
                </div>
 
                <div id="container_4_3" class="col-xs-12 col-md-3">
                </div>
 
                <div id="container_4_4" class="col-xs-12 col-md-3">
                </div>
 
                <div id="container_4_5" class="col-xs-12 col-md-6">
                </div>
 
                <div id="container_4_6" class="col-xs-12 col-md-6">
                </div>
            </div>
        </div>
    </div>
 
    <!-- 下栏 -->
    <div class="row_fluid">
        <!-- 下左栏 -->
        <div id="container_5" class="col-xs-12 col-md-4">
 
            <div id="container_5_1" class="col-xs-12 col-md-12">
            </div>
            <div id="container_5_2" class="col-xs-12 col-md-12">
            </div>
        </div>
 
        <!-- 下中栏 -->
        <div id="container_6" class="col-xs-12 col-md-4">
        </div>
 
        <!-- 下右栏 -->
        <div class="col-xs-12 col-md-4">
            <div id="container_7" class="row_fluid">
                <div id="container_7_1" class="col-xs-12 col-md-6">
                </div>
                <div id="container_7_2" class="col-xs-12 col-md-6">
                </div>
                <div id="container_7_3" class="col-xs-12 col-md-12">
                </div>
            </div>
        </div>
 
    </div>

var idContainer_4_5 = "container_4_5";
function initEchart_4_5() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(idContainer_4_5), gTheme);
  option = {
    title: {
      text: "年龄分布",
      top: "10%",
      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: "0",
      right: "10",
      bottom: "25%",
      top: "20%",
      containLabel: true,
    },
 
    xAxis: {
      type: "category",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    yAxis: {
      type: "value",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    series: [
      {
        name: "年龄分布",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
      },
    ],
  };
 
  // 使用刚指定的配置项和数据显示图表。
  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;
}
 
function asyncData_4_5() {
  $.getJSON("myjson/bar_age.json").done(function (data) {
    var myChart = echarts.init(document.getElementById(idContainer_4_5));
    myChart.setOption({
      xAxis: { data: getKeys(data) },
      series: [{ data: data }],
    });
  }); //end $.getJSON
}
 
initEchart_4_5();

[{"name": "<18", "value": 2962}, {"name": "18-23", "value": 3119}, {"name": "24-30", "value": 2562}, {"name": "31-40", "value": 1024}, {"name": "41-50", "value": 2791}, {"name": ">50", "value": 4073}]

function asyncData() {
  asyncData_4_5();
  asyncData_4_6();
  asyncData_5_1();
  asyncData_5_2();
  asyncData_6();
  asyncData_7_1();
  asyncData_7_2();
  asyncData_7_3();
  // 定时从服务器更新数据
  setTimeout(asyncData, 1000);
}

 
app = Flask(__name__, static_folder="static", template_folder="template")
 
 
@app.route('/')
def hello_world():
    return 'Hello World!'
 
# 主程序在这里
if __name__ == "__main__":
    # 开启线程，触发动态数据
    a = threading.Thread(target=asyncJson.loop)
    a.start()
 
    # 开启 flask 服务
    app.run(host='0.0.0.0', port=88, debug=True)

<!-- 启动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  欢迎多多交流