Flask和pyecharts实现动态数据可视化


Posted in Python onFebruary 26, 2020

1:数据源

Hollywood Movie Dataset: 好莱坞2006-2011数据集

实验目的: 实现 统计2006-2011的数据综合统计情况,进行数据可视化

gitee地址:https://gitee.com/dgwcode/an_example_of_py_learning/tree/master/MovieViwer

1.数据例子:

Film ,Major Studio,Budget
300,Warner Bros,
300,Warner Bros.,65
3:10 to Yuma,Lionsgate,48
Days of Night,Independent,32
Across the Universe,Independent,45
Alien vs. Predator -- Requiem,Fox,40
Alvin and the Chipmunks,Fox,70
American Gangster,Universal,10
Bee Movie,Paramount,15
Beowulf,Paramount,15
Blades of Glory,Paramount,61

Flask和pyecharts实现动态数据可视化

2: 环境pycharm新建Flask项目

Flask和pyecharts实现动态数据可视化

Flask和pyecharts实现动态数据可视化

3 数据处理:

Film ,Major Studio,Budget 为数据的三个标题 截断这三个数据就行

import pandas as pd
from threading import Timer
import math


# coding=utf-8
def getTotalData():
  data1 = pd.read_csv('static/1.csv');
  data2 = pd.read_csv('static/2.csv');
  data3 = pd.read_csv('static/3.csv');
  data4 = pd.read_csv('static/4.csv');
  data5 = pd.read_csv('static/5.csv');
  datadic1 = [];
  datadic2 = [];
  datadic3 = [];
  datadic4 = [];
  datadic5 = [];
  # 处理数据.csv
  for x, y in zip(data1['Major Studio'], data1['Budget']):
    datadic1.append((x, y))
  for x, y in zip(data2['Major Studio'], data2['Budget']):
    datadic2.append((x, y))
  for x, y in zip(data3['Lead Studio'], data3['Budget']):
    datadic3.append((x, y))
  for x, y in zip(data4['Lead Studio'], data4['Budget']):
    datadic4.append((x, y))
  for x, y in zip(data5['Lead Studio'], data5['Budget']):
    datadic5.append((x, y))
  totaldata = [];
  totaldata.append(datadic1);
  totaldata.append(datadic2);
  totaldata.append(datadic3);
  totaldata.append(datadic4);
  totaldata.append(datadic5);
  return totaldata;


indexx = 0;
curindex = 0;
end = 5;
returnData = dict();


# 定时处理数据
def dataPre():
  global indexx, end, curindex, flag, returnData;
  totalData = getTotalData(); # list[map]
  # x = len(totalData[0]) + totalData[1].len() + totalData[2].len() + totalData[3].len() + totalData[4].len();
  data = totalData[indexx];
  # init
  # print(curindex, end, indexx)
  # print(len(data))
  for k, v in data[curindex:end]:
    if v == "nan" or math.isnan(v):# 截断 k v中 nan
      continue;
    if returnData.get(k, -1) == -1:
      print(k, v);
      returnData[k] = v;
    else:
      returnData[k] = returnData[k] + v;
  print(len(returnData))
  if end < len(data) - 20:
    curindex = end;
    end = end + 20;
  if end >= len(data) - 20:
    indexx += 1;
    curindex = 0;
    end = 20;
  t = Timer(2, dataPre)
  t.start()
  print(returnData.keys(), end='\n')
  return returnData;


if __name__ == "__main__":
  dataPre();

4:实际程序入口

from flask import Flask, render_template
from pyecharts.charts import Bar
from pyecharts import options as opts
import math
import dealdata
from threading import Timer
from pyecharts.globals import ThemeType


app = Flask(__name__, static_folder="templates")


@app.route('/')
def hello_world():
  dataPre();# 数据入口
  return render_template("index.html")

# 定义全局索引
indexx = 0;
curindex = 0;
end = 5;
returnData = dict();


# 定时处理数据
def dataPre():
  global indexx, end, curindex, flag, returnData;
  totalData = dealdata.getTotalData(); # list[map]
  # x = len(totalData[0]) + totalData[1].len() + totalData[2].len() + totalData[3].len() + totalData[4].len();
  data = totalData[indexx];
  #print(totalData)
  # init
  # print(curindex, end, indexx)
  # print(len(data))
  for k, v in data[curindex:end]:
    if v == "nan" or math.isnan(v): # 截断 k v中 nan
      continue;
    if returnData.get(k, -1) == -1:
      returnData[k] = v;
    else:
      returnData[k] = returnData[k] + v;
  print(len(returnData)) # 反应长度关系
  if end < len(data) - 15: # 参数为截断的项数 与前端时间要对应
    curindex = end;
    end = end + 15;
  if end >= len(data) - 15:
    indexx += 1;
    curindex = 0;
    end = 15;
  t = Timer(1, dataPre)
  t.start()
  #print(returnData, end='\n')



