目录
前言
一、引入flask
二、使用步骤
1.生成本地app
2.返回html
3.使用flask和echarts
4.传输数据和接受数据
5.调整参数
三、看成果
前言
利用flask框架并利用echarts可以对所得到的数据进行可视化分析(变成各种图：饼图、折线图等)
提示：以下是本篇文章正文内容，下面案例可供参考
一、引入flask
直接pip install flask就可以下载flask框架。
import flask就可以实现对flask框架的引入。
二、使用步骤
1.生成本地app
代码如下（示例）：
from flask import Flaskapp = Flask(__name__)@app.route('/')def index():return 1if __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，以下内容建议按模板来，这里我选了一个自定义饼图的图。
/examples/zh/editor.html?c=pie-custom
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="/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 pddata = 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 Chromefrom mon.keys import Keysfrom mon.by import Byfrom selenium.webdriver.chrome.options import Optionsimport timeimport csvfrom flask import Flask,render_templateimport pandas as pdapp = Flask(__name__)@app.route('/')def index():pricedomain1 = 0pricedomain2 = 0pricedomain3 = 0pricedomain4 = 0pricedomain5 = 0t = 1with open('book2.csv', mode='r',encoding='utf-8')as f:for line in f:if t == 1:t += 1continuebook_a_price = line.split('￥')[-1].strip()if book_a_price == '' or book_a_price == '"拍拍':continuebook_a_price = float(book_a_price)if book_a_price < 30:pricedomain1 += 1elif book_a_price < 60:pricedomain2 += 1elif book_a_price < 90:pricedomain3 += 1elif book_a_price < 120:pricedomain4 += 1elif book_a_price > 120:pricedomain5 += 1f = 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 = 1web.get('/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 += 1if page_id > 5:breakweb.find_element(By.XPATH, '//*[@id="J_bottomPage"]/span[1]/a[9]').click()f.close()if __name__ == '__main__':url = '/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="/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>
如果觉得《【爬虫入门】利用flask框架和echarts实现数据可视化》对你有帮助，请点赞、收藏，并留下你的观点哦！
