flask + echarts + csv 应用实例

spectree

已于 2022-10-25 10:30:24 修改

阅读量766

点赞数 1

文章标签： echarts flask python

于 2022-10-25 10:29:48 首次发布

本文链接：https://blog.csdn.net/weixin_43773962/article/details/127508504

版权

flask + echarts + csv 应用实例

app.py 源码

from flask import Flask, render_template
import pandas as pd
app = Flask(__name__)

@app.route("/")
def index():
    filename1 = 'test1.csv'
    filename2 = 'test2.csv'
    filename3 = 'test3.csv'
    filename4 = 'test4.csv'
    # 要读取的csv文件
    data1 = pd.read_csv(filename1)
    data2 = pd.read_csv(filename2)
    data3 = pd.read_csv(filename3)
    data4 = pd.read_csv(filename4)
    # 处理csv文件的数据
    date = data1['Date'].values.tolist()   # 展示数量1
    confirmedcases1 = data1['ConfirmedCases'].values.tolist()
    confirmedcases2 = data2['ConfirmedCases'].values.tolist()
    confirmedcases3 = data3['ConfirmedCases'].values.tolist()
    confirmedcases4 = data4['ConfirmedCases'].values.tolist()

    return render_template('index.html',date = date,confirmedcases1=confirmedcases1,confirmedcases2=confirmedcases2,confirmedcases3=confirmedcases3,confirmedcases4=confirmedcases4)



if __name__ == '__main__':
    app.run(debug=True, host='127.0.0.1', port='5000')

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/css/style.css" rel="stylesheet">

</head>
<body>
    <h1>hello</h1>
    <div id="item1">

    </div>

    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script type="text/javascript">
    var dom = document.getElementById('item1');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Brazil', 'Germany', 'Italy', 'United States']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: {{date}}
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Brazil',
          type: 'line',
          stack: 'Total',
          data: {{confirmedcases1}}
        },
        {
          name: 'Germany',
          type: 'line',
          stack: 'Total',
          data: {{confirmedcases2}}
        },
        {
          name: 'Italy',
          type: 'line',
          stack: 'Total',
          data: {{confirmedcases3}}
        },
        {
          name: 'United States',
          type: 'line',
          stack: 'Total',
          data: {{confirmedcases4}}
        }
      ]
    };

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

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

csv 数据集（部分）

CountryName,Date,ConfirmedCases,ConfirmedDeaths
Germany,20200101,0,0
Germany,20200102,0,0
Germany,20200103,0,0
Germany,20200104,0,0
Germany,20200105,0,0
Germany,20200106,0,0
Germany,20200107,0,0
Germany,20200108,0,0
Germany,20200109,0,0
Germany,20200110,0,0
Germany,20200111,0,0
Germany,20200112,0,0
Germany,20200113,0,0
Germany,20200114,0,0
Germany,20200115,0,0
Germany,20200116,0,0
Germany,20200117,0,0