实现一个简单的echarts柱状图PythonFlask

bar.html

复制代码
 1 <!DOCTYPE html>
 2 <html style="height: 100%">
 3     <head>
 4         <meta charset="utf-8">
 5     </head>
 6     <body style="height: 100%; margin: 0">
 7         <div id="container" style="height: 100%"></div>
 8         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
 9         <script src="../static/js/jquery-3.3.1.min.js"></script>
10     </body>
11 </html>
12 <script>
13     $.ajax({
14             url:"/type_num",
15             async:true,
16             success:function (data) {
17                 option.xAxis[0].data=data.data[0]
18                 option.series[0].data=data.data[1]
19                 myChart.setOption(option);
20             },
21             error:function (xhr,type,errorThrown) {
22                 alert("出现错误！")
23             }
24         })
25 </script>
26 
27 <script type="text/javascript">
28     var dom = document.getElementById("container");
29     var myChart = echarts.init(dom);
30     var app = {};
31     var option;
32     option = {
33       tooltip: {
34         trigger: 'axis',
35         axisPointer: {
36           type: 'shadow'
37         }
38       },
39       grid: {
40         left: '3%',
41         right: '4%',
42         bottom: '3%',
43         containLabel: true
44       },
45       xAxis: [
46         {
47           type: 'category',
48           data: [],
49           axisTick: {
50             alignWithLabel: true
51           }
52         }
53       ],
54       yAxis: [
55         {
56           type: 'value'
57         }
58       ],
59       series: [
60         {
61           name: 'Direct',
62           type: 'bar',
63           barWidth: '60%',
64           data: []
65         }
66       ]
67     };
68 
69     if (option && typeof option === 'object') {
70         myChart.setOption(option);
71     }
72 </script>
复制代码

这里面有几个问题需要注意：

1、引入js

1     <body style="height: 100%; margin: 0">
2         <div id="container" style="height: 100%"></div>
3         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
4         <script src="../static/js/jquery-3.3.1.min.js"></script>
5     </body>

2、ajax的success方法接收返回的数据并给柱状图赋值

这里要注意一定要加上这一句话：

myChart.setOption(option);
1 success:function (data) {
2                 option.xAxis[0].data=data.data[0]
3                 option.series[0].data=data.data[1]
4                 myChart.setOption(option);
5             },

3、后台获取数据库数据

复制代码
 1 def get_bar():
 2     # 获取数据库连接
 3     conn, cursor = get_conn()
 4     if (conn != None):
 5         print("数据库连接成功！")
 6     typenumsql = "select * from news_num"
 7     detail_sql = ""
 8     res_title = query(typenumsql)  # 数据库原始标题表数据
 9     # print(res_title)
10     # [('财经', '8597'), ('房产', '200'), ('教育', '500'), ('科技', '830'), ('军事', '158'), ('汽车', '647'), ('体育', '1200'), ('游戏', '1300'), ('娱乐', '1200')]
11     type_num = []  # 存储类别+数量
12     for item1 in res_title:
13         type_num.append(item1)
14     print(type_num)
15     return type_num
复制代码

4、flask路由获取数据库数据并进行处理

复制代码
 1 #获取柱状图数据
 2 @app.route('/type_num')
 3 def type_num():
 4     res_list=sql.get_bar()
 5     my_list=[]
 6     list_0=[]
 7     list_1=[]
 8     for item in res_list:
 9         list_0.append(item[0])
10         list_1.append(item[1])
11     my_list.append(list_0)
12     my_list.append(list_1)
13     return {"data":my_list}
复制代码

这里要注意：

柱状图需要的数据是两个list[ ]列表，所以在这里进行了数据格式的规范化

posted @   靠谱杨  阅读(333)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具

喜欢请打赏

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示
AI IDE Trae