前提:

准备Python + Flask+Sqlite3的平台环境(windows系统)

前面一节介绍flask怎么安装了,剩下sqlite3下载后解压,然后环境变量添加解压路径就行了

附加下载地址:http://www.sqlite.org/2016/sqlite-tools-win32-x86-3150200.zip

项目的目录结构

/www
|
|-- /static
| |jquery-1.6.2.js (可以是其他jquery-xx.js,在index.html里修改就行了)
| |-- echarts.js(还有echarts原dist目录下的文件(夹))
|
|-- /templates
| |
| |-- index.html
|
|-- app.py
|
|-- create_db.py

  

记得下载:echarts,echarts包含:

# create_db.py
# 只运行一次!!! import sqlite3 # 连接
conn = sqlite3.connect('mydb.db')
c = conn.cursor() # 创建表
c.execute('''DROP TABLE IF EXISTS weather''')
c.execute('''CREATE TABLE weather (month text, evaporation text, precipitation text)''') # 数据
# 格式:月份,蒸发量,降水量
purchases = [(1, 2, 2.6),
(2, 4.9, 5.9),
(3, 7, 9),
(4, 23.2, 26.4),
(5, 25.6, 28.7),
(6, 76.7, 70.7),
(7, 135.6, 175.6),
(8, 162.2, 182.2),
(9, 32.6, 48.7),
(10, 20, 18.8),
(11, 6.4, 6),
(12, 3.3, 2.3)
] # 插入数据
c.executemany('INSERT INTO weather VALUES (?,?,?)', purchases) # 提交!!!
conn.commit() # 查询方式一
for row in c.execute('SELECT * FROM weather'):
print(row) # 查询方式二
c.execute('SELECT * FROM weather')
print(c.fetchall()) # 查询方式二_2
res = c.execute('SELECT * FROM weather')
print(res.fetchall()) # 关闭
conn.close()

建立数据库结果:

     // index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts Ajax</title>
<script src="{{ url_for('static', filename='jquery-1.6.2.js') }}"></script>
</head> <body>
<!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <!--Step:2 引入echarts.js-->
<!--<script src="js/echarts.js"></script>-->
<script src="{{ url_for('static', filename='echarts.js') }}"></script> <script type="text/javascript">
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
require.config({
paths: {
echarts: './static',
}
}); // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar', // 按需加载
'echarts/chart/line',
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main')); // 设置---------------------
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[]
},
{
name:'降水量',
type:'line',
data:[]
}
]
}; $.ajax({
cache: false,
type: "POST",
url: "/weather", //把表单数据发送到/weather
data: null, // 发送的数据
dataType : "json", //返回数据形式为json
async: false,
error: function(request) {
alert("发送请求失败!");
},
success: function(result) {
//console.log(result);
for (i = 0, max = result.month.length; i < max; i++) { //注意:result.month.length
option.xAxis[0].data.push(result.month[i]);
option.series[0].data.push(parseFloat(result.evaporation[i]));
option.series[1].data.push(parseFloat(result.precipitation[i]));
}; // 为echarts对象加载数据--------------
myChart.setOption(option);
}
});
// 为echarts对象加载数据--------------
//myChart.setOption(option);
}
);
</script>
</body>
</html>

 

# app.py

import sqlite3
from flask import Flask, request, render_template, jsonify app = Flask(__name__) def get_db():
db = sqlite3.connect('mydb.db')
db.row_factory = sqlite3.Row
return db def query_db(query, args=(), one=False):
db = get_db()
cur = db.execute(query, args)
db.commit()
rv = cur.fetchall()
db.close()
return (rv[0] if rv else None) if one else rv @app.route("/", methods=["GET"])
def index():
return render_template("index.html") @app.route("/weather", methods=["POST"])
def weather():
if request.method == "POST":
res = query_db("SELECT * FROM weather") return jsonify(month = [x[0] for x in res],
evaporation = [x[1] for x in res],
precipitation = [x[2] for x in res]) if __name__ == "__main__":
app.run(debug=True)

运行后:

打开:http://127.0.0.1:5000/

flask+sqlite3+echarts2+ajax数据可视化的更多相关文章

  1. flask+sqlite3+echarts2+ajax数据可视化报错:UnicodeDecodeError: 'utf8' codec can't decode byte解决方法

    flask+sqlite3+echarts2+ajax数据可视化报错: UnicodeDecodeError: 'utf8' codec can't decode byte 解决方法: 将 py文件和 ...

  2. flask+sqlite3+echarts2+ajax数据可视化--静态图

    结构: /www | |-- /static | | | |-- echarts.js(当然还有echarts原dist目录下的文件(夹)) | |-- /templates | | | |-- in ...

  3. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  4. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  5. ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

    ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...

  6. 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化

    mysql表的结构   数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化):   下面就是写代码了: 首先看一下项目目录:   数据库层   业务逻辑层   pac ...

  7. 教你如何使用flask实现ajax数据入库

    摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...

  8. Flsk&pyecharts 动态数据可视化

    1:数据源 Hollywood Movie Dataset: 好莱坞2006-2011数据集  实验目的: 实现 统计2006-2011的数据综合统计情况,进行数据可视化 gitee地址: https ...

  9. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

随机推荐

  1. 利用apply()或者rest参数来实现用数组传递函数参数

    关于call()和apply()的用法,MDN文档里写的非常清晰明白,在这里就不多做记录了. https://developer.mozilla.org/zh-CN/docs/Web/JavaScri ...

  2. 我这么玩Web Api(一):帮助页面或用户手册(Microsoft and Swashbuckle Help Page)

    前言 你需要为客户编写Api调用手册?你需要测试你的Api接口?你需要和前端进行接口对接?那么这篇文章应该可以帮到你.本文将介绍创建Web Api 帮助文档页面的两种方式,Microsoft Help ...

  3. 根据ip判断返回城市名称查询当地天气

    <?phpheader("content-type:text/html;charset=utf-8");date_default_timezone_set("Asi ...

  4. Windows下MySQL无法启动

    问题描述: 从网上下了5.7 的MySQL,在bin目录下执行 start mysqld ,弹出个cmd窗口一闪就没了,也看不清是什么报错.mysqld --install安装了服务,也启动不了.   ...

  5. DB2重启数据库实例

    DB2重启数据库实例时,有时停止实例会失败,此时需要先确认没有应用链接数据库,然后再关闭数据库实例,并重新启动. 1.查看是否有活动的链接 命令:db2 list applications for d ...

  6. Linux下的C Socket编程 -- server端的继续研究

    Linux下的C Socket编程(四) 延长server的生命周期 在前面的一个个例子中,server在处理完一个连接后便会立即结束掉自己,然而这种server并不科学啊,server应该是能够一直 ...

  7. 一键部署mono 免费空间支持ASP.NET MVC 再也不担心伙食费换空间了

    一直以来 部署mono 都是很头疼的事情 因为是我在是不熟悉非win环境,今天偶然发现这个项目,挺好的,分享下 https://github.com/wshearn/openshift-communi ...

  8. MySql 死锁时的一种解决办法

    转自:http://blog.csdn.net/mchdba/article/details/38313881 之前也遇到一次,今天又遇到了这个问题,所以这次必须解决,网上找到这篇文章帮了大忙,方便以 ...

  9. Web应用多账号系统设计及微信扫码登录实现

    Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...

  10. ABP源码分析十八:UI Inputs

    以下图中描述的接口和类都在Abp项目的Runtime/Validation, UI/Inputs目录下的.在当前版本的ABP(0.83)中这些接口和类并没有实际使用到.阅读代码时可以忽略,无需浪费时间 ...