Flask-- (九) 数据可视化及富文本编辑器

最新推荐文章于 2024-01-05 20:06:22 发布

jacke5t

最新推荐文章于 2024-01-05 20:06:22 发布

阅读量598

点赞数

本文链接：https://blog.csdn.net/weixin_44420527/article/details/106886392

版权

1、echarts框架+ajax获取

Echarts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

1.1 使用流程

1、实例化echarts对象

2、编写echarts参数

3、对象加载参数

from flask import jsonify
from sqlalchemy import func
from models import *

# view.py
@user_print.route('/show')
def show():
    """查询统计数据，返回给前端渲染"""
    # 外连接查询
    data = Department.query.outerjoin(Position).outerjoin(Person).group_by(Department.name).with_entities(Department.name, func.count(Person.id)).all()
    datas = dict(data)
    # 关系映射查询
    # department_list = Department.query.all()
    # datas = {}
    # for department in department_list:
    #     count = 0  # 部门人员统计
    #     position_list = department.department_position_map
    #     for position in position_list:
    #         person_list = position.position_person_map
    #         count += len(person_list)
    #         datas[department.name] = count
    datas = {
        "x": list(datas.keys()),
        "y": list(datas.values())
    }
    return jsonify(datas)

echarts参数采用ajax异步来获取

ajax在不重新加载整个页面的情况下，与服务器交换数据并更新网页部分的技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="show"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById('show'));
var option = {
    title: {
        text: '公司各部门职员人数统计'
    },
    tooltip: {},
    legend: {
        data: ['职员人数']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '职员人数',
        type: 'bar', //柱状图
        data: []
    }]
};
$.ajax(
    {
        url:"/show",  //ajax请求的路由
        type:"get",  //请求方式
        data:"",  // 请求携带的参数
        success: function (data) {  //访问成功时的回调函数，使用该函数来更新echarts参数
            option["xAxis"]["data"] = data["x"]
            option["series"][0]["data"] = data["y"]
            myChart.setOption(option);  //echarts加载参数，绘制图像
        },
        error: function (data) {  //访问失败时的回调函数
            alert("error")
        }
    }
)
</script>
</html>

2、富文本编辑器的使用

1、下载官方包

https://ckeditor.com/ckeditor-4/download/

2、导入js

<script src="/static/lib/ckeditor/ckeditor.js"></script>

3、修改textarea，增加一个class属性值为ckeditor

<form method="post" enctype="multipart/form-data" action="/edit_news/{{ news.id }}">
    <div class="form-group">
        <label class="control-label">内容:</label>
        <textarea class="form-control ckeditor" name="content"></textarea>
    </div>
    <div class="form-group">
        <button class="btn btn-primary btn-block">提交</button>
    </div>
</form>

jacke5t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flask-- (九) 数据可视化及富文本编辑器

1、echarts框架+ajax获取Echarts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。1.1 使用流程1、实例化echarts对象2、编写echarts参数3、对象加载参数from flask import jsonifyfrom sqlalchemy import fu
复制链接

扫一扫