实现一个简单的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[ ]列表，所以在这里进行了数据格式的规范化
实现一个简单的echarts柱状图PythonFlask的更多相关文章
- .Net Excel 导出图表Demo(柱状图，多标签页) .net工具类 分享一个简单的随机分红包的实现方式
.Net Excel 导出图表Demo(柱状图,多标签页) 1 使用插件名称Epplus,多个Sheet页数据应用,Demo为柱状图(Epplus支持多种图表) 2 Epplus 的安装和引用 新建一 ...
- Highcharts创建一个简单的柱状图
新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度 ...
- JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图
一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...
- echarts柱状图标签显示不完全的问题
echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- 超详细，新手都能看懂 ！使用SpringBoot+Dubbo 搭建一个简单的分布式服务
来自:JavaGuide Github 地址:https://github.com/Snailclimb/springboot-integration-examples 目录: 使用 SpringBo ...
- 使用 SpringBoot+Dubbo 搭建一个简单分布式服务
实战之前,先来看几个重要的概念 开始实战之前,我们先来简单的了解一下这样几个概念:Dubbo.RPC.分布式.由于本文的目的是带大家使用SpringBoot+Dubbo 搭建一个简单的分布式服务,所以 ...
- ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局 原来布局 option = { g ...
- 在VUE里实现一个简单的中国地图
如何在vue里面实现一个简单的中国地图,并且实现一些简单的个性化修改. 下面是最终实现的效果图.透明的地图加一个背景图. 1.在你的项目里安装echarts的依赖 npm install echart ...
随机推荐
- python利用random模块随机生成MAC地址和IP地址
import random def randomMac(): macstring = "0123456789abcdef"*12 macstringlist=random. ...
- win32-封装BeginPaint
Graphics* StartPaint(HWND win, HDC* hdc, PAINTSTRUCT* ps) { *hdc = BeginPaint(win, ps); return new G ...
- virtualapp安装应用流程源码分析
1. HomeActivity 为处理的入口 @Override protected void onActivityResult(int requestCode, int resultCode, In ...
- 学习go语言编程之数据类型
数据类型概述 Golang语言内置了如下基础数据类型: 布尔类型:bool 整型:int8,unit8,int16,uint16,int32,uint32,int64,uint64,int,uint, ...
- 07、Etcd 中Raft算法简介
本篇内容主要来源于自己学习的视频,如有侵权,请联系删除,谢谢. 思考: etcd是如何基于Raft来实现高可用.数据强-致性的? 1.什么是Raft算法 Raft 算法是现在分布式系统开发首选的共识算 ...
- 【Azure 应用服务】能否通过 Authentication 模块配置 Azure AD 保护 API 应用?
问题描述 在App Service Authentication 中配置 Azure AD 注册的应用信息后,根据官方文档,可以让前端应用实现用户 AAD 登录,然后通过前端应用获取的Token,来访 ...
- .NET周刊【3月第1期 2024-03-03】
国内文章 推荐10款C#开源好用的Windows软件 https://www.cnblogs.com/Can-daydayup/p/18035760 DevToys.Microsoft PowerTo ...
- 【自动化】使用PlayWright+代理IP实现多环境隔离
Playwright是由微软公司2020年初发布的新一代自动化测试工具,相较于目前最常用的Selenium,它仅用一个API即可自动执行Chromium.Firefox.WebKit等主流浏览器自动化 ...
- Java MVC 模式
MVC 模式 MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式.这种模式用于应用程序的分层开发. Model(模型) - 模型代表一个存取数据的对象或 JAVA ...
- Java面试挂在线程创建后续，不要再被八股文误导了！创建线程的方式只有1种
写在开头 在上篇博文中我们提到小伙伴去面试,面试官让说出8种线程创建的方式,而他只说出了4种,导致面试挂掉,在博文中也给出了10种线程创建的方式,但在文章的结尾我们提出:真正创建线程的方式只有1种,剩 ...