结构：

/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. Entity Framework 4.1 - Code First 指定外键名称

    Entity Framework 4.1 中,生成外键的方式有以下几种: 1-指定导航属性,会自动生成外键,命名规则为:“表名_主键名”2-默认情况下与导航属性的主键名称相同的字段会自动被标记为外键, ...

  2. [20140829]spinlock导致cpu居高不下

    背景: 出现cpu高于常规的告警 排查: 1.开跟踪,没有发现cup特别高的查询 2.查看内核cpu使用量,看是否是sql server 端引起 3.查看负荷,是否负荷特别高这里使用 batch re ...

  3. Java Security：Java加密框架(JCA)简要说明

    加密服务总是关联到一个特定的算法或类型,它既提供了密码操作(如Digital Signature或MessageDigest),生成或供应所需的加密材料(Key或Parameters)加密操作,也会以 ...

  4. Java AIO 异步IO应用实例

    项目地址:https://github.com/windwant/aio-test Server: package org.windwant.aio; import java.io.IOExcepti ...

  5. SQLServer复合查询条件(AND,OR,NOT)对NULL值的处理方法

    在SQL的3值逻辑下,一个查询条件可以产生以下三种情况:TRUE,FALSE,NULL.只有那些满足WHERE子句的值是TRUE的记录才出现在结果表中. NULL值影响查询条件的结果,并且结果很微妙. ...

  6. jquery简单入门（一）

    相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...

  7. 深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  8. SQL指令中一些特别值得注意的地方

    SQL基本指令要频繁使用,要是理解错了,将来工作一定会出现很大的麻烦.今天再重新梳理一下基本的SQL语法 SQL指令 in: 这个指令,我曾经发生过把它和python中的in搞混的错误.python中 ...

  9. 烂泥：Linux源码包制作RPM包之Apache

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 公司服务器比较多,需要把apache源码包制作成rpm包,然后放到公司内网yum源上进行下载安装.apache的rpm包安装方式比源码安装方式比较快,这能 ...

  10. ES6箭头函数（Arrow Functions）

    ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 1. 具有一个参数的简单函数 var single = a => a single('he ...