图形联动钻取

数据集准备 #

首先在需要进行联动的数据集中SQL的写法如下, 比如对应2号图形:

注意 /* ... */的写法, 当参数写在这个区间时, 如果外部没有传入参数, 
会自动忽略这一段代码, 这样对于联动来说非常重要, 
初始时全部显示, 点击其它图形时传入参数进行动态联动

select xxx,xxx,xxx from tablename /* where xxxx = '$参数名' */ ....

建意观看视屏比较容易理解: 数据联动说明

常规方法 #

比如你需要点击0号图形, 指定其它图形联动 你只需要打开0号图形的数据集编辑页面, 点击标题的位置 输入图片说明 然后输入相关的参数即可, 以下为sample 输入图片说明 参数值设定的方法, 你可以先留空, 然后保存, F12打开浏览器调试方法 点击0号图形你需要点击的动作, 你可以在调试窗口的console看到输入的log 比如我们需要传递的参数值是"廉颇", 那么取数据的方法就是data.name, 你把这个填入即可 输入图片说明

这样就实现按所选数据或所选系列钻取/联动了, 重新点击当前所选, 恢复原来的

TIPS: 在图形编辑器中, 可以使用函数 ds_param(‘参数名’) 来获取传入的参数值

高级定制方法 #

如有更多个性化需求,可在需要点击的图形的编辑器中加入以下代码,仅需修改的是序号和参数名

//比如传入多个参数进行联动
myChart__name__.on('click', function(params){
     let myparam = params.seriesName;  //获取点击的值
     ds_setParam('参数名', myparam); //填写你的数据集的SQL设定中对应的参数名
     ds_setParam('参数名2', myparam2); //你可以赋值给多个参数
     ds_refresh(3);   //3 为你要刷新图形序号
});

//函数方法说明
ds_setParam('参数名', 参数值)
此方法将自动判断当参数值为空,null或0时, 删除参数回到初始未传参状态
所以请注意此方法无法传递参数空,null及0, 如需传递请将0转化成字符

你还可以实现钻取到另外一个报表

myChart__name__.on('click', function (params) {
 let myparam = `&param={"参数名": "${params.seriesName}"}`;
 //拼成url并传参，具体参考数据集说明中的数据联动url传参的方法
 let myurl='http://localhost:8000/echart/?type=目标报表名'+ myparam;
 window.open(myurl,'_blank','toolbar=no,scrollbar=no,top=100,left=100,width=800,height=500');
});

TIPS 如果你的参数中存在非法字符如&=, 你可以使用encodeURIComponent函数进行转义后赋值

Edit Edit this page