flask-echarts 数据网页可视化

Echarts 官网https://echarts.baidu.com/index.html；Echarts官方文档http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts。工程的结构如下：其中static放置js文件（从官网上弄来的js文件就放在这里），temp...

二个半engineer

751人浏览 · 2019-10-27 22:37:32

二个半engineer · 2019-10-27 22:37:32 发布

Echarts 官网https://echarts.baidu.com/index.html；Echarts官方文档http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts。

工程的结构如下：

其中static放置js文件（从官网上弄来的js文件就放在这里），templates放置html文件，我之前遇到过"templates"少写个s,运行代码时告诉我html文件找不到了。

appFlask.py:

#coding=utf-8

from __future__ import unicode_literals

from flask import Flask,render_template,jsonify

#生成Flask实例
app = Flask(__name__)

@app.route('/',methods=["POST","GET"])
def index():
    return render_template("list2.html")

@app.route('/list',methods=["POST","GET"])
def list_echart_api():
    return jsonify(xAxisData = [u'周一', u'周二', u'周三', u'周四', u'周五', u'周六', u'周日'],
        data_list1 =  [120, 132, 101, 134, 90, 230, 210],
        data_list2 = [220, 182, 191, 234, 290, 330, 310])


if __name__ == "__main__":
    #运行项目
    app.run(debug=True, port=5000, host='0.0.0.0')

list2.html:

<html>
	<head>
	    <!-- 引入jquery.js -->
	    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	    <!-- 引入 echarts.js -->
        <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script>
        <!-- <script type="text/javascript" src="../static/jquery.min.js"></script> 
        <script type="text/javascript" src="../static/echarts.js"></script> -->
        <!-- 上面两个script是从网页加载js,下面的是将js放到本地static 文件下的script-->
	</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    	
    	// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        myChart.setOption({
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['邮件营销','联盟广告']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                
                data: []
            },
            yAxis: {
                
            },
            series: [
                {
                    name:'邮件营销',
                    type:'line',
                    stack: '总量',
                    data:[]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    stack: '总量',
                    data:[]
                }
                
            ]
        });

        $.get('/list').done(function (data) { 
        <!--myChart.hideLoading(); // 隐藏加载动画-->

        var option =
        {
            xAxis: {
                data: data.xAxisData
            },
            series: [{
                name: '邮件营销', // 根据名字对应到相应的系列
                data: data.data_list1.map(parseFloat) // 转化为数字（注意map）
            },{
                name: '联盟广告',
                data: data.data_list2.map(parseFloat)
            }]
        }

        // 填入数据
        myChart.setOption(option);
    });
        
    </script>
</body>

运行flask应用，打开网页127.0.0.1:5000，可以看到网页有如图1的显示。这就是一个简单的flask+echarts显示数据。