def bar_reversal_axis() -> Bar:
  global returnData;
  #print(sorted(returnData.items(), key=lambda x: x[1]))
  sorted(returnData.items(), key=lambda x: x[1],reverse=False)
  #print(returnData.keys())
  c = (
    Bar({"theme": ThemeType.MACARONS})
      .add_xaxis(list(returnData.keys()))
      .add_yaxis("电影公司名称:",list(returnData.values()),color="#BF3EFF")
      .reversal_axis()
      .set_series_opts(label_opts=opts.LabelOpts(position="right",color="#BF3EFF",
                            font_size=12))
      .set_global_opts(title_opts=opts.TitleOpts(title="2007-2011好莱坞电影最受欢迎公司",
                           pos_left='60%',subtitle="当前"+str(2006+indexx)+"年"))
  )
  return c;
@app.route("/barChart")
def index():
  c = bar_reversal_axis();
  return c.dump_options_with_quotes();

if __name__ == '__main__':
  app.run();

5: 前端

<html>
<head>
 <meta charset="UTF-8">
 <title>Awesome-pyecharts</title>
 <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
 <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
  <style>
    div{
      padding-left: 100px;
    }
  </style>

</head>
<body>
 <div id="bar" style="width:1024px; height:1024px;"></div>
 <script>
  var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
  $(
   function () {
    fetchData(chart);
    setInterval(fetchData, 500);
   }
  );
  function fetchData() {
   $.ajax({
    type: "GET",
    url: "http://127.0.0.1:5000/barChart",
    dataType: 'json',
    success: function (result) {
     chart.setOption(result);
    }
   });
  }
 </script>
</body>
</html>

6: 扩展资料

https://github.com/pyecharts/pyecharts/tree/master/pyecharts/render/templates

Flask和pyecharts实现动态数据可视化

{% import 'macro' as macro %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{ chart.page_title }}</title>
  {{ macro.render_chart_dependencies(chart) }}
</head>
<body>
  <div id="{{ chart.chart_id }}" style="width:{{ chart.width }}; height:{{ chart.height }};"></div>
  <script>
    var canvas_{{ chart.chart_id }} = document.createElement('canvas');
    var mapChart_{{ chart.chart_id }} = echarts.init(
       canvas_{{ chart.chart_id }}, '{{ chart.theme }}', {width: 4096, height: 2048, renderer: '{{ chart.renderer }}'});
    {% for js in chart.js_functions.items %}
      {{ js }}
    {% endfor %}
    var mapOption_{{ chart.chart_id }} = {{ chart.json_contents }};
    mapChart_{{ chart.chart_id }}.setOption(mapOption_{{ chart.chart_id }});
    var chart_{{ chart.chart_id }} = echarts.init(
    document.getElementById('{{ chart.chart_id }}'), '{{ chart.theme }}', {renderer: '{{ chart.renderer }}'});
    var options_{{ chart.chart_id }} = {
      "globe": {
      "show": true,
      "baseTexture": mapChart_{{ chart.chart_id }},
      shading: 'lambert',
      light: {
        ambient: {
          intensity: 0.6
        },
        main: {
          intensity: 0.2
        }
       }
      }};
    chart_{{ chart.chart_id }}.setOption(options_{{ chart.chart_id }});
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python基础教程之元组操作使用详解
Mar 25 Python
Python中死锁的形成示例及死锁情况的防止
Jun 14 Python
Python中的groupby分组功能的实例代码
Jul 11 Python
Python读写zip压缩文件的方法
Aug 29 Python
浅谈numpy生成数组的零值问题
Nov 12 Python
python合并已经存在的sheet数据到新sheet的方法
Dec 11 Python
python中aioysql(异步操作MySQL)的方法
Apr 11 Python
Python正则表达式匹配日期与时间的方法
Jul 07 Python
Python编程中类与类的关系详解
Aug 08 Python
python获取响应某个字段值的3种实现方法
Apr 30 Python
你需要学会的8个Python列表技巧
Jun 24 Python
python解决12306登录验证码的实现
Apr 18 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
Feb 26 #Python
Python基础之字符串常见操作经典实例详解
Feb 26 #Python
浅析python表达式4+0.5值的数据类型
Feb 26 #Python
Pandas时间序列基础详解(转换,索引,切片)
Feb 26 #Python
Python图像处理库PIL的ImageFont模块使用介绍
Feb 26 #Python
Python利用FFT进行简单滤波的实现
Feb 26 #Python
Python图像处理库PIL的ImageGrab模块介绍详解
Feb 26 #Python
You might like
PHP 命名空间实例说明
2011/01/27 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python连接池实现示例程序
2013/11/26 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
python3个性签名设计实现代码
2018/06/19 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
中学门卫岗位职责
2013/12/26 职场文书
大型活动策划方案
2014/01/12 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
研究生导师推荐信
2014/09/06 职场文书
光荣之路观后感
2015/06/12 职场文书
初中地理教学反思
2016/02/19 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers