实现一个简单的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 ...
随机推荐
- OCP试题解析之053-16 MEMORY_TARGET
16.Setting which of the following initialization parameters enables Automatic Memory Management? A. ...
- 解决xshell连不上ubuntu虚拟机
分析 原因:虚拟机未安装ssh服务(Xshell远程连接需通过ssh协议) 解决方法 ubuntu安装ssh服务器 sudo apt-get install openssh-server 后续有问题可 ...
- 大众点评cat报警源码
类时序 时许说明 判断是否是报警机器. 1分钟启动一个线程根据设置的报警条件,时间段去查询CAT报告数据. 根据返回的报告数据,逐层解析TYPE,NAME,RANGE中的数据是否满足报警条件. 只有全 ...
- 面试官问我会ES么，我说不会，抓紧学起【ES（一）聚合分析篇】
ES聚合分析 1.metric(指标)聚合 1.1 单值分析 min 求指定字段的最小值 # 求价格的最小值 { "size":0, "aggs":{ &quo ...
- ThreadLocal父子间通信的四种解决方案
ThreadLocal父子间通信的四种解决方案 ThreadLocal 是存储在线程栈帧中的一块数据存储区域,其可以做到线程与线程之间的读写隔离. 但是在我们的日常场景中,经常会出现父线程需要向子线程 ...
- Windows10 windows installer卸载或安装不了软件怎么办？
先说我的方法: 1.把安装出现问题的软件或者想要卸载的软件的安装目录下的所有文件都删除. 2.用清理软件清理一下垃圾,包括注册表,这里我自己使用的是火绒->安全工具- ...
- Ubuntu 22.04 源码安装ST-Link V2过程详解
一 首先安装依赖工具: A 安装预编译库: sudo apt-get install git make cmake libusb-1.0-0-dev B 安装gcc库: sudo apt-get in ...
- Android Webview判断网页加载完毕
原文: Android Webview判断网页加载完毕 - Stars-One的杂货小窝 书接上文,在Android WebView获取html源码 - Stars-One的杂货小窝此文讲到没有一个可 ...
- KTL 一个支持C++14编辑公式的K线技术工具平台 - 第九版，数据分析工具。支持通达信日线数据。增强即时插件编程体现。
K,K线,Candle蜡烛图. T,技术分析,工具平台 L,公式Language语言使用c++14,Lite小巧简易. 项目仓库:https://github.com/bbqz007/KTL 国内仓库 ...
- Welcome to YARP - 2.1配置功能 - 配置文件
目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...