大屏BI（AjReport）

大屏的应用范围很广，前些年很多企业出于成本问题（维护成本、产品购置成本等）不愿意配备此设备，随着技术不断的发展大屏展示技术日渐成熟，管理者思维和视野逐渐开阔，大屏展示系统就成了企业自身宣传、大数据整合应用的首选方式，宣传展示、工作督导、数据分析，为管理者提供了一个可视化的数据驾驶舱。

类似产品有很多，有很多成品可购买包括售后服务，当然也有很多开源代码可以实现该功能，不过需要企业自己设置技术人员去维护，今天就来简单介绍一下AJ-Report可视大屏开源系统。

AJ-Report可视大屏简介

AJ-Report是全开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，目前已支持25种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
三步轻松完成大屏设计：配置数据源—->写SQL配置数据集—->拖拽配置大屏—->保存发布。欢迎体验。

在线体验

在线体验: https://ajreport.beliefteam.cn/index.html  体验账号：guest 密码：guest

在线文档: https://ajreport.beliefteam.cn/report-doc/

在线提问: https://gitee.com/anji-plus/report/issues

发行版本下载链接

https://gitee.com/anji-plus/report

https://gitee.com/anji-plus/report/releases

组件介绍

大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下：

脚本

function dataTransform(data){
    //自定义脚本内容
    for(j = 0, len = data.length; j < len; j++){
        data[j].name = {1:'name1',2:'name2',3:'name3',4:'name4',5:'name5'}[data[j].type];

    }
    return data;
}

function dataTransform(data){
    var datan=[
        {
            "name": "name1",
            "type": "lxpf"
        },
        {
            "name": "name2",
            "type": "hyyj"
        },
        {
            "name": "name3",
            "type": "zynt"
        },
        {
            "name": "name4",
            "type": "sfjg"
        }
    ];
    //自定义脚本内容
    var objn={};
    for(var j = 0, len = data.length; j < len; j++){
       var key=data[j].type+data[j].status;
       objn[key]=data[j];
    }
    for(var j = 0, len = datan.length; j < len; j++){
       var v1key=datan[j].type+'1';
       var v2key=datan[j].type+'2';       
       datan[j]['value1']=objn[v1key].value;
       datan[j]['value2']=objn[v2key].value;
       datan[j]['percentage1']=parseFloat(objn[v1key].percentage);
       datan[j]['percentage2']=parseFloat(objn[v2key].percentage);
    }
    return datan;
}

地图气泡图

\report-ui\src\views\screenDesigner\widget\mapCharts\widgetAirBubbleMap.vue
\report-ui\src\views\bigscreenDesigner\designer\tools\configure\mapCharts\widget-airbubble-map.js