从零开始实施推荐系统的落地部署——32.推荐系统案例(二十二)股票大屏数据可视化

1.png

 

    上一篇介绍对数据仓库的理解,但是图片有错误,从数据源获取数据后与相关表连接形成宽表后,写入mysql。但是做ADS处理时,不是从mysql里获取,而是在直接在形成宽表时写入mysql后,再继续做ADS处理。经过测试,做成宽表,完成股票涨幅top5的数据,各地区平均成交量数据,各版块平均涨幅,各省平均涨幅,上海SSE上交所和深圳SZSE深交所平均金额和行业涨幅top10。完成后大概是7秒左右,所以在搭建消息队列的情况下,只能设置每10秒更新一次数据。(无法上传视频只能传图片)如图片所示:

 

32.gif

    1. 网页展示我选择轻量级flask来搭建,它是一个微型的python开发的web框架,基于Werkzeug WSGI工具箱和Jinja2 模板引擎。它的目标是保持核心简单而又可扩展,可以很快的上手开始编写代码。代码示例:

 

from flask import Flask

from flask import render_template

app = Flask(__name__)

@app.route("/")

def hello_world():

    return render_template("index.html")"

if __name__ == "__main__":

app.run()

点击http://127.0.0.1:5000/ 会跳转到index.html的页面上。如果设置好index.html的内容,如图片显示:

3.png

    2. 需要编写html和css,如左上图显示top5的饼图,在index.html添加<div id="l1"></div>,在css添加如下:

#l1{

     position: absolute;

     width: 30%;

     height: 45%;

     top: 10%;

     left: 0;

     right: 70%;

     background: #666666;

}

    3. 还有做数据可视化,需要用到echarts,它是一个基于 JavaScript 的开源可视化图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。特性:丰富的可视化类型,多种数据格式无需转换直接使用,千万数据的前端展现,多渲染方案,跨平台使用和动态数据等,所以选择echarts,并在html上添加引用如下:

    <script src="../static/js/jquery-1.11.1.min.js"></script>

    <script src="../static/js/echarts.min.js"></script>

    <script src="../static/js/china.js"></script>

<script src="../static/js/ec_left1.js"></script>

 ec_left1.js是显示图形的关键,代码如下:

var ec_left1 = echarts.init(document.getElementById('l1'), "dark");

var ec_left1_option = {

    title: {

        text: '涨幅top5',

        subtext: '股市',

        left: 'center'

    },

    tooltip: {

        trigger: 'item'

    },

    legend: {

        orient: 'vertical',

        left: 'left',

    },

    series: [

        {

            name: 'top5',   //当指向饼图是显示top5和其股票名称

            type: 'pie',    //这个是选择饼图的类型

            radius: '50%',

            data: [],

            emphasis: {

                itemStyle: {

                    shadowBlur: 10,

                    shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        }

    ]

};

ec_left1.setOption(ec_left1_option);  

    4.还有在controller里添加获得数据,需要使用到ajax,它是指一种创建交互式,快速动态网页应用的网页开发技术,特点是无需重新加载整个页面,通过在后台进行少量数据交换,能够更新部分网页。显示代码如下:

function get_l1_data() {

  $.ajax({

            url:"/l1",    

            success: function(data) {

                     ec_left1_option.series[0].data = data.data;

                     ec_left1.setOption(ec_left1_option)

            },

            error: function(xhr, type, errorThrown) {

            }

  })

}

    通过上面步骤就可以实现股票数据大屏可视化,看起来简单,但是实质需要的一定的基础知识,要了解flask,echarts和ajax,还有懂得编写html和css。如果想做的美观,要在html和css下功夫。

(完)