实现一个简单的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 ...
随机推荐
- Java压缩和解压缩zip文件
介绍 Java提供的java.util.zip包只支持zip和gzip.至于更多格式的压缩可以选择apache的Commons Compress. 参考:https://o7planning.org/ ...
- 从零开始写 Docker(一)---实现 mydocker run 命令
本文为从零开始写 Docker 系列第一篇,主要实现 mydocker run 命令,构造了一个具有基本的 Namespace 隔离的简单容器. 如果你对云原生技术充满好奇,想要深入了解更多相关的文章 ...
- Docker实践之06-访问仓库
目录 什么是仓库 一.Docker Hub 注册 登录 拉取镜像 推送镜像 自动创建 二.私有仓库 Docker Registry 安装Docker Registry 在私有仓库上传/搜索/下载镜像 ...
- 时序数据库timescaleDB安装
一:前言相关 环境:Red Hat 8.3.1-5安装程序:PostgreSQL 14.1,TimescaleDB 2.5.1,cmake3.22.1PostgreSQL编译安装需要cmake3.4以 ...
- easyexcel: The maximum length of cell contents (text) is 32,767 characters
easyexcel The maximum length of cell contents (text) is 32,767 characters 使用easyexcel向excel中写内容出现了单元 ...
- MySQL单表能存储多少条数据？
MySQL是中小型网站普遍使用的数据库之一,然而,很多人并不清楚MySQL到底能支持多大的数据量,甚至对它产生误解.MySQL单表的上限,主要与操作系统支持的最大文件大小有关.事实上MySQL能承受的 ...
- __set_name__魔法方法
介绍 __set_name__ 方法是 Python 3.6 中引入的一种特殊方法,它可以在类属性被赋值时自动调用.这个方法可以用来处理类属性的名称绑定问题,例如将类属性与其所在的类进行绑定. 具体来 ...
- os.path.relpath和os.path.basename，返回文件路径中的文件名
from os import path print(path.relpath("/home/hpcadmin/lw/demo.py", start="/home/hpca ...
- 手动下载sdk及avd
有时候下载sdk的时候报各种错误导致无法下载,如图 那么可以离线下载,到浏览器或IDM中下载图中提示的url链接,将第一个下载的包即sources的解压后放到SDK目录下的sources目录,并重命名 ...
- Html飞机大战(十二): canvas写字（结束状态的编辑）
好家伙,基本的功能都做完了,来补充一个结束状态的游戏结束文案 上代码: case END: //给我的画笔设置一个字的样式 //后面写出来的字都是这个样式的 context.font = &quo ...