当前位置:   article > 正文

Python数据可视化 - 使用flask+echarts+html+Ajax实现数据分析可视化看板(附代码下载)_使用flask+echarts+ajax进行数据可视化绘图,对招聘数据不同学历的it热门职业平均

使用flask+echarts+ajax进行数据可视化绘图,对招聘数据不同学历的it热门职业平均

1. 介绍

目的:实现动态数据分析可视化看板

方法:使用HTML搭建网页,echarts实现可视化图表,使用Python的flask从后端传输数据通过Ajax实现动态更新

框架
在这里插入图片描述

效果图

请添加图片描述

2. 代码

所有代码较长站篇幅,这里仅放部分js与flask的代码

2.1 js

新老客户雷达图js代码

function echarts_l2() {
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart_l2'));

        $.ajax({
                url:'/l2',
                success:function (data) {
 
			      var option = {
			
						tooltip: {
							trigger: 'axis'
						},
						color: ['#03b48e', '#3893e5'],
						legend: {
						  right: '5%',
						  top: '40%',
						  orient: 'vertical',
						  textStyle: {
							  fontSize: 12,
							  color: 'rgba(255,255,255,0.7)',
						  },
						},

						radar: [{
							indicator: [{
								text: '销售额',
								max: 150000
							}, {
								text: '数量',
								max: 3000
							}, {
								text: '客单价',
								max: 100
							}, {
								text: '人均订单量',
								max: 3
							}, {
								text: '人均利润',
								max: 15
							}],

							center: ['50%', '50%'],
							radius: '70%',
							startAngle: 90,
							splitNumber: 4,
							shape: 'circle',
						
							name: {
								padding:-5,
								formatter: '{value}',
								textStyle: {
									fontSize:10,
									color: 'rgba(255,255,255,.7)'
								}
							},
							splitArea: {
								areaStyle: {
									color: 'rgba(255,255,255,.05)'
								}
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.05)'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.05)'
								}
							}
						}, ],
						series: [{
							name: '雷达图',
							type: 'radar',
							tooltip: {
								trigger: 'item'
							},
							data: [{
								name: '新客户',
								value: data['new_customer'],
								lineStyle: {
									normal: { 
										color:'#03b48e',
										width:2,
									}
								},
								areaStyle: {
									normal: {
										color: '#03b48e',
										opacity:.4
									}
								},
								symbolSize: 0,
							  
							}, {
								name: '老客户',
								value: data['old_customer'],
								symbolSize: 0,
								lineStyle: {
									normal: { 
										color:'#3893e5',
										width:2,
									}
								},
									 areaStyle: {
									normal: {
										color: 'rgba(19, 173, 255, 0.5)'
									}
								}
							}]
						}, ]
					};
		 


		         myChart.setOption(option);
		 
				window.addEventListener("resize",function(){
					myChart.resize();
				});


                }
            })




		}
  • 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
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130

2.2 flask

from flask import Flask, render_template, jsonify
import random
import pandas as pd

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/l1')
def get_l1_data():
    order = random.randint(1500, 3000)
    profit = random.randint(100000, 300000)
    customer = random.randint(1000, order)
    ATV = random.randint(80, 120)
    return jsonify({"order": order, "profit": profit, "customer": customer, "ATV": ATV})


@app.route('/l2')
def get_l2_data():
    old_customer = [120030, 2020, 51, 2.2, 10.6]
    new_customer = [29023, 576, 48, 1.3, 8.9]
    return jsonify({"new_customer": new_customer, "old_customer": old_customer})


@app.route('/l3')
def get_l3_data():
    index = ['20.12', '21.1', '21.2', '21.3', '21.4', '21.5', '21.6', '21.7', '21.8', '21.9', '21.10', '21.11']
    old_customer = [random.randint(1500, 3000) for i in range(12)]
    new_customer = [random.randint(200, 800) for i in range(12)]
    return jsonify({"index": index, "new_customer": new_customer, "old_customer": old_customer})


@app.route('/c1')
def get_c1_data():
    target = 3000000
    sales = random.randint(1500000, 3000000)
    achieving_rate = str(int(round(sales / target * 100, 0))) + '%'
    year_target = 40000000
    year_sales = random.randint(30000000, 36000000)
    year_achieving_rate = str(int(round(year_sales / year_target * 100, 0))) + '%'
    return jsonify({"sales": sales, "target": target, "achieving_rate": achieving_rate,
                    "year_sales": year_sales, "year_target": year_target, "year_achieving_rate": year_achieving_rate})


