太极河图数据可视化平台

# 案例

# 1. 组件带动画显示隐藏切换

点击按钮实现组件显示隐藏的动画效果。

所需组件： 两个通用标题组件；任意组件，此处以饼图组件为例。

  • 1.打开设计器，配置好组件后点击菜单栏上的节点编程按钮。

点击事件

  • 2.进入节点编程界面，从左侧节点列表拖拽出要编辑的组件。

  • 3.按照下图连接对应组件的事件与动作。

点击事件

  • 4.在显示隐藏连接线上单击，右侧会弹出动作属性面板，配置所需的动画效果。

点击事件

  • 5.预览，查看效果。

点击事件

# 2. 配置数据筛选

通过节点编程配置动态资源数据后实现二次过滤。

  1. 图表展示过滤后的数据。

所需组件： 任意图表组件，此处以饼图组件为例。

  • 1.打开设计器拖拽出饼图组件，配置好数据。然后点击菜单栏上的节点编程按钮。

数据筛选

  • 2.进入节点编程界面，从左侧节点列表拖拽出要编辑的组件。

  • 3.按照下图连接组件的事件与动作。

数据筛选

代码如下：

return [
  {
    x: data[0].x,
    y: data[0].y,
  },
];
  • 4.预览，查看效果。

数据筛选

# 3. 动态控制组件样式

使用节点编程，在通用标题点击事件中，将通用标题抛出的数据 title 传递给图表的导入数据接口，然后在图表配置转换完后导入图表配置，根据导入数据接口的数据判断图表样式。

  1. 数据为 10%，水位图水波在低位，为红色。

  2. 数据为 67%，水位图水波在中位，为黄色。

  3. 数据为 99%，水位图水波在高位，为绿色。

所需组件： 三个通用标题组件；任意组件，此处以水位图组件为例。

动态控制组件样式

  • 1.打开设计器，按照下图配置好组件。通用标题只显示 title 请前往数据模板使用中查看，然后点击菜单栏上的节点编程按钮。

动态控制组件样式

  • 2.进入节点编程界面，从左侧节点列表拖拽出要编辑的组件。

  • 3.按照下图连接对应组件的事件与动作，并添加两个逻辑节点-转换器。此处分别给每个转换器重命名来区分它们的功能。

动态控制组件样式

  • 4.在转换器中写处理方法。在处理方法中判断导入数据的值，0%~15%为红色，16%~70%为黄色，71%~100%为绿色。

    • 导入数据接口的代码如下：
      return [
  {
    value: data.value,
    total: 100,
  },
];
    • 导入图表配置的代码如下：
      let color = {};
const value = data.series[0].data[0];
if (value < 0.15) {
  data.series[0].color[0] = {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(242, 5, 5, 0.59)",
      },
      {
        offset: 1,
        color: "rgba(242, 5, 5, 1)",
      },
    ],
    global: false,
  };
} else if (value >= 0.15 && value <= 0.7) {
  data.series[0].color[0] = {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(242, 230, 5, 0.59)",
      },
      {
        offset: 1,
        color: "rgba(242, 214, 5, 1)",
      },
    ],
    global: false,
  };
} else if (value > 0.7 && value <= 1) {
  data.series[0].color[0] = {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(5, 242, 33, 0.59)",
      },
      {
        offset: 1,
        color: "rgba(5, 242, 33, 1)",
      },
    ],
    global: false,
  };
}
data.series[0].label.formatter = "资源剩余\n\n" + value * 100 + "%";
return data;

  • 5.预览，查看效果。

动态控制组件样式

# 4. 在请求数据接口时传递动态参数

利用节点编程，在按钮组的事件中，将按钮组抛出的数据 text 传递给图表的请求数据接口作为过滤参数,使组件数据跟随参数改变而变化。

  1. 点击按钮组，图表展示相应参数的数据。

所需组件： 按钮组组件；任意组件，此处以饼图组件为例。

  • 首先要配置动态数据。若需要可以在表里储存一个参数栏用来传参。 点击事件

  • 1.打开设计器，按照下图配置好组件。

    点击事件

  • 2.进入节点编程界面，从左侧节点列表拖拽出要编辑的组件。

  • 3.按照下图连接对应组件的事件与动作，并在连接线上添加一个转换器。

    点击事件

  • 4.参考右侧面板中的数据格式，在处理方法中敲入代码。

    点击事件

    代码如下：

    return {
  type1: data.text,
};
    • 5.预览，查看效果。

    点击事件

# 5. 实现弹出框效果

通过节点编程中显示隐藏动作时可添加动画效果使组合在点击时弹出。

  1. 点击“显示”使弹出框显示。
  2. 点击右上角错号或背景使弹出框关闭。

