
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝可视化</title>
    <script src = '../static/js/echats.js'></script>
    <script src = '../static/js/jquery-3.6.0.js'></script>
    <link href="../static/css/tbcss.css" rel = 'stylesheet'>
 
</head>
<body>
<div id ='title'>信息可视化</div>
<div id = 'l_top'>123</div>
<div id = 'l_bottom'>123</div>
<div id = 'c_top'>123</div>
<div id = 'c_bottom'>123</div>
<div id = 'r_top'>123</div>
<div id = 'r_bottom'>123</div>
<script src = '../static/js/tbajax.js'></script>
<script src = '../static/js/tbecharts.js'></script>
</body>
</html>

3.css文件


*{
    margin: 0;
    padding: 0;
}
#title{
    position: absolute;
    height: 16%;
    width: 100%;
    color: white;
    font-size: 30px;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
 
}
#l_top{
    position: absolute;
    width: 30%;
    height: 42%;
    top: 16%;
    background-color: cornflowerblue;
}
#l_bottom{
    position: absolute;
    width: 30%;
    height: 42%;
    top: 58%;
    background-color: bisque;
 
}
#c_top{
    position: absolute;
    width: 40%;
    height: 42%;
    top: 16%;
    left: 30%;
    background-color: chartreuse;
}
#c_bottom{
    position: absolute;
    width: 40%;
    height: 42%;
    top: 58%;
    left: 30%;
    background-color: yellow;
 
}
#r_top{
    position: absolute;
    width: 40%;
    height: 42%;
    top: 16%;
    left: 70%;
    background-color: beige;
}
#r_bottom{
    position: absolute;
    width: 40%;
    height: 42%;
    top: 58%;
    left: 70%;
    background-color: aqua;
 
}

4.连接数据库并处理数据


import pymysql
def connect():
    conn = pymysql.Connect(host='127.0.0.1',port=3306,user='root',password='tz15035895786',db='tb',charset='utf8')
    cursor = conn.cursor()
    return cursor,conn
def closecn(cursor,conn):
    cursor.close
    conn.close
def query(sql):
    cursor,conn = connect()
    cursor.execute(sql)
    res = cursor.fetchall()
    closecn(cursor,conn)
    return res
def get_data1():
    sql ='select province,count(province) from tb group by province order by count(province) desc limit 10;'
    result = query(sql)
    city = []
    citycount = []
 
    for i in result:
        city.append(i[0])
        citycount.append(i[1])
    print(city)
    print(citycount)
    return city,citycount
get_data1()

5.使用python.py文件，让app跑起来


from flask import Flask
from flask import render_template
from flask import jsonify
import util
app = Flask(__name__)
 
 
@app.route('/')
def index():  # put application's code here
    return render_template('index.html')
@app.route('/data1')
def get_data():
    city,citycount = util.get_data1()
    return jsonify({'city':city,'citycount':citycount})
@app.route('/data2')
def get_data2():
    gendercount = util.get_data2()
    return jsonify({'gendercount':gendercount})
@app.route('/data3')
def get_data3():
    item_id,item_idcount = util.get_data3()
    return jsonify({item_id:'item_id',item_idcount:'item_idcount'})
if __name__ == '__main__':
    app.run()

6.使用echarts绘图


var a = echarts.init(document.getElementById('l_top'),'dark')
var b = {
    title:{
        text:'中国城市各分布数量',
        left:'center'
    },
    xAxis:{
        type:'category',
        data:[]
    } ,
    yAxis: {
        type: 'value'
    },
    series:[
        {
            type:'line',
            data: []
        }
    ]
}
a.setOption(b)

7.使用ajax连接前后端并显示


function get_data(){
    $.ajax({
        'url':'/data1',
        'success':function (data1){
            b.xAxis.data = data1.city
            b.series[0].data = data1.citycount
            a.setOption(b)
        }
    })
}

8.echarts图表

1.折线图


option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

2.柱形图


option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

3.饼图


option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

4.雷达图


option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】