【爬虫入门】利用flask框架和echarts实现数据可视化

关注

原创 2022-02-27 09:56:50 8.6k 阅读 AI 写同款· GEO 优化 ›

用flask+echarts打造一个数据可视化大屏幕文章目录1. big_screen项目说明2. big_screen项目文件布局3. 四大模块核心代码分析3.1 数据准备模块3.2 flask网页服务模块3.3 网页视图模块a. 网页大标题b. 左右两栏的图表c. 中间一栏的图表d. 图表echarts属性设置3.4 static静态元素分析a. 显示时间的函数b. 页面淡入和视图自适应的函数4. 总结 1. big_screen项目说明源自github上逛到的一个项目，用flask和echarts实现了一个大屏幕显示，运行app.py后，在网页上输入阅读详情

前言

利用flask框架并利用echarts可以对所得到的数据进行可视化分析(变成各种图：饼图、折线图等)

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入flask

直接pip install flask就可以下载flask框架。

import flask就可以实现对flask框架的引入。

二、使用步骤

1.生成本地app

代码如下（示例）：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 1

if __name__ == '__main__':
    app.run(debug=True)

点击生成的链接就可以进入到本地的app，此时返回1。

然后我们在route中输入不同的字符，就可以接受不同的参数，以此来访问不同的本地地址。比如，我这里不是"/"而是“/login”，那么我们在网页中的后缀中再追加输入login才可以接受返回值1。而在本来的页面中什么也没有。

app.run()里面的debug默认为False，当设置为True时，我们对代码改动，那么只需要刷新浏览器页面就可以了，而如果是默认值，那么就是需要重启main函数。

2.返回html

需要额外引入库

from flask import Flask,render_template

首先需要在本项目下，也就是和main函数同文件夹下，创造一个名为：templates的文件夹，然后在其中放入或者创建自己需要的html文件。

return render_template('echarts.html')

这就会把html内容的返回出来。

3.使用flask和echarts

首先打开echarts，选择示例的一个好看的例子，符合此次的分析的图。

在准备好的echarts.html的文件里创造一个画图区域，再去bootcdn中找echarts的script，以下内容建议按模板来，这里我选了一个自定义饼图的图。

https://echarts.apache.org/examples/zh/editor.html?c=pie-custom

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
       option = {
  backgroundColor: '#2c343c',
  title: {
    text: 'Customized Pie',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 274, name: 'Union Ads' },
        { value: 235, name: 'Video Ads' },
        { value: 400, name: 'Search Engine' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};
        myChart.setOption(option);
    </script>
</body>
</html>

4.传输数据和接受数据

现在我有一个csv的文件，里面有数据内容，现在我要传到html中，怎么办呢？

import pandas as pd

data = pd.read_csv('data.csv')

首先我们先获取csv的内容，同时确定一定要有表头，即：

确保有name和value，即在设计这个文件时就要加上，因为其中接受的参数名就叫‘name’和‘value’。

如果不是，那么就更改：用rename函数。

data = data.rename(columns={"原来的name":name,"原来的value":value})

然后呢我们需要把这个值传给html让它接收，最后展示。我们知道，这个data接收的是dic类型的数据，那么我们先转换为dic再给，这时候，data为list类型的数据，里面是dic类型。

这时候只需要传入参数并在html中接收就行了。

return render_template('echarts.html',data=data)

双{}接收数据，并把它转为json类型，以适应浏览器来显示。

5.调整参数

min和max根据实际情况来调整。

亮度默认为0到1，建议为0.5到1。

三、看成果

这是爬取了某东的爬虫书籍的数据展示。最后，给大家奉献出我的全部代码。

main函数：

from selenium.webdriver import Chrome
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options
import time
import csv
from flask import Flask,render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def index():
    pricedomain1 = 0
    pricedomain2 = 0
    pricedomain3 = 0
    pricedomain4 = 0
    pricedomain5 = 0
    t = 1

    with open('book2.csv', mode='r',encoding='utf-8')as f:
        for line in f:
            if t == 1:
                t += 1
                continue

            book_a_price = line.split('￥')[-1].strip()
            if book_a_price == '' or book_a_price == '"拍拍':
                continue
            book_a_price = float(book_a_price)
            if book_a_price < 30:
                pricedomain1 += 1
            elif book_a_price < 60:
                pricedomain2 += 1
            elif book_a_price < 90:
                pricedomain3 += 1
            elif book_a_price < 120:
                pricedomain4 += 1
            elif book_a_price > 120:
                pricedomain5 += 1
    f = open('data.csv', mode='w',encoding='utf-8')
    w = csv.writer(f)
    w.writerow({'name': 'name', 'value': 'value'})
    w.writerow({'0~30':'name', f'{pricedomain1}':'value'})
    w.writerow({'30~60': 'name', f'{pricedomain2}': 'value'})
    w.writerow({'60~90': 'name', f'{pricedomain3}': 'value'})
    w.writerow({'90~120': 'name', f'{pricedomain4}': 'value'})
    w.writerow({'120+~': 'name', f'{pricedomain5}': 'value'})
    f.close()
    data = pd.read_csv('data.csv')
    print(data)
    data = data.to_dict(orient='records')
    return render_template('echarts.html',data=data)

def scrap_data(url, csvname):
    f = open(f'{csvname}.csv', mode='w', encoding='utf-8')
    w = csv.writer(f)
    option = Options()
    option.add_argument('--disable-blinkfeatures=AutomationControlled')
    web = Chrome(options=option)
    page_id = 1

    web.get('https://search.jd.com/Search?keyword=python%E7%88%AC%E8%99%AB&pvid=decc839754e0409cbfdcf18b79991ab3&page=')
    while True:
        time.sleep(2)
        name = web.find_elements(By.XPATH, '//*[@id="J_goodsList"]/ul/li/div/div[3]/a/em')
        price = (web.find_elements(By.XPATH, '//*[@id="J_goodsList"]/ul/li/div/div[2]'))
        for named, priced in zip(name, price):
            w.writerow({named.text: 'named', priced.text: 'priced'})
        time.sleep(2)
        page_id += 1
        if page_id > 5:
            break
        web.find_element(By.XPATH, '//*[@id="J_bottomPage"]/span[1]/a[9]').click()
    f.close()

if __name__ == '__main__':
    url = 'https://search.jd.com/Search?keyword=python%E7%88%AC%E8%99%AB&pvid=decc839754e0409cbfdcf18b79991ab3&page='
    csvname = 'book2'
    scrap_data(url, csvname)
    app.run()

echarts.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
  backgroundColor: '#2c343c',
  title: {
    text: '爬虫书籍价格',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 0,
    max: 200,
    inRange: {
      colorLightness: [0.5, 1]
    }
  },
  series: [
    {
      name: '价格',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: {{data|tojson}}.sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};
        myChart.setOption(option);
    </script>
</body>
</html>