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获取CPU和内存信息的思路与实现(linux系统)
Jan 03 Python
使用Python压缩和解压缩zip文件的教程
May 06 Python
windows下Python实现将pdf文件转化为png格式图片的方法
Jul 21 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
Nov 30 Python
Python获取二维矩阵每列最大值的方法
Apr 03 Python
Django实现登录随机验证码的示例代码
Jun 20 Python
python3学习之Splash的安装与实例教程
Jul 09 Python
PyCharm取消波浪线、下划线和中划线的实现
Mar 03 Python
Python如何生成xml文件
Jun 04 Python
Django filter动态过滤与排序实现过程解析
Nov 26 Python
selenium自动化测试入门实战
Dec 21 Python
浅谈Python列表嵌套字典转化的问题
Apr 07 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/12/11 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python自定义线程类简单示例
2018/03/23 Python
python requests post多层字典的方法
2018/12/27 Python
Django框架表单操作实例分析
2019/11/04 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
简单的项目建议书模板
2014/03/12 职场文书
企业业务员岗位职责
2014/03/14 职场文书
党员服务承诺书
2014/05/28 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Golang流模式之grpc的四种数据流
2022/04/13 Golang