拉钩数据echarts可视化

数据格式

后端代码

import pymysql
from flask import Flask, render_template
import json

app = Flask(__name__)
app.jinja_env.filters['zip'] = zip


def handel(sql):
    conn = pymysql.connect(
        host='localhost',
        port=3306,
        user='root',
        password='123456',
        database='lagoudb',
        charset='utf8'
    )
    cur = conn.cursor()
    cur.execute(sql)
    result = cur.fetchall()
    return result
@app.route('/')
def salary_average():
    sql_city = "SELECT city FROM citys order by id"
    rs_city = handel(sql_city)
    citys = []
    for i in rs_city:
        citys.append(i[0])
    sql_kind = "SELECT kd FROM kds order by id"
    rs_kind = handel(sql_kind)
    kinds = []
    for j in rs_kind:
        kinds.append(j[0])
    sql_salary = "select city as `area`,kd as `station`,ifnull(round(avg((convert(left(salary,instr(salary,'k')-1),signed)+convert(replace(substr(salary,instr(salary,'-')+1),'k',''),signed))/2)),0) as `counts` from (select citys.id as c_id,kds.id as k_id,city,kd from citys  join kds  order by citys.id,kds.id) a left join jobinfos b on a.c_id=b.city_id and a.k_id=b.kd_id group by a.c_id,a.k_id"
    rs_salary = handel(sql_salary)
    rs_max = handel(sql_max)
    salarys = []
    shanghai = []
    suzhou = []
    wuxi = []
    nanjing = []
    for s in rs_salary:
        if s[0] == '上海':
            shanghai.append(int(s[2] * 1000))
        elif s[0] == '苏州':
            suzhou.append(int(s[2] * 1000))
        elif s[0] == '南京':
            nanjing.append(int(s[2] * 1000))
        else:
            wuxi.append(int(s[2] * 1000))
    salarys.append(shanghai)
    salarys.append(suzhou)
    salarys.append(wuxi)
    salarys.append(nanjing)
    return render_template('new_lagou.html', salarys=salarys, kinds=kinds, citys=citys)


if __name__ == "__main__":
    app.run(debug=True)

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lagou</title>
    <script src="https://lib.baomitu.com/echarts/4.0.4/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height:600px;"></div>
    <script type="text/javascript">
        var lagou_chart = echarts.init(document.getElementById('main'),'black');
        lagou_chart.setOption(
             {
    title: {
        text: '沪宁苏锡四市平均收入'
    },
    tooltip: {},
    legend: {
        data: [{% for p in citys %}'{{ p }}', {% endfor %}]
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#161627',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [

            {% for p in kinds%}{
                     value: 100000,
                     name: '{{ p }}',
                     },{% endfor %}
        ]
    },
    series: [{
        name: '沪宁苏锡',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [

            {% for v,p in salarys|zip(citys)%}{
                     value: {{ v }},
                     name: '{{ p }}',
                     },{% endfor %}


        ]
    }]
}
        )
    </script>
</body>
</html>