FineReport_大屏搭建详细过程

最终呈现结果(比文档要详细)

一、将所需图表拉直决策报表中

选择绝对布局，可以设置大小

二、准备好数据源，设置各图表数据

点击图表--编辑--数据--设置数据源，，此处可查看帮助文档中各图表的详细设置，设置数据来源、各系列名、值，汇总方式

  

三、调整布局，将各图表组件位置进行设置

四、配色

、

   

可将每个图标直接引用在服务器上设置的预定义样式，设置标题，图例，背景等

  

五、给每个图表设置边框，设置统一的标题，去掉图例

1.以下两种方式都可以设置外置边框，但表格只能从属性进入设置边框，选择拉伸

2.当需要另加标题时也可以添加表格在表格中编辑文字当作标题

    

当边框与图标完全融到一起，看不到边框时序采取另一种方式，添加表格，将表格至于底层，并表格宽度大于图表宽度，给表格添加边框

   

六、字体间隔开

设置A,B列如下公式，将B1设置扩展属性，并隐藏A列

  

七、给文章增加边框，并实时更新

添加文字边框：条件属性--背景--图片，大于或等于0

  

实时刷新：服务器--插件管理--下载安装插件，才能设置刷新，设置刷新--定期刷新--刷新间隔

八、设置一个字段小于另一个字段时标记颜色

九、设置数据点提示自动播放

 

setTimeout(function(){
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
vanchart.openAutoTooltip();
},3000) 

十、设置跑马灯/滚动报表图

setTimeout(function() {
       //隐藏报表块report0的滚动条（此报表块名为report0，根据具体情况修改）
    $("div[widgetname=REPORT0]").find(".frozen-north").css({
        'overflow-x':'hidden',
        'overflow-y':'hidden'
    });
    $("div[widgetname=REPORT0]").find(".frozen-center").css({
        'overflow-x':'hidden',
        'overflow-y':'hidden'
    });
 
},1000);