fm453/smartchart
1
0
Fork 0
mirror of https://gitee.com/smartchart/smartchart synced 2025-05-05 09:09:24 +08:00
Code Issues Packages Projects Releases Wiki Activity
smartchart/docs/docs/5.参数及联动钻取/图形联动钻取/index.html
JohnYan a5509a8b1a v6.6.8
2023-07-11 17:01:07 +08:00

1862 lines
41 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="数据集准备 # 在需要进行联动的数据集中SQL写法请参考&quot;参数编写方法&quot;章节 select ... from tablename /* where xxxx = &#39;$参数名&#39; */ 建意观看视屏比较容易理解: 数据联动说明 常规方法 # 比如需要点击0号图形, 指定其它图形联动
只需要打开0号图形的数据集编辑页面, 点击标题的位置 然后输入相关的参数即可, 以下为sample 参数值设定的方法, 你可以先留空, 然后保存, F12打开浏览器调试方法
点击0号图形你需要点击的动作, 可以在调试窗口的console看到输入的log
比如我们需要传递的参数值是&quot;廉颇&quot;, 那么取数据的方法就是data.name, 你把这个填入即可 这样就实现按所选数据或所选系列钻取/联动了, 重新点击当前所选, 恢复原来的
在图形编辑器中, 可以使用函数 ds_param(&lsquo;参数名&rsquo;) 来获取传入的参数值
高级定制方法 # 如有更多个性化需求,可在需要点击的图形中加入以下动作响应用代码 仅需修改的是序号和参数名 比如当图形被点击时, 传入多个参数进行联动 myChart__name__.on(&#39;click&#39;, function(params){ let myparam = params.seriesName; //获取点击的值 ds_setParam(&#39;参数名&#39;, myparam); //填写你的数据集的SQL设定中对应的参数名 ds_setParam(&#39;参数名2&#39;, myparam2); //你可以赋值给多个参数 ds_refresh(3); //3 为你要刷新图形序号 }); 函数方法说明 ds_setParam(&#39;参数名&#39;, 参数值) //此方法将自动判断当参数值为空,null或0时, 删除参数回到初始未传参状态 //所以请注意此方法无法传递参数空,null及0, 如需传递请将0转化成字符 //如果你的参数中存在非法字符如&amp;=, 你可以使用js的encodeURIComponent函数进行转义后赋值 你还可以实现钻取到另外一个报表 myChart__name__.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
<meta property="og:description" content="数据集准备 # 在需要进行联动的数据集中SQL写法请参考&quot;参数编写方法&quot;章节 select ... from tablename /* where xxxx = &#39;$参数名&#39; */ 建意观看视屏比较容易理解: 数据联动说明 常规方法 # 比如需要点击0号图形, 指定其它图形联动
只需要打开0号图形的数据集编辑页面, 点击标题的位置 然后输入相关的参数即可, 以下为sample 参数值设定的方法, 你可以先留空, 然后保存, F12打开浏览器调试方法
点击0号图形你需要点击的动作, 可以在调试窗口的console看到输入的log
比如我们需要传递的参数值是&quot;廉颇&quot;, 那么取数据的方法就是data.name, 你把这个填入即可 这样就实现按所选数据或所选系列钻取/联动了, 重新点击当前所选, 恢复原来的
在图形编辑器中, 可以使用函数 ds_param(&lsquo;参数名&rsquo;) 来获取传入的参数值
高级定制方法 # 如有更多个性化需求,可在需要点击的图形中加入以下动作响应用代码 仅需修改的是序号和参数名 比如当图形被点击时, 传入多个参数进行联动 myChart__name__.on(&#39;click&#39;, function(params){ let myparam = params.seriesName; //获取点击的值 ds_setParam(&#39;参数名&#39;, myparam); //填写你的数据集的SQL设定中对应的参数名 ds_setParam(&#39;参数名2&#39;, myparam2); //你可以赋值给多个参数 ds_refresh(3); //3 为你要刷新图形序号 }); 函数方法说明 ds_setParam(&#39;参数名&#39;, 参数值) //此方法将自动判断当参数值为空,null或0时, 删除参数回到初始未传参状态 //所以请注意此方法无法传递参数空,null及0, 如需传递请将0转化成字符 //如果你的参数中存在非法字符如&amp;=, 你可以使用js的encodeURIComponent函数进行转义后赋值 你还可以实现钻取到另外一个报表 myChart__name__." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/" /><meta property="article:section" content="docs" />
<title>图形联动钻取 | Smartchart开发手册</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css" integrity="sha256-xYKS02sYtnVoCrm66iApIEU3uDnqcvJYdG7A8yzo1sg=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.ab069dde5ce91bbd3af2c528f16e7644e729ffde98f61e525463d6d716451ac7.js" integrity="sha256-qwad3lzpG7068sUo8W52ROcp/96Y9h5SVGPW1xZFGsc=" crossorigin="anonymous"></script>
<script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2&#43;Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC&#43;NdcPIvZhzk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Smartchart开发手册</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul>
<li>
<a href="/docs/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/" class="">关于我们</a>
</li>
<li>
<a href="/docs/%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5/" class="">设计理念</a>
</li>
<li>
<input type="checkbox" id="section-c354321856ed6feb84c1b4323285de46" class="toggle" />
<label for="section-c354321856ed6feb84c1b4323285de46" class="flex justify-between">
<a role="button" class="">1.基础操作</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%93%E4%B8%9A%E7%89%88%E8%AF%B4%E6%98%8E/" class="">专业版本说明</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">第一个仪表盘</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%8D%E6%9D%82%E6%8A%A5%E8%A1%A8/" class="">第一个复杂报表</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA3D%E5%9C%BA%E6%99%AF/" class="">第一个3D场景</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AAAI%E5%9C%BA%E6%99%AF/" class="">第一个AI场景</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%B8%8A%E7%BA%BF%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">第一个上线数据集</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/" class="">第一个大屏模板转化</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5%E6%B1%A0/" class="">创建连接池</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF/" class="">应用模板</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86/" class="">权限管理</a>
</li>
<li>
<input type="checkbox" id="section-ebbdf386fef5a4b61debc89d61d0dadf" class="toggle" />
<label for="section-ebbdf386fef5a4b61debc89d61d0dadf" class="flex justify-between">
<a role="button" class="">Vue相关</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/" class="">使用 Vue</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/" class="">Element Ui</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/" class="">Data V应用</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-5bb75c87734dfbe4db2b79fa99d34f85" class="toggle" />
<label for="section-5bb75c87734dfbe4db2b79fa99d34f85" class="flex justify-between">
<a role="button" class="">不太重要</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E4%B8%BB%E9%A2%98%E5%BA%94%E7%94%A8PRO/" class="">主题应用 Pro</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E5%A4%8D%E5%88%B6%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">复制仪表盘</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-54fee82a365f217fe67a17292f7959e5" class="toggle" />
<label for="section-54fee82a365f217fe67a17292f7959e5" class="flex justify-between">
<a role="button" class="">2.数据集说明</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">数据集开发界面</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/SQL%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Sql数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%95%B0%E6%8D%AE%E5%88%B7%E6%96%B0/" class="">数据集数据刷新</a>
</li>
<li>
<input type="checkbox" id="section-17dce050c02e560c36fb8bcb52fc8432" class="toggle" />
<label for="section-17dce050c02e560c36fb8bcb52fc8432" class="flex justify-between">
<a role="button" class="">特殊数据源</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/API%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Api数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E4%BD%BF%E7%94%A8EXCEL%E6%95%B0%E6%8D%AE/" class="">使用 Excel数据</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Python%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Python数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">自定义数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/webSocket%E6%96%B9%E5%BC%8F/" class="">Web Socket方式</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Elasticsearch%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Elasticsearch数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/JDBC%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Jdbc数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/kafka%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Kafka数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/mongodb%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Mongodb数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/promitheus%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Promitheus数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Redis%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Redis数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/sqlalchemy%E8%BF%9E%E6%8E%A5/" class="">Sqlalchemy连接</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">邮件发送数据源</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-b696a5333fb0b6aa0ada2335e5fe864c" class="toggle" />
<label for="section-b696a5333fb0b6aa0ada2335e5fe864c" class="flex justify-between">
<a role="button" class="">数据集形态</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">共享数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%87%92%E5%8A%A0%E8%BD%BD/" class="">数据集懒加载</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-c5a4ac1635ece2dfef28e23678ea9e21" class="toggle" />
<label for="section-c5a4ac1635ece2dfef28e23678ea9e21" class="flex justify-between">
<a role="button" class="">3.图形开发</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2/" class="">基础图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%AE%A1%E7%90%86%E5%9B%BE%E5%BD%A2/" class="">管理图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/Echarts%E7%BB%84%E4%BB%B6/" class="">Echarts组件</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/HTML%E7%BB%84%E4%BB%B6/" class="">Html组件</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E8%B0%83%E8%AF%95%E6%97%A5%E5%BF%97/" class="">调试日志</a>
</li>
<li>
<input type="checkbox" id="section-8b7ef748294c9611ad2ef758768793c4" class="toggle" />
<label for="section-8b7ef748294c9611ad2ef758768793c4" class="flex justify-between">
<a role="button" class="">函数方法</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/%E5%9B%BE%E5%BD%A2%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%87%BD%E6%95%B0/" class="">图形端数据函数</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/Jquery%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" class="">Jquery遍历方法</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-4e8eda9dcb8eb0bfa033731d4401df15" class="toggle" />
<label for="section-4e8eda9dcb8eb0bfa033731d4401df15" class="flex justify-between">
<a role="button" class="">特殊图形</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/LineUp%E5%9B%BE%E5%BD%A2/" class="">Line Up图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E4%BD%BF%E7%94%A8%E5%9B%BE%E6%A0%87/" class="">使用图标</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8/" class="">无缝滚动</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2%E5%8A%A0%E8%BD%BD/" class="">特殊图形加载</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-30aee618b2f055fbebe03b9acabc9330" class="toggle" />
<label for="section-30aee618b2f055fbebe03b9acabc9330" class="flex justify-between">
<a role="button" class="">Element Ui组件</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/ElementUI%E7%BB%84%E4%BB%B6/%E5%B8%A6%E5%88%86%E9%A1%B5%E7%9A%84%E8%A1%A8%E6%A0%BC/" class="">带分页的表格</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-478b5d3161d3129d62529b01d6fb834c" class="toggle" />
<label for="section-478b5d3161d3129d62529b01d6fb834c" class="flex justify-between">
<a role="button" class="">4.布局说明</a>
</label>
<ul>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%B8%83%E5%B1%80%E6%8C%87%E5%BC%95/" class="">布局指引</a>
</li>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%AF%B9%E9%BD%90/" class="">拖拽自动对齐</a>
</li>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%88%A0%E9%99%A4%E5%AE%B9%E5%99%A8/" class="">删除容器</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-86bbf1d771d855758065f951675b7ee7" class="toggle" checked />
<label for="section-86bbf1d771d855758065f951675b7ee7" class="flex justify-between">
<a role="button" class="">5.参数及联动钻取</a>
</label>
<ul>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/" class="">参数编写方法</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/" class="active">图形联动钻取</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/" class="">筛选器指南</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/" class="">组件自定义联动</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-1a4301e6dac08bd3bdb48c3500ec971d" class="toggle" />
<label for="section-1a4301e6dac08bd3bdb48c3500ec971d" class="flex justify-between">
<a role="button" class="">6.进阶开发 Pro</a>
</label>
<ul>
<li>
<input type="checkbox" id="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="toggle" />
<label for="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="flex justify-between">
<a role="button" class="">低代码开发</a>
</label>
<ul>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">模板开发界面</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/" class="">快捷开发</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/" class="">上传资源文件</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/" class="">边框与装饰</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" class="">样式快速上手</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/" class="">ID E开发模式</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/" class="">动画效果</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="">编辑器快捷键</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-2b5b070b11b526d911f2143b53347842" class="toggle" />
<label for="section-2b5b070b11b526d911f2143b53347842" class="flex justify-between">
<a role="button" class="">数据服务</a>
</label>
<ul>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1%E8%AE%BE%E5%AE%9A/" class="">数据服务设定</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/" class="">数据服务 API</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/" class="">数据下载</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/" class="">数据填报</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/" class="">后台 Api刷新</a>
</li>
</ul>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/" class="">备份恢复及版本</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/" class="">自定义首页</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E9%9B%86%E6%88%90AI%E7%94%9F%E6%88%90/" class="">集成 Ai生成</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-bfe0709421fcc9cc6742d70724a0841d" class="toggle" />
<label for="section-bfe0709421fcc9cc6742d70724a0841d" class="flex justify-between">
<a role="button" class="">7.报表嵌入</a>
</label>
<ul>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E7%AE%80%E5%8D%95%E5%B5%8C%E5%85%A5/" class="">简单嵌入</a>
</li>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/" class="">单点登录</a>
</li>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%B5%8C%E5%85%A5/" class="">单页面嵌入</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-50ddcd837bca405840b973f89ee4c795" class="toggle" />
<label for="section-50ddcd837bca405840b973f89ee4c795" class="flex justify-between">
<a role="button" class="">8. Django应用</a>
</label>
<ul>
<li>
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/%E5%B5%8C%E5%85%A5Django-Apps/" class="">嵌入 Django Apps</a>
</li>
<li>
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/FAQ/" class="">Faq</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="toggle" />
<label for="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="flex justify-between">
<a role="button" class="">9. Jupyter应用</a>
</label>
<ul>
<li>
<a href="/docs/9.Jupyter%E5%BA%94%E7%94%A8/Jupyter%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95/" class="">Jupyter中使用指引</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="toggle" />
<label for="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="flex justify-between">
<a role="button" class="">10.其它</a>
</label>
<ul>
<li>
<a href="/docs/10.%E5%85%B6%E5%AE%83/FAQ/" class="">Faq</a>
</li>
<li>
<a href="/docs/10.%E5%85%B6%E5%AE%83/%E8%AF%95%E7%94%A8%E6%BF%80%E6%B4%BB%E8%AF%B4%E6%98%8E/" class="">试用激活说明</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-1221ac066d992a43b363728eac9711d8" class="toggle" />
<label for="section-1221ac066d992a43b363728eac9711d8" class="flex justify-between">
<a role="button" class="">11.部署指南</a>
</label>
<ul>
<li>
<input type="checkbox" id="section-df28c15db9b442124658f06e614fc60b" class="toggle" />
<label for="section-df28c15db9b442124658f06e614fc60b" class="flex justify-between">
<a role="button" class="">Linux</a>
</label>
<ul>
<li>
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
</li>
<li>
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/SQLite3%E7%89%88%E6%9C%AC%E9%94%99%E8%AF%AF/" class="">Sqlite3版本错误</a>
</li>
<li>
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E7%94%9F%E4%BA%A7%E9%83%A8%E7%BD%B2/" class="">生产部署</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-1c911073b1023b05de57d665aa6300d6" class="toggle" />
<label for="section-1c911073b1023b05de57d665aa6300d6" class="flex justify-between">
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Windows/" class="">Windows</a>
</label>
<ul>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://www.smartchart.cn/" target="_blank" rel="noopener">
官网
</a>
</li>
<li>
<a href="https://gitee.com/smartchart/smartchart" target="_blank" rel="noopener">
Gitee
</a>
</li>
</ul>
</nav>
<script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>图形联动钻取</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#数据集准备">数据集准备</a></li>
<li><a href="#常规方法">常规方法</a></li>
<li><a href="#高级定制方法">高级定制方法</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h3 id="数据集准备">
数据集准备
<a class="anchor" href="#%e6%95%b0%e6%8d%ae%e9%9b%86%e5%87%86%e5%a4%87">#</a>
</h3>
<ul>
<li>在需要进行联动的数据集中SQL写法请参考&quot;参数编写方法&quot;章节</li>
</ul>
<pre tabindex="0"><code>select ... from tablename
/* where xxxx = &#39;$参数名&#39; */
</code></pre><ul>
<li>建意观看视屏比较容易理解:
<a href="https://www.bilibili.com/video/BV1ra411X7RM">数据联动说明</a></li>
</ul>
<h3 id="常规方法">
常规方法
<a class="anchor" href="#%e5%b8%b8%e8%a7%84%e6%96%b9%e6%b3%95">#</a>
</h3>
<ul>
<li>
<p>比如需要点击0号图形, 指定其它图形联动</p>
</li>
<li>
<p>只需要打开0号图形的数据集编辑页面, 点击标题的位置
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2021/1221/172146_4e75a674_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></p>
</li>
<li>
<p>然后输入相关的参数即可, 以下为sample
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2021/1221/172502_167e5e1f_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></p>
</li>
<li>
<p>参数值设定的方法, 你可以先留空, 然后保存, F12打开浏览器调试方法</p>
</li>
<li>
<p>点击0号图形你需要点击的动作, 可以在调试窗口的console看到输入的log</p>
</li>
<li>
<p>比如我们需要传递的参数值是&quot;廉颇&quot;, 那么取数据的方法就是data.name, 你把这个填入即可
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2021/1221/173008_8e564751_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></p>
</li>
<li>
<p>这样就实现按所选数据或所选系列钻取/联动了, <strong>重新点击当前所选</strong>, 恢复原来的</p>
</li>
</ul>
<blockquote>
<p>在图形编辑器中, 可以使用函数 ds_param(&lsquo;参数名&rsquo;) 来获取传入的参数值</p>
</blockquote>
<h3 id="高级定制方法">
高级定制方法
<a class="anchor" href="#%e9%ab%98%e7%ba%a7%e5%ae%9a%e5%88%b6%e6%96%b9%e6%b3%95">#</a>
</h3>
<ul>
<li>如有更多个性化需求,可在需要点击的图形中加入以下动作响应用代码</li>
<li>仅需修改的是<strong>序号</strong>和<strong>参数名</strong></li>
<li>比如当图形被点击时, 传入多个参数进行联动</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">myChart__name__</span>.<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click&#39;</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">params</span>){
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">myparam</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">params</span>.<span style="color:#a6e22e">seriesName</span>; <span style="color:#75715e">//获取点击的值
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">ds_setParam</span>(<span style="color:#e6db74">&#39;参数名&#39;</span>, <span style="color:#a6e22e">myparam</span>); <span style="color:#75715e">//填写你的数据集的SQL设定中对应的参数名
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">ds_setParam</span>(<span style="color:#e6db74">&#39;参数名2&#39;</span>, <span style="color:#a6e22e">myparam2</span>); <span style="color:#75715e">//你可以赋值给多个参数
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#a6e22e">ds_refresh</span>(<span style="color:#ae81ff">3</span>); <span style="color:#75715e">//3 为你要刷新图形序号
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>});
</span></span></code></pre></div><ul>
<li>函数方法说明</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">ds_setParam</span>(<span style="color:#e6db74">&#39;参数名&#39;</span>, <span style="color:#a6e22e">参数值</span>)
</span></span><span style="display:flex;"><span><span style="color:#75715e">//此方法将自动判断当参数值为空,null或0时, 删除参数回到初始未传参状态
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">//所以请注意此方法无法传递参数空,null及0, 如需传递请将0转化成字符
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">//如果你的参数中存在非法字符如&amp;=, 你可以使用js的encodeURIComponent函数进行转义后赋值
</span></span></span></code></pre></div><ul>
<li>你还可以实现钻取到另外一个报表</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#a6e22e">myChart__name__</span>.<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click&#39;</span>, <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">params</span>) {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">myparam</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">`&amp;param={&#34;参数名&#34;: &#34;</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">params</span>.<span style="color:#a6e22e">seriesName</span><span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;}`</span>;
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//拼成url并传参，具体参考数据集说明中的数据联动url传参的方法
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">myurl</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;/echart/?type=目标报表名&#39;</span><span style="color:#f92672">+</span> <span style="color:#a6e22e">myparam</span>;
</span></span><span style="display:flex;"><span> window.<span style="color:#a6e22e">open</span>(<span style="color:#a6e22e">myurl</span>,<span style="color:#e6db74">&#39;_blank&#39;</span>,<span style="color:#e6db74">&#39;toolbar=no,scrollbar=no,top=100,left=100,width=800,height=500&#39;</span>);
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></div></article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<div>
<a class="flex align-center" href="https://gitee.com/smartchart/smartchartDoc/edit/master/content/docs/5.%e5%8f%82%e6%95%b0%e5%8f%8a%e8%81%94%e5%8a%a8%e9%92%bb%e5%8f%96/%e5%9b%be%e5%bd%a2%e8%81%94%e5%8a%a8%e9%92%bb%e5%8f%96.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#数据集准备">数据集准备</a></li>
<li><a href="#常规方法">常规方法</a></li>
<li><a href="#高级定制方法">高级定制方法</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink