一、展示效果

最近公司需要做一个能在大屏电视、电脑端和手机移动端实时显示数据的展示功能，实现地图、柱状图、滚动效果等，先上最终效果图：

电脑和电视数据实时显示最终效果图

二、技术实现详解

数据展示功能是使用B/S结构，牵涉到的技术和框架主要有JQuery、BootStrap、百度Echart、PHP、Android、JSON、数据库等，开发工具主要是PHPStorm。

1、Jquery负责异步获取图形数据、定时刷新、滚动效果、json解析等；
2、Bootstrap负责界面展示，适配电脑端、移动端和大屏电视屏幕（在小米4A49寸电视适配通过，下面有电视实现方案的详解）；
3、PHP和数据库负责服务器端的数据生成，与业务系统对接；
4、Andriod主要是配合电视适配。

电视适配比较特殊，很多人接触的不多，这里详细说明一下，电视的适配方案是使用Android Studio开发Android安卓客户端的方式实现电视显示全屏，主要是使用Andriod Webview组件完成web显示页面调用显示，电视的版本是针对的Android6.0开发设计，在Web服务器端页面需要单独处理电视显示的分辨率和字体等，小米4A49寸的分辨率是960X540，电视屏幕展示的时候不能有滚动，需要一屏显示完全，每个人需要根据自己电视型号在真机上进行调试完成，电视的最终显示效果与上图一致。

三、部分主要代码截图和说明

主页面整体代码结构及说明

显示主结构DIV

js代码部分截图及说明

百度Echart部分代码截图及说明

四、代码下载及参考地址

展示项目的代码查看和下载可以去github上
https://github.com/ivivian/EchartSample，百度Echart的详细设置参考可以访问百度Echart网站http://echarts.baidu.com/