结构：

/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. FTP远程文件传输命令

    使用ftp命令进行远程文件传输 ftp命令是标准的文件传输协议的用户接口.ftp是在TCP/IP网络上的计算机之间传输文件的简单有效的方法.它允许用户传输ASCII文件和二进制文件. 在ftp会话过程 ...

  2. Java中的基本数据类型

    什么是基本数据类型 就是我们在编程的时候经常需要用到的数据类型,如整型,浮点型等,把这些数据类型专门拿出来特殊对待,并想象成所谓的“基本类型”. Java中有哪些基本数据类型

  3. Sql Server 添加外部程序集基本操作

    简介:有时候Sql Server的内置函数没有那么好用的时候,可以引用一下外部程序集,下面献下丑,做下添加外部程序集操作 1.准备程序,编译出一个MyCLR的DLL. public class CLR ...

  4. MongoDB3.0.x版本用户授权配置(单机环境)

    MongoDB数据库默认情况下是没有做权限控制的,只要能够连接所开放的端口就能进行访问,而且拥有root级别的权限:对于生产环境而言是极不安全的,所以需要建立用户,进行授权控制. 单机环境下的用户授权 ...

  5. 【Unity】改变向量的方向而不改变其大小

    最近在做一个打砖块游戏时遇到一个小问题,就是小球有可能会在左右两个边界之间做循环往返运动而导致游戏无法继续进行下去,于是我打算让小球在垂直撞向边界时改变一下方向,但是速度不变,尝试了一些方法但是没有达 ...

  6. ln

    文件描述符是相对进程而言的,一个文件可以有多个文件描述符,但只有一个inode,inode一样就是同一个文件,文件名不同也是同一个 硬链接 两个文件是指向同一个存储区,inode号一样,并没有开辟新的 ...

  7. Linux 开机自启动脚本详解

    以kibana为例     以下为skibana名称的脚本内容 #!/bin/bash #chkconfig: 2345 80 90 #description:kibana kibana=" ...

  8. Linux软件安装-RPM安装

    RPM是RPM Package Manager(RPM软件包管理器)的缩写,这一文件格式名称虽然打上了RedHat的标志,但是其原始设计理念是开放式的,现在包括OpenLinux.         S ...

  9. for循环的省略

    for (初始化语句; 条件语句; 控制语句){ 被执行的代码块 }; 例如: for (var i=0;i<cars.length;i++) { document.write(cars[i] ...

  10. python 使用pip安装第三方模块

    part 1:使用方法: 1.pip install somePackage picture 1 2.pip show somePackage 例如:pip show pip 弹出关于该模块的信息 p ...