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计算三角函数之acos()方法的使用
May 15 Python
python3.6使用urllib完成下载的实例
Dec 19 Python
Python中的几种矩阵乘法(小结)
Jul 10 Python
基于python二叉树的构造和打印例子
Aug 09 Python
Pytorch Tensor的统计属性实例讲解
Dec 30 Python
python实现加密的方式总结
Jan 19 Python
keras .h5转移动端的.tflite文件实现方式
May 25 Python
Python+PyQt5+MySQL实现天气管理系统
Jun 16 Python
Python3爬虫中Selenium的用法详解
Jul 10 Python
Python 操作SQLite数据库的示例
Oct 16 Python
python操作toml文件的示例代码
Nov 27 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
Mar 03 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生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
实现PHP搜索加分页
2016/10/12 PHP
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python怎么删除缓存文件
2020/07/19 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
如何理解委托
2012/01/06 面试题
美术师范毕业生自荐信
2013/11/16 职场文书
社会调查研究计划书
2014/05/01 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
公司任命书范本
2014/06/04 职场文书
高中生逃课检讨书
2014/10/10 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
班主任经验交流材料
2014/12/16 职场文书
教师工作表现自我评价
2015/03/05 职场文书
我爱我班主题班会
2015/08/13 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers