结构：

/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. Comparable接口与Comparator接口的区别

    1. Comparator 和 Comparable 相同的地方 他们都是java的一个接口, 并且是用来对自定义的class比较大小的, 什么是自定义class: 如 public class Pe ...

  2. JavaScript Patterns 5.6 Static Members

    Public Static Members // constructor var Gadget = function (price) { this.price = price; }; // a sta ...

  3. Learning The Bash Shell读书笔记（整理）

    最近搞了一本书 Learning Bash Shell,发现有人已经写了阅读笔记,我就在这边整理一下 来自blog:http://blog.sina.com.cn/n4mine Learning Th ...

  4. Sqlite学习笔记(三)&&WAL性能测试

    WAL是SQLite3.7.0版本引入的一个重大改进.SQLite官网宣称在很多使用场景下,WAL模型的性能都要好于默认的DELETE模式.下面将针对几个主要场景对WAL性能做测试,测试的硬件与xxx ...

  5. apache 虚拟主机详细配置：http.conf配置详解

    apache 虚拟主机详细配置:http.conf配置详解 Apache的配置文件http.conf参数含义详解 Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd. ...

  6. Python类属性的延迟计算

    所谓类属性的延迟计算就是将类的属性定义成一个property,只在访问的时候才会计算,而且一旦被访问后,结果将会被缓存起来,不用每次都计算. 优点 构造一个延迟计算属性的主要目的是为了提升性能 实现 ...

  7. Java虚拟机 - 内存模型

    本文主要介绍Java虚拟机的内存分布以及对象的创建过程. 一.Java虚拟机的内存分布 文章开始前读者需要了解Java虚拟机的运行时数据区是怎样划分的.如下图所示: 1.程序计数器(Program C ...

  8. Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'解决

    安装上mysql后,报 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock',试了网上的方法 ...

  9. MAC中设置java环境变量和MAVEN

    借助于/usr/libexec/java_home进行配置 在~/.bash_profile 或者/.bash中添加(这里添加1.7版本) #JAVA_HOME export JAVA_HOME=$( ...

  10. C 运算符优先级

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形参表)   . 成员选择(对象) 对象.成员名   -& ...