结构：

/www

|

|-- /static

| |

| |-- echarts.js（当然还有echarts原dist目录下的文件(夹)）

|

|-- /templates

| |

| |-- index.html

|

|-- app.py

|

|-- create_db.py

一、先准备数据

# 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()

二、定义路由

定义了两个路由：'/'和'/weather'，后一个用于处理ajax，返回json格式。形如：

{month:['1月','2月',...],evaporation:[3.1, 4, 4.6, ...],precipitation:[...]}

# 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)

三、使用echarts

这里使用单文件导入模式，见官网例子。

值得注意的是导入echarts.js时使用了url_for函数。初时，我使用了src="js/echarts.js"，老是导入不了！原因不详！

index.html文件如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>ECharts Ajax</title>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.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>

效果图

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数据可视化

    前提: 准备Python + Flask+Sqlite3的平台环境(windows系统) 前面一节介绍flask怎么安装了,剩下sqlite3下载后解压,然后环境变量添加解压路径就行了 附加下载地址: ...

  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. 手把手教你做一个python+matplotlib的炫酷的数据可视化动图

    1.效果图 2.注意: 上述资料是虚拟的,为了学习制作动图,构建的. 仅供学习, 不是真实数据,请别误传. 当自己需要对真实数据进行可视化时,可进行适当修改. 3.代码: #第1步:导出模块,固定 i ...

  6. 基于matplotlib的数据可视化 - 热图imshow

    热图: Display an image on the axes. 可以用来比较两个矩阵的相似程度 mp.imshow(z, cmap=颜色映射,origin=垂直轴向) imshow( X, cma ...

  7. g2蚂蚁数据可视化折线图，点位坐标label 图形文本设置

    应用g2可视化插件画了个粉丝分析图 要求显示如图所见的节点参数,查看文档蚂蚁图形文本设置,得知需要引入如下代码: chart.point().position('update*praises').la ...

  8. WPF数据可视化-瀑布图

    实现方式一: 将数据(Point[])根据索引沿X轴使用虚拟画布进行绘制,每个数据绘制大小为1px * 1px:最终绘制出的宽度等于数据的总长度.标记并存储当前绘制的图为PreviousBitmap; ...

  9. WPF数据可视化-趋势图

    环境: 系统: Window 7以上: 工具:VS2013及以上. 研发语言及工程: C# WPF 应用程序 效果: ​ ​ 简介: 不需要调用第三方Dll, 仅仅在WPF中使用贝塞尔曲线,不到500 ...

随机推荐

  1. 开篇：IT软件人员学习的书籍 - IT软件人员书籍系列文章

    读书是一件快乐的事情. 读书能够增长知识,了解社会,了解人类的思想,继而转换成智慧.无论是什么人,都需要读书,多读书,读好书,同时也要把书中的精髓记录下来,一个是当做读后感,一个是为以后如果忘记了回头 ...

  2. MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误的解决办法

    打开myeclipse所在的wordspace文件夹,在下面子文件夹 .metadata\.plugins\org.eclipse.core.runtime\.settings删除 com.genui ...

  3. coursera机器学习笔记-多元线性回归，normal equation

    #对coursera上Andrew Ng老师开的机器学习课程的笔记和心得: #注:此笔记是我自己认为本节课里比较重要.难理解或容易忘记的内容并做了些补充,并非是课堂详细笔记和要点: #标记为<补 ...

  4. socket学习之聊天室

    服务端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

  5. IO系统性能之一：衡量性能的几个指标

    作为一个数据库管理员,关注系统的性能是日常最重要的工作之一,而在所关注的各方面的性能只能IO性能却是最令人头痛的一块,面对着各种生涩的参数和令人眼花缭乱的新奇的术语,再加上存储厂商的忽悠,总是让我们有 ...

  6. Eclipse快捷键-方便查找

    [Ct rl+T] 搜索当前接口的实现类 1. [ALT +/]    此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ ...

  7. 修改/etc/profile文件

    通常情况下,/etc/profile文件是只读的,直接用vi或gedit打开修改后是无法保存的.要修改profile,需要取得root权限,(使用gedit编辑)应该如下: $sudo gedit / ...

  8. Fitbit Flex 智能手环佩戴心得 主要说说过敏

    参杂一篇杂文. 也是因为体重飙升,所以去年下半年的时候入手了一个Fitbit flex. 当时相比Jawbone up,nfc和ble的特性,以及防水性还是更吸引我一点.所以就入手了. 佩带了如此长的 ...

  9. Activity的onCreate()的PersistableBundle 参数坑。

    Bundle 与 PersistableBundle 区别 仅仅是Activity oncreate()的一个参数与两个参数的区别: @Override public void onCreate(Bu ...

  10. ADO.NET防止字符串攻击方法

    在黑窗口里面输入内容时利用拼接语句可以对数据进行攻击 如:输入班级值 --:代表后边内容都被注释掉了 防止SQL注入攻击方法: 再给命令发送SQL语句的时候分两次发送,把SQL语句拆成两块,用户输入的 ...