反馈已提交

网络繁忙

ECharts图表实现动态参数联动效果

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

    1.1 版本

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

    1.2 预期效果

    在 ECharts图表联动其他组件 文档中,ECharts 图表使用的 changeParameter 和 gotoPage 接口实现的是局部刷新联动效果,且存在某些场景无法实现:例如决策报表中无法对组件标题传参、普通报表中无法对单元格数据传参。

    那要如何实现这些场景呢?

    例如在普通报表中,表格根据点击的饼图系列展示数据,预期效果如下图所示:

    1.gif

    1.3 实现思路

    使用 FR.doHyperlinkByGet(url,config,target,feature) 接口结合 ECharts 事件 实现动态参数全局刷新。

    2. 示例

    2.1 准备数据

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

    ds1 :SELECT * FROM 销量。

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

    2.2 设计报表

    2.2.1 插入图表

    选中一片单元格区域,合并单元格后,再点击插入图表,选择「ECharts图表」。如下图所示:

    2.2.2 设计表格

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

    3.png

    2.2.3 添加数据结构

    选中图表,点击右侧「单元格元素>配置」,添加一个「二维数组结构」。

    数据集选择 ds1,计算方式保持「汇总计算」,字符串字段添加一个「地区」字段,数值字段添加一个「销量」字段,汇总方式为「求和」。

    配置完成后点击最上方「完成」按钮,则返回到数据结构面板,添加的数据结构显示在下方,名称默认为 data1。如下图所示:

    2.2.4 保存报表

    先保存下报表,并给报表命名,在使用动态参数时需要用到模板名称。如下图所示:

    6.png

    2.2.5 编辑代码

    点击「代码编辑器」,输入代码如下:

    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,
          },
        }
      ]
    };
    //动态参数全局刷新
    myChart.on("click", function(params) {
      var url = FR.servletURL + "?viewlet=ECharts图表实现动态参数全局刷新.cpt";
      // 获取servletURL 后拼接成当前模板的 url
      FR.doHyperlinkByPost({url: url, para:{ area: params.name }, target: "_self"});
    });

    注1:模板修改名称后,代码 "?viewlet=ECharts图表实现动态参数全局刷新.cpt" 中的模板名称也需要替换,否则会报错找不到模板文件。

    注2:决策报表中写法一致。

    如下图所示:

    7.png

    2.3 效果预览

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

    注1:不支持移动端。

    注2:预览时,实现传参之后,参数会被保留在 URL 中,刷新浏览器时弹出如下图提示,即刷新浏览器无法恢复初始状态,只能从设计器中重新预览模板。

    8.png

    3. 模板下载

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

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