前言

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

提示：定制小程序开发费用以下是本篇文章正文内容，下面案例可供参考

一、引入

直接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，以下内容建议按模板来，这里我选了一个自定义饼图的图。


<!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>

定制小程序开发费用【爬虫入门】利用flask框架和echarts实现数据可视化

前言