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

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在不重新加载整个页面的情况下,与服务器交换数据并更新网页部分的技术


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>

Flask-- (九) 数据可视化及富文本编辑器_第1张图片

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>

Flask-- (九) 数据可视化及富文本编辑器_第2张图片

你可能感兴趣的:(Flask-- (九) 数据可视化及富文本编辑器)