所需组件： 一个通用标题组件；任意组件，此处以饼图组件为例；三个按钮组组件。

  • 1.制作弹出框。

    • 1.右上角错号。使用按钮组组件，配置如下。

    点击事件

    • 2.白底。使用按钮组组件，配置如下。

    点击事件

    • 3.遮罩底。使用按钮组组件，配置如下。

    点击事件

    • 4.想展示的组件，这里使用饼图。然后按照下图位置将四个组件的层级顺序依次摆好并组合。

    点击事件

    • 5.然后将弹出层组合隐藏。

    点击事件

  • 2.制作“点击显示”按钮，使用通用标题组件。

    点击事件

  • 3.进入节点编程界面，从左侧拖拽节点按照下图配置。

    点击事件

    转换器中的代码如下

    return {
  option: {
    btn: {
      initTab: 0,
    },
  },
};

  • 4.在连接到动作-显示/隐藏的连线上单击，选择弹出层的动画效果。

点击事件

  • 5.预览，查看效果。

    点击事件

# 6. 在现有图表基础上添加 Echarts 属性配置

设计器中配置完成后在节点编程里进行二次属性配置。

所需组件： 任意组件，此处以柱状图为例。

转换器

  • 1.打开设计器，拖拽出柱状图组件到画布中，然后后点击菜单栏上的节点编程按钮。

  • 2.从节点列表中拖出柱状图组件到画布中，并将事件-图表配置转换完成后 与 动作-导入图表配置连线。

  • 3.在连接线上添加转换器，并在右侧面板处理方法中敲入代码。

转换器 代码如下：

data.series[0].data[0].itemStyle = {
  color: "#FF8700",
};
data.series[0].data[1].itemStyle = {
  color: "#ffc300",
};
data.series[0].data[2].itemStyle = {
  color: "#00e473",
};
data.series[0].data[3].itemStyle = {
  color: "#009DFF",
};
return data;

提示

配置其他样式具体请前往 Echarts 官方文档中查看。

  • 4.预览，查看效果。

转换器

# 7. 扩展 Echarts 组件

从 Echarts 官网找到所需 Echarts 组件，复制其 option 内容，通过节点编程使图表配置转换完成后再次导入图表配置，完成扩展。

所需组件： 任意组件。

  • 1.打开设计器，拖拽出任意组件到画布中，然后点击菜单栏上的节点编程按钮。

  • 2.从节点列表中把组件拖拽到画布中，并将事件-图表配置完成后与动作-导入图标配置连线，在线上新增转换器。

转换器

  • 3.在 Echarts 官网中找到所需组件，复制 option 中内容。

转换器

  • 4.粘贴到 return 位置。预览，查看效果。

转换器

# 8. 图表上卷下钻

通过节点编程实现多个组件同时上卷下钻。

  1. 点击中国地图数据下钻，饼图跟着下钻。
  2. 点击中国地图图形元素上卷，饼图跟着上卷。
  • 1.打开设计器，拖拽出地图组件和饼图组件到画布中，配置相同的地图数据资源，并打开上卷下钻，饼图设置下钻范围-市级-区县。

上卷下钻

  • 2.点击菜单栏上的节点编程按钮，进入节点编程界面。

  • 3.从节点列表中把组件拖拽到画布中（中国地图需要点击其中的散点层），并将事件-当下钻时与动作-下钻连线、事件-当上卷时与动作-上卷连线，在线上新增转换器。

上卷下钻

  • 4.参考右侧面板中的数据格式，将上卷下钻所需的字段传入数据格式的 value 中。

    下钻代码如下：

    return {
  name: data.data,
};

    上卷代码如下：

    return {
  fieldName: data.triggerField.name,
  fieldAlias: data.triggerField.name,
};

  • 5.预览，查看效果。

上卷下钻

# 9. 利用全局节点打开链接

通过节点编程的全局节点跳转链接。

所需组件： 任意组件，此处以通用标题为例。

1.点击通用标题后跳转到百度网页。

  • 1.打开设计器，拖拽出通用标题组件到画布中，然后点击菜单栏上的节点编程按钮。

转换器

  • 2.从节点列表中把通用标题和全局节点拖拽到画布中，并将事件-点击事件与动作-打开链接连线，在线上新增转换器。

转换器

  • 3.参考右侧面板中的数据格式，复制到处理方法中，value 值可以是任意网址。此处默认打开百度网址。

转换器

  • 4.预览，查看效果

转换器

# 10. 实现实时数据相加结果

通过节点编程来计算实时数据之和。

  1. 使用 getLocalVar()方法获取临时变量，然后求和。
  2. 使用定时器实现实时数据变化。

所需组件： 数字卡片组件。

  • 1.打开设计器，拖拽出三个数字卡片组件到画布中，然后点击菜单栏上的节点编程按钮。

    实时数据相加

    1. 先实现两个数据相加功能。 进入节点编程界面，从左侧节点列表拖拽出要编辑的组件，和一个全局节点。

  • 3.按照下图连接对应组件的事件与动作。

    实时数据相加

  • 4.给两个加数在转换器中依照 data 参数字段提示分别设置临时变量值。

    实时数据相加

    代码如下：

    ```js
    return {
     "key1": data.value1
   };
   ```

  • 5.在导入数据接口的转换器中使用 getLocalVar() 方法来获取储存在临时变量值里的数据。

    实时数据相加

    代码如下：

    let a = getLocalVar("key1");
