实现一个简单的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使用自带缓存
项目地址:https://gitee.com/indexman/spring_boot_in_action 下面就介绍一下如何使用spring boot自带的缓存.按步骤来操作即可,不懂的可以去看项目 ...
- win32 - SetWinEventHook的用法
#include <Windows.h> #include <iostream> #include <thread> #include <tchar.h> ...
- 【Android逆向】制作Fart脱壳机，完成对NCSearch的脱壳操作
1. 我的手机是Pixel 1 ,下载fart对应的镜像 镜像位置具体参考大佬博客 https://www.anquanke.com/post/id/201896 2 执行 adb reboot bo ...
- SDL开发笔记（三）：使用SDL渲染窗口颜色和图片
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- linux网络编程基础知识汇总(更新中)
阿帕网 arpanet 阿帕网为美国国防部高级研究计划署开发的世界上第一个运营的封包交换网络,它是全球互联网的始祖. 局域网 LAN(Local Area Network ):通过路由器和交换机把计算 ...
- 并发操作导致的BUG-解决方案
一.问题由来 上周五项目发布新版本之后,生产环境一直没有出现什么问题,大家也都开开心心,平平安安的开始新需求的开发. 可是刚稳定运行没几天,负责人突然在群里面发了一个截图,从图片中的信息可以看到,有一 ...
- Java解析JSON数据，有回车符\n时解析报错
一.问题由来 测试人员最近在测试时,后台日志一直抱错,大致意思是JSON数据解析错误,错误信息如下: 二.问题分析 去查看代码时,发现异常信息是这里抛出来的,解析时使用的是json-lib这个包中的方 ...
- iview viewDesign table 单选 Radio
columns.js export default [ { title: '选择', slot: 'choose', align: 'center', width: 100 }, table里面 &l ...
- viewui tree 自定义化（源码copy出来改动）#添加 获取selected 解决方案
需求: 对树有title的点击效果,右侧有说明文字 和 按钮能点击,不能右键,系统用的壳已经有右键了. 出现的问题: viewui的tree有两年没更新了,对ui这块,是采取的render自定义,但是 ...
- K8s中Role(ClusterRole)资源类型rules字段详解
在Kubernetes(K8s)中,Role资源类型的rules字段用于定义哪些操作(verbs)可以在哪些资源(resources)上执行.Role是一种命名空间级别的资源,它允许你对命名空间内的资 ...