招聘大数据可视化

第1关:招聘大数据可视化------使用条形图展示企业招聘员

models.py

复制代码
from app import db
class zhaopin(db.Model):
    # ************ Begin *************#
    __tablename__ = "companynum"
    sumnum = db.Column(db.String(255), primary_key=True)  ##招聘人数 主键
    company = db.Column(db.String(255))  ##企业名称
    # ************** End *************#

views.py

复制代码
from flask import render_template
from app.views import index
from app import db
from app.model.models import zhaopin
@index.route("/nums")
def index1():
    # ************ Begin ***********#
    selectdata = db.session.query(zhaopin.company).all()
    selectdata1 = db.session.query(zhaopin.sumnum).all()
    list1=[]
    list2=[]
    for i in selectdata:
        data={
            'company':i.company
        }
        list1.append(data)
    for j in selectdata1:
        list2.append(j[0])
    #*********** End ************#
    return render_template("test03.html",company=list1,sumnum=list2)

test03.html

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>企业招聘员工数据可视化</title>
        <script type="text/javascript" src="../static/js/echarts-all-3.js" ></script>
    </head>
    <body>
        <!--准备一个DOM容器-->
        <div id="main" style="width: 1200px;height: 600px;"></div>
        <script>
        var echarts1=echarts.init(document.getElementById("main"))
        //#********** Begin **********#
        var companys=[]
        {% for a in company %}
            companys.push('{{ a.company }}');
        {% endfor %}
        var sumnum={{sumnum|tojson}};
    option = {
  title: {
    text: '企业招聘员工数据展示图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
      left:'right',
      data:['招聘人数']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: companys
  },
  series: [
    {
      name: '招聘人数',
      type: 'bar',
      data: sumnum,
      itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = ['#CE0000','#FF0080', '#E800E8', '#0000C6', '#00FFFF','#02F78E', '#548C00','#AE8F00','#FF8000','#AD5A5A'];
                    return colorList[params.dataIndex]
                },
                label: {
                    show: true,  //开启显示
                    position: 'right',  //在上方显示
                    textStyle: {  //数值样式
                        color: 'black',
                        fontSize: 16
                    }
                }
            }
        }
    }
  ]
};
        //#*********** End ************#
            echarts1.setOption(option)
        </script>
    </body>
</html>
相关推荐
赵大仁7 小时前
极空间 NAS 没有命令行,我逆向了它的桌面客户端
python·ai编程·nas·mcp·极空间
空白8 小时前
Power BI +VBA 【数据分析】
python
科技苑14 小时前
Python简单网络爬虫教程
爬虫·python
外域速览14 小时前
智谱50亿美元押注AI自训练
大数据·人工智能
人工智能培训14 小时前
孪生不止在工厂:能源、医疗与农业
大数据·人工智能
QYRdata15 小时前
隐私合规技术迎来拐点:数据主体请求自动化年复合增长率14.0%(2026-2032)
大数据·服务发现
Patrick在香港16 小时前
Claude Prompt 香港场景:公文里「今日」落在 6 个日历日上,「翌日」锚错了 5 天
python·自然语言处理·正则表达式·claude·数据清洗
YsyaaabB17 小时前
Python 数值分析
python
阿洛学长17 小时前
计算机二级 Python 基本操作题(15 分)真题笔记(0101 ~ 1903 全套)
python·pycharm
Elastic 中国社区官方博客17 小时前
列式存储并不等同于列式数据库。Columnar 模式为 Elasticsearch 带来了什么
大数据·运维·数据库·elasticsearch·搜索引擎