Python数据可视化 - 使用flask+echarts+html+Ajax实现数据分析可视化看板(附代码下载)_使用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

GitHub：https://github.com/maiyida/flask_dashboard_demo

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