let b = getLocalVar("key2");
let c;
if (typeof a != "undefined" && typeof b != "undefined") {
  c = a + b;
}
if (typeof c != "undefined") {
  return {
    des: "相加结果",
    value: c,
  };
}
    1. 再实现随机生成数字相加的实时动态效果。 从左侧节点列表拖出剩下两个组件和一个定时器，然后按照下图连接对应组件的事件与动作。

    实时数据相加

    定时器配置如下：

    实时数据相加

  • 7.参考右侧面板中的数据格式，在转换器的处理方法中敲入代码。代码如下：

    return {
  des: "加数一",
  value1: Math.floor(Math.random() * 100),
};

    return {
  des: "加数二",
  value2: Math.floor(Math.random() * 100),
};

  • 8.预览，查看效果

实时数据相加

# 11. 定时器实现日期时间刷新

通过节点编程的定时器显示显示客户端时间和服务器时间。

  1. 使用定时器实现当前时间开始刷新和停止刷新。

所需组件： 通用标题组件。

# 1.使用定时器实现客户端时间刷新

  • 1.打开设计器，拖拽出三个通用标题组件到画布中，然后点击菜单栏上的节点编程按钮。

定时器

  • 2.进入节点编程界面，从左侧节点列表拖拽出要编辑的组件，和一个定时器。

  • 3.按照下图连接对应组件的事件与动作。

    定时器

    定时器配置如下：

    定时器

  • 4.参考右侧面板中的数据格式，在转换器的处理方法中敲入代码。代码如下：

    let now = new Date();
let year = now.getFullYear(); // 年
let month = now.getMonth() + 1; // 月
let day = now.getDate(); // 日

let hh = now.getHours(); // 时
let mm = now.getMinutes(); // 分
let ss = now.getSeconds(); // 秒

let clock = year + "-";

if (month < 10) clock += "0";
clock += month + "-";

if (day < 10) clock += "0";
clock += day + " ";

if (hh < 10) clock += "0";
clock += hh + ":";

if (mm < 10) clock += "0";
clock += mm + ":";

if (ss < 10) clock += "0";
clock += ss;

return {
  title: clock,
};

  • 5.预览，查看效果

定时器

# 2.使用定时器实现服务器端时间刷新

  • 1.首先新建一个 SQL 数据资源，并编写查询当前时间的 SQL 语句。

    定时器

SQL 语句如下：

 SELECT DATE_FORMAT(NOW(),'%Y-%m-%d  ') as cdata,DATE_FORMAT(NOW(),'%H:%i:%S') as ctime

  • 2.打开设计器，拖拽出三个通用标题组件到画布中，配置好展示时间的通用标题的数据资源。然后点击菜单栏上的节点编程按钮。

    定时器

  • 3.进入节点编程界面，从左侧节点列表拖拽出要编辑的组件，和一个定时器。

  • 4.按照下图连接对应组件的事件与动作。

    定时器

  • 5.预览，查看效果

定时器

# 12. 实现按钮组和轮播组件的绑定

所需组件： 按钮组；通用标题；任意组件，此处以饼图、环形饼图、南丁格尔玫瑰图为例。

# 1. 切换按钮组或轮播组件切换时另一个也跟着切换

    1. 打开设计器，拖拽出按钮组和几个需要轮播的组件到画布中，使需要轮播的组件对齐成组。

    轮播组件

    1. 点击图层中的“组”，按下图配置。

    轮播组件

    1. 在按钮组中存储轮播组件页数索引，实现点击按钮组，轮播组件跟着切换。只显示 text 请前往数据模板使用中查看,然后点击菜单栏上的节点编程按钮。

    轮播组件

    1. 进入节点编程界面，从左侧节点列表拖拽出要编辑的组件。
    1. 按照下图连接对应组件的事件与动作。

    轮播组件

    1. 在切换到某一页 转换器中敲入代码，代码如下：
return data.value; // 页数索引
    1. 在更新组件配置 转换器中敲入代码，实现点击轮播组件，按钮组跟着切换。代码如下：
return {
  option: {
    btn: {
      initTab: data.activeIndex + 1, // 当前选中按钮
    },
  },
};
    1. 预览，查看效果。

    轮播组件

# 2.使用键盘 ← 和 → 键实现轮播组件切换

在上面组件的基础上添加键盘自定义按键，切换轮播组件。

    1. 进入节点编程界面，从左侧节点列表中拖拽出键盘。
    1. 键盘配置。添加自定义按键列表，配置如下：

    轮播组件

    1. 然后将键盘按照下图与轮播组件连接。

    轮播组件

    1. 点击保存，查看预览。

# 3.使用定时器实现轮播组件启动轮播和停止轮播

在上面组件的基础上添加定时器，实现轮播组件启动轮播和停止轮播。

    1. 打开设计器，拖拽出两个通用标题，更改 title 内容。一个为开启轮播，另一个为停止轮播。

    轮播组件

    1. 进入节点编程界面，从左侧节点列表拖拽出 2 个新增的通用标题组件，和一个定时器。
    1. 按照下图连接对应组件的事件与动作。

    轮播组件

    1. 预览，查看效果。

    轮播组件

Last Updated: 5/6/2023, 2:16:04 PM

← 地图扩展 →