招聘大数据可视化

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

复制代码

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>