【Python+Flask+Echarts】可视化练习题 ---- 招聘数据折线图_echarts和pyecharts测试题

作者：weixin_40725706 | 2024-08-02 12:07:51

踩

echarts和pyecharts测试题

文章目录

需求
代码实现

需求

使用折线图展示“大数据”相关职位招聘数量差异

提取相关信息 ---- “大数据”
分组聚合

代码实现

Python、Flask

import pandas  as pd
from flask import Flask,render_template

# 读取数据集
data = pd.read_csv("G:\Projects\pycharmeProject-C\Flask\dataset\zl0507.csv")

# 检查空值
print(data.isnull().sum())
# 去重
print(data.shape)
print(data.loc[data.duplicated()])
data.drop_duplicates(inplace=True)
print(data.shape)

# 提取筛选大数据信息
dashuju = data['jobName'].str.contains("大数据")
print(len(dashuju))
data_sel = data.loc[dashuju,['jobName','detail']]
print(data_sel.shape[0])
#  分组聚合
result = data_sel.groupby('jobName').agg(count=('jobName','count')).sort_values('count',ascending=False).reset_index()
# 合并数据
list = result.values.tolist()
# 可视化
app = Flask(__name__)
@app.route("/")
def index():
    sheets_list = list
    return render_template("zl0507_02.html",sheets = sheets_list)
if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

返回顶部

HTML

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height:100%">
<div id="container" style="height:100%"></div>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myecharts = echarts.init(dom);
    var data = [{% for item in sheets %}'{{item.0}}',{%endfor%}];
    var data1 = [{% for item in sheets%}{{item.1}},{%endfor%}]
    var option = null;
    option = {
        title:{
           text:'大数据职业招聘数量差异'
        },
        grid:{
           top:'5%',
           bottom:'10%',
           left:'4%',
           right:'4%',
           containLabel:true
        },
        legend:{
           show:true
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
             type:'shadow'
          }
        },
        xAxis:{
           type:'category',
           data:data,
           boundaryGap:true,
           axisTick:{
              alignWithLabel:true
           },
           axisLabel: {
               interval:0,
               rotate:90
           }
        },
        yAxis:{
           type:'value'
        },
        series:[
          {
             name:'大数据职位',
             type:'line',
             data:data1
          }
        ]
    };
    if(option && typeof option=='object'){
       myecharts.setOption(option);
    }
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

返回顶部

效果展示
在这里插入图片描述

返回顶部

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/918531