前提：

准备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. 玩转spring boot——结合JPA事务

    接着上篇 一.准备工作 修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  2. 深入.NET平台和C#编程总结大全

    对于初学者的你,等到你把这个看完之后就更清楚地认知.NET和C#编程了,好了废话不多说,开始吧!                                                     ...

  3. 微信小程序开发日记——高仿知乎日报（中）

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  4. 【从零开始学BPM，Day4】业务集成

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第四天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

  5. win7下利用ftp实现华为路由器的上传和下载

    win7下利用ftp实现华为路由器的上传和下载 1.  Win7下ftp的安装和配置 (1)开始->控制面板->程序->程序和功能->打开或关闭Windows功能 (2)在Wi ...

  6. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  7. linux下安装Redis以及phpredis模块

    一:redis的安装 1. 首先上官网下载Redis 压缩包,地址:http://redis.io/download 下载 2. 通过远程管理工具,将压缩包拷贝到Linux服务器中,执行解压操作 3. ...

  8. PropertyGrid控件由浅入深(二)：基础用法

    目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...

  9. 刷LeetCode的正确姿势——第1、125题

    最近刷LeetCode比较频繁,就购买了官方的参考电子书 (CleanCodeHandbook),里面有题目的解析和范例源代码,可以省去非常多寻找免费经验分享内容和整理这些资料的时间.惊喜的是,里面的 ...

  10. LeetCode-2AddTwoNumbers(C#)

    # 题目 2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The di ...