反馈已提交

网络繁忙

ECharts图表联动其他组件

  • 文档创建者:Alicehyy
  • 历史版本:10
  • 最近更新:Alicehyy 于 2024-03-01
  • 1. 概述

    1.1 版本

    报表服务器版本插件版本
    11.0V1.0.0

    1.2 预期效果

    在 FineReport 中,使用普通图表时,可在图表特效中通过 超级链接 进行传参,实现组件之间的联动效果。 那么 ECharts 图表该如何传参联动其他组件呢?

    例如将饼图的系列值「地区」作为参数传递给报表块和柱形图,让表格和柱形图根据参数显示对应地区下销售员的销量,预期效果如下图所示:

    1.gif

    1.3 实现思路

    利用 FineReport 的传参接口结合 ECharts 事件 实现。

    1)changeParameter 接口:该接口只对「图表对象」有效,对报表对象无效。例如 ECharts 图表可传参给普通报表中的图表、决策报表中的图表块,但无法传参给决策报表中的报表块及报表块中的图表。

    2)gotoPage 接口:可实现传参给决策报表中的报表块。

    注:上述两种传参接口属于局部刷新,要实现动态参数传参全局刷新的效果,请参考文档 ECharts图表实现动态参数联动效果

    2. 示例

    2.1 准备数据

    点击设计器左上角「文件>新建决策报表」,新建两个数据库查询,SQL 查询语句分别为:

    ds1 :SELECT * FROM 销量

    ds2 :SELECT * FROM 销量 WHERE 1=1  ${if(len(area) == 0,"","and 地区 = '" + area + "'")} ,该语句可实现参数为空时选择全部数据。

    2.2 设计报表

    1)首先将 body 的布局方式改为「绝对布局」。如下图所示:

    2.png

    2)拖入一个 ECharts图表、一个报表块、一个柱形图到 body 中,适当调整下组件的大小和位置。如下图所示:

    3.png

    3)选中组件时,在右侧属性面板中可设置「组件标题」,分别设置各组件标题为:ECharts饼图、报表块、柱形图,可自定义标题样式。如下图所示:

    4.png

    2.3 设置图表

    2.3.1 报表块

    双击报表块进入编辑界面,设计表格样式如下图所示:

    5.png

    其数据是来源于有参数的 ds2 数据集,其中 C2 单元格的数据设置为「汇总>求和」。展示时会根据接收到的参数进行展示,初始状态参数为空时,则展示全部数据。如下图所示:

    设置完成后,点击左下角「表单」返回 body 界面。

    2.3.2 柱形图

    双击组件进入编辑状态:

    1)给柱形图绑定带有参数的 ds2 数据集中的数据,展示时会根据接收到的参数进行展示,初始状态参数为空时,则展示全部数据。

    2)设置柱形图的「样式>标题」,勾选「标题可见」,输入公式 =$area

    如下图所示:

    7.png

    2.3.3 ECharts图表

    1)双击 ECharts 图表组件进入编辑状态,点击「配置」,添加一个「二维数组结构」,选择 ds1 数据集的地区和销量字段。

    8.png

    2)添加完数据结构后,再点击「代码编辑器」,输入如下代码:

    var TABLE_DATA=getData('data1')
    option = {
      title: {
        text: '各地区销量',
        left: 'center'
      },
       tooltip: {
        trigger: 'item'
      },
       legend: {
        top: '50%',
        left: '85%'
      },
      dataset: {
        source: TABLE_DATA,
      },
      series: [
        { 
          type: 'pie',
          radius: '50%',
          label: {
            show: false,
          },
        }
      ]
    };
    //传参给报表块report0
    myChart.on('click', function (params) {
        _g().getWidgetByName('report0').gotoPage(1, {
    "area": params.name
    }, true);
    });
    //传参给柱形图chart1
    myChart.on("click", function(params) {
      if(window.FR) {
        FR.Chart.WebUtils.changeParameter({
            chartID: 'chart1',
            //柱形图的chartID为chart1
            para: {
                area: params.name
            }
        });
      }
    });

    注1:图表在普通报表中,或在报表块的单元格中时,只支持图表联动图表,不支持图表联动单元格数据。

    注2:在普通报表中传参给图表时, 将 chartID 换成图表所在单元格即可。

    如下图所示:

    9.png

    2.4 效果预览

    保存报表,点击「PC端预览」,效果如 1.2 节预期效果所示。

    注:不支持移动端。

    3. 模板下载

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持