flask-appbuilder +echarts 展示数据笔记

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 %}

View Code

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')

View Code

static/echarts.min.js

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