@app.route('/map')
def get_map_data():
    city_list = ['海门', '鄂尔多斯', '招远', '舟山', '齐齐哈尔', '盐城', '赤峰', '青岛', '乳山', '金昌', '泉州', '莱西', '日照',
                 '胶南', '南通', '拉萨', '云浮', '梅州', '文登', '上海', '攀枝花', '威海', '承德', '厦门', '汕尾', '潮州', '丹东',
                 '太仓', '曲靖', '烟台', '福州', '瓦房店', '即墨', '抚顺', '玉溪', '张家口', '阳泉', '莱州', '湖州', '汕头', '昆山',
                 '宁波', '湛江', '揭阳', '荣成', '连云港', '葫芦岛', '常熟', '东莞', '河源', '淮安', '泰州', '南宁', '营口', '惠州',
                 '江阴', '蓬莱', '韶关', '嘉峪关', '广州', '延安', '太原', '清远', '中山', '昆明', '寿光', '盘锦', '长治', '深圳',
                 '珠海', '宿迁', '咸阳', '铜川', '平度', '佛山', '海口', '江门', '章丘', '肇庆', '大连', '临汾', '吴江', '石嘴山',
                 '沈阳', '苏州', '茂名', '嘉兴', '长春', '胶州', '银川', '张家港', '三门峡', '锦州', '南昌', '柳州', '三亚', '自贡',
                 '吉林', '阳江', '泸州', '西宁', '宜宾', '呼和浩特', '成都', '大同', '镇江', '桂林', '张家界', '宜兴', '北海',
                 '西安', '金坛', '东营', '牡丹江', '遵义', '绍兴', '扬州', '常州', '潍坊', '重庆', '台州', '南京', '滨州', '贵阳',
                 '无锡', '本溪', '克拉玛依', '渭南', '马鞍山', '宝鸡', '焦作', '句容', '北京', '徐州', '衡水', '包头', '绵阳',
                 '乌鲁木齐', '枣庄', '杭州', '淄博', '鞍山', '溧阳', '库尔勒', '安阳', '开封', '济南', '德阳', '温州', '九江',
                 '邯郸', '临安', '兰州', '沧州', '临沂', '南充', '天津', '富阳', '泰安', '诸暨', '郑州', '哈尔滨', '聊城', '芜湖',
                 '唐山', '平顶山', '邢台', '德州', '济宁', '荆州', '宜昌', '义乌', '丽水', '洛阳', '秦皇岛', '株洲', '石家庄',
                 '莱芜', '常德', '保定', '湘潭', '金华', '岳阳', '长沙', '衢州', '廊坊', '菏泽', '合肥', '武汉', '大庆']

    data = [{'name': i, 'value': random.randint(10, 100)} for i in city_list]
    return jsonify({"data": data})


@app.route('/r1')
def get_r1_data():
    index = ['20.12', '21.1', '21.2', '21.3', '21.4', '21.5', '21.6', '21.7', '21.8', '21.9', '21.10', '21.11']
    sales = [random.randint(2000000, 3000000) for i in range(12)]
    profit = [random.randint(400000, 800000) for i in range(12)]
    profit_rate = [round(i/j, 2) for i, j in zip(profit, sales)]
    return jsonify({"index": index, "sales": sales, "profit": profit, "profit_rate": profit_rate})


def get_product():
    product = [chr(i) for i in range(97, 123)]
    sales = [random.randint(10, 300) for i in range(len(product)-2)]
    profit = [random.randint(-2000, 10000) for i in range(len(product) - 2)]
    product_type = ['AA', 'BB', 'CC']*int((len(product)-2)/3)
    product_df = pd.DataFrame([product[:-2], product_type, sales, profit],
                              index=['product', 'product_type', 'sales', 'profit']).T
    return product_df


@app.route('/r21')
def get_r21_data():
    product_df = get_product().sort_values('sales', ascending=False).head(10)
    return jsonify({"product": product_df['product'].tolist(), "sales": product_df['sales'].tolist()[::-1]})


@app.route('/r22')
def get_r22_data():
    product_df = get_product()
    sales_avg = product_df.sales.mean()
    profit_avg = product_df.profit.mean()
    product_type_value_list = []
    product_type_list = []
    for i in product_df.product_type.unique():
        product_type_value_list.append(product_df.query("product_type == @i")[['sales', 'profit']].values.tolist())
        product_type_list.append(i)
    return jsonify({"data": product_type_value_list, "type": product_type_list,
                       "sales_avg": sales_avg, "profit_avg": profit_avg})


@app.route('/r3')
def get_r3_data():
    sales = [random.randint(400000, 800000) for i in range(3)]
    num = [random.randint(1000, 3000) for i in range(3)]
    profit = [random.randint(80000, 160000) for i in range(3)]
    df = pd.DataFrame([sales, num, profit], index=['sales', 'num', 'profit'], columns=['消费者', '公司', '小微企业']).T
    df['sales'] = round(df['sales'] / df['sales'].sum(), 3)
    df['num'] = round(df['num'] / df['num'].sum(), 3)
    df['profit'] = round(df['profit'] / df['profit'].sum(), 3)
    return jsonify({"data": df.values.tolist(),})


if __name__ == '__main__':
    app.run()

  • 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
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124

随机生成数据

3. 下载地址

网盘

	https://pan.baidu.com/s/1vt9UE-rgNT3ltCNxLUWbPQ 
	提取码:su7k
  • 1
  • 2

GitHubhttps://github.com/maiyida/flask_dashboard_demo

码字不易,若对您有所帮助,望能关注收藏点赞,谢谢!

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

闽ICP备14008679号