首页 前端知识 【乐吾乐大屏可视化组态编辑器】动态图表

【乐吾乐大屏可视化组态编辑器】动态图表

2024-09-12 23:09:50 前端知识 前端哥 565 496 我要收藏

动态图表

在线使用:https://v.le5le.com/ 

1. 建立数据列表

左侧选择数据栏,列表栏建立数据(变量)列表。具体查看: 数据绑定

2.绑定数据点

官方图表默认都开启了模拟数据,可以在数据-列表中取消“开启全局数据模拟”。

① 选中折线图图元,右侧切换到外观,点击属性-echarts配置按钮,展开代码块。

如图所示是echarts官方的options属性配置格式。我们可以直接给series下的data数据直接一对一绑定数据点。

② 选择数据面板,鼠标移入“添加动态数据”,选择自定义。

③ 输入数据名、属性名,选择类型后点击确定。

属性名支持通过点运算符进行多层级定位,例如我们想给 pen.echarts.option.series[0].data[0] 这个数据值绑定变量,那么属性名可以填写 "echarts.option.series.0.data.0"。大屏中所有图元都可以按照这种方式直接给一个数据值绑定一个数据点。

当然你想统一修改当前charts所有数据,也可以填写 "echarts.option.series.0.data”,但是需要保证推送的数据也是一个数值数组的形式。

官方图表都已经添加了动态数据,我们可以点击编辑查看当前的属性名。

④ 给建立好的动态数据绑定变量。

⑤ 表格也是一样的逻辑,如果我们想给单元格绑定数据,属性名可以填写 data.行索引.列索引,然后给这个属性去绑定变量。

如果是给某一行绑定,可以给data.行索引,属性绑定变量,注意变量推送的数据需要是一个数组。

3. 建立通信连接

左侧选择数据栏,点击数据获取,根据需求建立通信连接,具体查看: 数据绑定

注意:官方测试接口(/api/device/data?mock=1)返回中有dataId,这是是2d的格式,大屏的格式是id!!!

点击完成,可以观察到图表动态展示了

-----------------------------------------------------------------------分隔符---------------------------------------------------------------------------------------------------------------------

以下为老UI页面创建方式

1. 建立变量列表

顶部菜单栏选择“数据管理”按钮,变量列表栏建立变量列表。具体查看: 数据绑定

2. 绑定数据点

官方图表默认都开启了模拟数据,可以在数据管理-变量列表中取消“开启模拟数据”。

① 选中折线图图元,切换到右侧“数据”面板,点击“echarts配置”按钮展开代码块。

如图所示是echarts官方的options属性配置格式。我们可以直接给series下的data数据直接一对一绑定数据点。

② 鼠标移入“添加动态数据”,选择自定义。

③ 输入数据名、属性名,选择类型后点击确定。

属性名支持通过点运算符进行多层级定位,例如我们想给 pen.echarts.option.series[0].data[0] 这个数据值绑定变量,那么属性名可以填写 "echarts.option.series.0.data.0"。大屏中所有图元都可以按照这种方式直接给一个数据值绑定一个数据点。

当然你想统一修改数据,也可以填写 "echarts.option.series.0.data”,但是需要保证推送的数据也是一个数值数组的形式。

官方图表都已经添加了动态数据,我们可以点击编辑查看当前的属性名。

④ 给建立好的动态数据绑定变量。

3. 建立通信连接

顶部菜单栏选择“数据管理”,“数据获取”标签页建立通信连接,具体查看: 数据绑定

点击完成,可以观察到图表动态展示了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18155.html
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!