赞
踩
前言
数据驱动已经成为企业决策和业务优化的关键所在,在数字化时代,高效的数据分析与可视化呈现是实现智能决策的关键。利用低代码开发平台,企业可以快速构建满足业务需求的应用系统,实现对各类数据源的便捷接入。结合Echarts等可视化工具,复杂的数据信息能够以直观、富交互性的图表形式展现出来,帮助决策者更好地理解和洞察数据蕴含的价值。近年来,低代码开发平台和 Echarts 可视化工具的高速发展和有效融合,大幅缩短了从数据获取到数据驱动决策的周期,大大提升了分析效果和决策质量。
接下来小编将以葡萄城公司的企业级低代码开发平台——活字格为例,为大家介绍低代码是如何借助 Echarts 来构建图表和搭建可视化大屏。
环境准备
基础的 Echarts 图表使用
活字格中封装了一些常用的图表,比如柱状图,折线图等。
插入图表
这些图表的使用方法和 Excel 中的使用方法类似,仅需要将图表插入到页面中的相应位置即可。
修改图表
如果需要修改图表的内容,右击图表选择数据并修改数据来源即可。
Echarts 插件的使用
在活字格的最新版本中,增加了 Echarts 插件,详细使用方法如下:
安装活字格 Echarts 插件
首先在活字格设计器中安装 Echarts 插件。
创建数据库表
安装插件后,在活字格的数据库中新建一张【销售数据表】,并在里面添加 2 个字段【年份】和【销售额】,并添加一些数据。
创建 Echarts 单元格
创建完数据表之后,在页面上随便选一片区域设置成 Echarts 单元格,并且设置数据源,起名字【销售数据信息】,数据源中选择销售数据表的【年份】和【销售额】这2列。
紧接着小编需要对 Echarts 单元格的内容进行设置,点击 【Echarts 设置】
然后通过一些简单 Javascript 的代码设置图表的格式:
//获取数据库中的数据 const{ "年份": xAxisData, "销售额": yAxisData } = Forguncy Echarts Helper.splitDatasource(Context.销售数据信息); //设置横轴纵轴的数据源 option = { xAxis:{ type: "category, data: xAxisData }, yAxis:{ type:"value } series: [ { data: yAxisData, type: 'line' } ] };
显示效果如下,图表会随着销售额数据的进行而变化。
更多模板
上面使用一个 Echarts 插件简单地设计一个折线图的例子,除此之外,小编还用 Echarts 插件设计了很多的模板,如热力图、关系图、漏斗图、3D地图等,感兴趣的同学可以点击这里查看。
总结
低代码开发平台与Echarts可视化库的融合为智能可视化带来了全新的机遇和挑战。这种融合不仅简化了应用开发的过程,降低了技术门槛,还提供了强大的数据可视化能力,帮助用户更好地理解和分析数据。随着技术的不断演进,低代码与Echarts的融合将引领智能可视化领域的创新浪潮,为企业和组织提供更高效、智能的数据分析和决策支持。
此外,葡萄城的低代码开发平台活字格不仅具备强大的可视化开发能力,还集成了BI分析能力。当面临复杂的BI分析与可视化需求时,可以通过借助葡萄城的嵌入式BI工具Wyn商业智能软件来解决。通过将Wyn商业智能软件嵌入到活字格搭建的系统中,实现低代码开发与嵌入式BI分析的一体化解决方案,满足面临复杂BI系统开发的需求。这种一体化解决方案将提供更全面、综合的功能,帮助用户更好地处理复杂的数据分析和可视化需求。
扩展链接:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。