Python读取CSV文件+flask+echarts可视化实现的过程

ykmk

已于 2022-10-20 21:24:11 修改

阅读量2.5k

点赞数 2

文章标签： python flask 开发语言

于 2022-09-13 12:51:05 首次发布

本文链接：https://blog.csdn.net/weixin_50950569/article/details/126830814

版权

前言

记录一下自己零基础实现Python读取CSV文件+flask+echarts可视化实现的过程，

关键:

查找资料了解已经成熟的实例，去看去分析。
找到源码，尝试改动，观察页面变化印证自己的想法。

一、整体组件

二、app.py

代码如下：

from flask import Flask,render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def index():
   
    filename = './templates/data.csv' #注意CSV文件具体位置
    data = pd.read_csv(filename)
    dates = data['DATE'].values.tolist()  #从CSV文件提取到数据1和数据2
    value = data['TMAX'].values.tolist()  

    return render_template('index.html', xaxis=dates,value=value) #渲染HTML文件并传值

if __name__ == "__main__":
    app.run(host='127.0.0.1', debug=False)

二.index.html

代码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>刘凯凯的大屏幕</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <link rel="stylesheet" href="../static/css/comon0.css">
</head>
<script type="text/javascript" src="../static/js/loading.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/china.js"></script>


<body>

<!--这是一个动态的粒子效果图，设置了透明度为0.2-->
<div class="canvas" style="opacity: 0.9">
    <iframe frameborder="0" src="../static/js/index.html" style="width: 100%; height: 100%"></iframe>
</div>

<!--这是一个在正式页面加载进来之前显示的加载小动画，文字可以修改-->
<div class="loading">
    <div class="loadbox"><img src="../static/picture/loading.gif"> 我正在加载中...</div>
</div>

<div class="head">

    <h1>超级天气预测平台</h1>

    <div class="weather">
        <img src="../static/picture/weather.png"><span>我是天气</span>
        <span id="showTime"></span>
    </div>

<!--    尝试放到js里面-->
    <script type="text/javascript" src="../static/js/showtime.js"></script>

</div>

<div class="mainbox">
    <ul class="clearfix">

        <!--        第1栏 -->
        <li>
            <div class="boxall" style="height: 8.2rem;width: 19.6rem">
                <div class="allnav" id="echart1" style="width: 1300px;height:500px;" ></div>
                <div class="boxfoot"></div>
            </div>
    </ul>
</div>
<div class="back"></div>

#从这开始引入echarts图表，上面需要加echarts的js样式
#id命名在上面被调用
<div id="echart1" ></div>
<script type="text/javascript">
    var dom = document.getElementById('echart1');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];           #这里进行数据填入，但是要注意flask框架下引入格式为：{{dates|safe}}
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
  var now = new Date((base += oneDay));
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: 'Large Area Chart'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: date
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: 'rgb(255, 70, 131)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 158, 68)'
          },
          {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }
        ])
      },
      data: data
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>