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 相关文章推荐
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
Jun 18 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
May 03 Python
简单谈谈python中的Queue与多进程
Aug 25 Python
Python实现繁?转为简体的方法示例
Dec 18 Python
Python docx库用法示例分析
Feb 16 Python
keras tensorflow 实现在python下多进程运行
Feb 06 Python
python 字典item与iteritems的区别详解
Apr 25 Python
Django ORM filter() 的运用详解
May 14 Python
使用Python操作MySQL的小技巧
Sep 10 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
Nov 06 Python
python实现三次密码验证的示例
Apr 29 Python
对象析构函数__del__在Python中何时使用
Mar 22 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安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python实现简易版计算器
2020/06/22 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
校企合作协议书
2014/04/16 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
生日答谢词
2015/01/05 职场文书
法律意见书范文
2015/06/04 职场文书
大学校园招聘会感想
2015/08/10 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书