pip install flask-appbuilder

fabmanager create-app

cd newapp

fabmanager create-admin

fabmanager run

访问:http://localhost:8080/

tempaltes/index.html

{% extends 'appbuilder/baselayout.html' %}

{% block head_js %}
    {{ super() }}
    <script src="{{url_for('static',filename='echarts.min.js')}}"></script>
{% endblock %}

{% block content %}

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['A','B','C','D','E']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1h','2h','3h','4h','5h','6h','7h']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'A',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'B',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'C',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'D',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'E',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>

{% endblock %}

views.py

from flask_appbuilder import AppBuilder, expose, BaseView
from app import appbuilder
from flask_appbuilder import has_access

class MyView(BaseView):
    default_view = 'analysis'

    @expose('/analysis/<string:msg>')
    @has_access
    def analysis(self, msg):
        return self.render_template('index.html',msg = msg)
appbuilder.add_view(MyView,"Analysis ABCDE", href='/myview/analysis/abcde', category='My View')

static/echarts.min.js

http://echarts.baidu.com/dist/echarts.min.js

flask-appbuilder +echarts 展示数据笔记的更多相关文章

  1. flask+layui+echarts实现前端动态图展示数据

    效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...

  2. 使用echarts展示线状图信息的时候数据部分数据因为x轴的数据显示不全而隐藏的问题

    在使用echarts来展示数据时,因为数据很多的原因导致x轴显示不全,然后有些数据也隐藏在图表中,所以这个时候我们要在 series 中设置一个属性,让所有的数据都能够展示出来,这里我们需要添加的属性 ...

  3. Echarts 展示两条动态数据曲线

    利用Echarts 展示两条动态数据曲线,每1秒刷新一下数据,在echart官网例子基础上修改,修改了仿真数据的生成方式.生成数量,曲线数量,最总效果图如下: 详细代码如下: 遇到的主要问题点, 1, ...

  4. ECharts – 大数据时代,重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

  5. 子沐代码段——Flask+Mysql+Echarts可视化

    前言 子沐不久前,使用Scrapy爬取了智联招聘的职位数据,并部署到服务器上,设置了定时任务.数据量日益庞大.子沐在想,数据不过只是存在数据库里,并没有什么意义,所以子沐萌发一个想法,那就是做一个可视 ...

  6. django+xadmin+echarts实现数据可视化

    使用xadmin后功能比较强大,在后台展示统计图表,这个需求真的有点烫手,最终实现效果如下图: xadmin后台与echarts完全融合遇到以下问题: 1.没有现成的数据model 2.获得指定时间段 ...

  7. 百度地图标注及结合ECharts图谱数据可视化

    本示例中根据企业位置经纬度,在页面右侧百度地图中标注企业名称.同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本.当右侧百度地图缩放拖拽,左侧ECharts图谱根据右侧地图上出现的企业动态 ...

  8. 利用echarts展示旅行足迹

    前言 一直有个环游世界的梦,周游列国,体验不同国家的人类文明,寻山访水,体验造物主大自然的伟大造化.毕竟人生不止眼前的苟且,还有诗和远方.这么多年以来,陆续走过了一些地方,每到一个地方,都让我离梦想又 ...

  9. 车标知识学习网页开发,与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#

    万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...

随机推荐

  1. vue 模仿机票自定义日历组件,区间选择

    1.创建组件  components > calander > index.vue <template> <div class="page" v-if ...

  2. yii2框架中获取添加元素的主键

    控制器层: 模型层: 返回结果是:

  3. 7.4 GRASP原则四:控制器 Controller

    4.GRASP原则四:控制器 Controller  What first object beyond the UI layer receives and co-ordinates (control ...

  4. HTML table导出到Excel中的解决办法

    第一部分:html+js 1.需要使用的表格数据(先不考虑动态生成的table) <table class="table tableStyles" id="tabl ...

  5. VUE + vue-cli + webpack 创建新项目

    首先记录一下命令. 这是一个睿智新手的笔记. p.s.这是配置好环境以后的命令. ----------------------------------------------- $ npm insta ...

  6. trap(陷井)

    if True: x = 15 print(x)print(x) # 可见 if 语句,不是一个代码块,因为代码块有独立的作用域,代码块结束时,会释放变量 l1 = [1,2,3,4]print(id ...

  7. ThinkPHP5的数据操作和Thinkphp3.2.3对比小结

    前言: 由于Thinkphp5和Thinkphp3.2.3的版本差距过大, 在记忆方面容易混淆. 故特意记录一下在数据操作上的对比的不同. Tp3.2.3 增:add(),addAll() 查:fin ...

  8. 深入理解vue-router之keep-alive

    keep-alive 简介 keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染. 用法也很简单: ? 1 2 3 4 5 <keep-alive> ...

  9. >HTML编辑笔记2

    1.列表 ①无序列表 <ul> <li>XXX</li> <li>XXX</li> </ul> ②有序列表 <ol> ...

  10. hdu 6069 Counting Divisors(求因子的个数)

    Counting Divisors Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Oth ...