实现一个简单的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 ...
随机推荐
- Spring Boot图书管理系统项目实战-1.系统功能和架构介绍
导航: next:2.项目搭建 1.项目源码 需要源码的朋友,请捐赠任意金额后留下邮箱发送:) 2.项目背景 自己闲着没事写的,供初学spring boot和在校大学生毕业设计学习交流.大神请忽略:) ...
- Java集合框架学习（八） HashMap详解
HashMap介绍 HashMap是一个基于Map的集合类,用于存储Key和Value的键值对. 通常用HashMap<Key, Value> or HashMap<K, V> ...
- Google C++ 风格指南记录
最近在看谷歌的 C++ 风格指南发现了一些有意思的知识点,遂记录下 1. 第六章第二小节介绍了右值引用 只在定义移动构造函数与移动赋值操作时使用右值引用. 不要使用 std::forward. 定义: ...
- VS2019 添加三方文件夹遇到的坑
在开发新项目时需要用到一些三方 API,这些三方 API 没有生成 lib,所以我们在 VS 编译器中添加这些三方文件夹的头文件路径后 会出现 ERROR LNK2019 的错误提示,这些提示通常都是 ...
- FastGateway 发布v0.0.0.5
FastGateway 发布v0.0.0.5 修复构建错误 修复docker-compose执行目录 修改请求来源分析数据列表展示 update README.md. 增加默认证书 修复构建脚本目录错 ...
- 数仓的等待视图中，为什么会有Hashjoin-nestloop
本文分享自华为云社区<GaussDB(DWS)等待视图之Hashjoin-nestloop>,作者:Arrow0lf. 1. 业务场景 众所周知,GaussDB(DWS)中有3种常见的jo ...
- [Rust] Workspace，Package, Crate 和 Module
package(包) 一个 package 对应一个项目,package 的信息在 Cargo.toml 里面定义. crate(木箱.箱子) crate 指的是 package 编译后的输出文件.以 ...
- 【Azure Function App】本地运行的Function发布到Azure上无法运行的错误分析
问题描述 Azure Function部署后未执行,查看日志发现错误信息: 2023-12-19T11:12:27.145 [Verbose] Host configuration applied.2 ...
- 【Azure Developer】使用Azure Resource Graph的查询语法的示例
文章"[Azure Developer]在Azure Resource Graph Explorer中查看当前订阅下的所有资源信息列表并导出(如VM的名称,IP地址内网/公网,OS,区域等) ...
- D3.js 力导向图的显示优化（二）- 自定义功能
摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能. 文章首发于 Nebu ...