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中使用logging模块打印log日志详解
Apr 05 Python
Python实现简单过滤文本段的方法
May 24 Python
python中kmeans聚类实现代码
Feb 23 Python
python实现二维插值的三维显示
Dec 17 Python
Python lambda表达式用法实例分析
Dec 25 Python
Python multiprocessing多进程原理与应用示例
Feb 28 Python
python-pyinstaller、打包后获取路径的实例
Jun 10 Python
python 利用turtle模块画出没有角的方格
Nov 23 Python
Python3和pyqt5实现控件数据动态显示方式
Dec 13 Python
python 给图像添加透明度(alpha通道)
Apr 09 Python
python对 MySQL 数据库进行增删改查的脚本
Oct 22 Python
Python实现一个论文下载器的过程
Jan 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
js获取浏览器的各种属性
2017/04/27 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python调用java的jar包方法
2018/12/15 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
python如何判断IP地址合法性
2020/04/05 Python
python如何处理程序无法打开
2020/06/16 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Python偏函数实现原理及应用
2020/11/20 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
制药工程专业职业生涯规划范文
2014/03/10 职场文书
检讨书怎么写
2015/01/23 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
拉贝日记观后感
2015/06/05 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android