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

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

    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的内容，如图片显示：

    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下功夫。