一、前言
数据可视化大屏被广泛认为是最直观、最有效的信息传递方式。以往使用诸如Echarts等第三方组件进行大屏开发时，虽然它们提供了丰富的图表元件和JS代码，但由于每位用户需求不同，大屏开发往往需要频繁修改代码，耗费大量时间。基于拖拉拽的方法能快速分析业务数据、创建仪表盘，同时也能构建数据可视化大屏。
南瓜树低代码平台的可视化组件，可以轻松构建数据大屏，目前南瓜树具备10类基础组件，12类图表组件，3类地图组件，1类3D组件；同时支持自定义扩展其他个性化的组件单元。
二、南瓜树可视化组件开发数据大屏的方式
方式一：
南瓜树可视化组件可以作为独立部署的可视化大屏项目使用。这种部署方式简单明了，但存在显著的弊端：如果需要定时动态刷新图表数据，就必须与业务逻辑紧密耦合。此外，在数据库访问压力较大时，直接从业务表中查询图表数据可能会影响业务的正常运行。
方式二：
结合南瓜树低代码平台使用，通过其低代码的ETL能力，定期将业务表数据的增量抽取到指定的数据库A中。所有可视化大屏的数据展示操作都在数据库A中进行，这样可以避免对业务的任何影响。因此，这种方式是较为推荐的选择。
三、可视化组件使用方式
一、基础组件
1、边框
边框组件可作为其他图表组件的一个容器，将其他组件放入边框容器中，起到修饰美观的作用。
2、文字框
文字框用于展示文本信息
SELECT g.`group_name` FROM `design_img_group` g WHERE g.`id`='1456457428993859585';
3、走马灯
上传多张图片，对多张图片进行动态轮播的效果
4、按钮
按钮显示的数据来源有三种方式：静态数据、动态sql数据、动态接口数据；使用方式与文本框一致。
5、图片
可上传一张图片展示对应的图片信息来进行展示，点击可进行放大操作
6、酷炫装饰
作为一个动态装饰用途，可实现动态的一个效果
7、数字翻牌器
作为一个时钟翻牌倒计时最为合适。
数据格式：xxx,xxx
SELECT CONCAT(DATE_FORMAT(NOW(),'%H'),',',DATE_FORMAT(NOW(),'%s')) FROM DUAL;
8、进度池
作为百分比进度条展示，使用方式与文本框一致。但返回的数据必须数字
9、iframe
作为一个嵌入式页面，可将其他网页嵌入到iframe中进行展示
10、胶囊柱图
--先创建数据视图CREATE VIEW VIEW_PIE ASSELECTCONCAT('[',GROUP_CONCAT(CONCAT('{"value":',T.T_VALUE,',"name":"',T.T_NAME,'"}')),']')FROM T_PIE_CHART T ORDER BY T.`T_VALUE`--使用视图获取数据SELECT * FROM VIEW_PIE
二、图表组件
11、柱状图
属性
柱类型：有普通柱状图、象形柱状图。
标题位置：有right、left、center三种位置可配置；
SELECT CONCAT('{"xData":"',GROUP_CONCAT(T.WEEK_INFO),'","yData": "',GROUP_CONCAT(T.WEEK_DATA),'"}') FROM T_BAR_CHART T;
12、立体柱状图Y4
属性
标题位置：有right、left、center三种位置可配置；
SELECT CONCAT('{"xData":"',GROUP_CONCAT(T.WEEK_INFO),'","yData": "',GROUP_CONCAT(T.WEEK_Y1),'","yData2": "',GROUP_CONCAT(T.WEEK_Y2),'","yData3": "',GROUP_CONCAT(T.WEEK_Y3),'","yData4": "',GROUP_CONCAT(T.WEEK_Y4),'"}') FROM T_BAR_CHART T;
13、立体柱状图Y3
属性
标题位置：有right、left、center三种位置可配置；
SELECT CONCAT('{"xData":"',GROUP_CONCAT(T.WEEK_INFO),'","yData": "',GROUP_CONCAT(T.WEEK_Y1),'","yData2": "',GROUP_CONCAT(T.WEEK_Y2),'","yData3": "',GROUP_CONCAT(T.WEEK_Y3),'"}') FROM T_BAR_CHART T;
14、立体柱状图Y2
属性
标题位置：有right、left、center三种位置可配置；
SELECT CONCAT('{"xData":"',GROUP_CONCAT(T.WEEK_INFO),'","yData": "',GROUP_CONCAT(T.WEEK_Y1),'","yData2": "',GROUP_CONCAT(T.WEEK_Y2),'"}') FROM T_BAR_CHART T;
15、饼图
属性
图例位置(X):设置图例位置，可以是顶部或者是底部或者是中间：left、right、center
图例位置(Y):设置图例位置在顶部还是底部：bottom、top、center
大饼颜色：根据饼图数据的大小设置对应的颜色
CREATE VIEW VIEW_PIE ASSELECTCONCAT('[',GROUP_CONCAT(CONCAT('{"value":',T.T_VALUE,',"name":"',T.T_NAME,'"}')),']')FROM T_PIE_CHART T ORDER BY T.`T_VALUE`;SELECT * FROM VIEW_PIE
16、时钟
默认展示当前服务器时间，可设置时针颜色、表盘狂赌、表盘字体、字体边距、刻度边距
17、滚动表格
属性
表头背景颜色
奇数行背景色
偶数行背景色
显示行数
轮播时间间隔
表头高度
滚动方式：单列滚动、全表滚动
CREATE OR REPLACE VIEW VIEW_TABLE_RUN AS SELECTCONCAT('{"data":[',GROUP_CONCAT('["',T.T_NAME,'","',T.T_VALUE,'","',T.ID,'"]'),'],"header":["姓名","年龄","性别"]}')FROM T_PIE_CHART T;SELECT * FROM VIEW_TABLE_RUN;
18、水位图
属性
颜色1：顶部颜色
颜色2：底部颜色
样式
波浪数量
波浪高度
波浪透明度
信息格式：{value}%
19、折线图
SELECT CONCAT('{"xData":"',GROUP_CONCAT(T.`T_NAME`),'","yData": "',GROUP_CONCAT(T.`T_VALUE`),'"}') FROM T_PIE_CHART T;
20、动态环图
CREATE OR REPLACE VIEW VIEW_AROUND_CHART ASSELECTCONCAT('[',GROUP_CONCAT(CONCAT('{"name":"',T.T_NAME,'","value":',T.T_VALUE,'}')),']')FROM T_PIE_CHART T ORDER BY T.`T_VALUE`;SELECT * FROM VIEW_AROUND_CHART
21、仪表盘
SELECT t_value FROM T_PIE_CHART WHERE id=4;
22、基础K线图
数据
yData的数据 组成：开盘价 、 收盘价、下影线、上影线
CREATE VIEW VIEW_K_LINE ASSELECT CONCAT('{"xData":"',GROUP_CONCAT(T.`t_date`),'","yData": [',GROUP_CONCAT(CONCAT('[',t.`K_VALUE`,',',t.`S_VALUE`,',',t.`TOP_LINE`,',',t.`BOT_LINE`,']')),']}') FROM t_k_line T ORDER BY t.t_date;
三、地图组件
23、渐变地图
CREATE VIEW VIEW_MAP_CHART ASSELECTCONCAT('[',GROUP_CONCAT(CONCAT('{"name":"',T.`province_name`,'","value":',T.`t_value`,'}')),']')FROM T_MAP_CHART T ORDER BY T.`T_VALUE`
24、迁徙地图
CREATE OR REPLACE VIEW VIEW_MAP_QX ASSELECTCONCAT('{"start":[',f.`longitude`,',',f.`latitude`,']',',',(SELECTCONCAT('"end":[',GROUP_CONCAT(CONCAT('{"name":"',T.`province_name`,'","value":',T.`t_value`,'}')),']') AS DATASFROM T_MAP_CHART T WHERE T.`province_name` IN('上海')),'}')FROM `t_map_lon_lat` f WHERE f.`province_name`='北京';
25、坐标地图
可根据动态实时计算2个坐标点的位置，用于跟踪、监督使用
create view view_test_two_point asSELECTCONCAT('[{"position":[121.538065,31.127007]},{"position":[121.535973,',(31.1 + (RAND() * 0.1)),']}]') ;select * from view_test_two_point
四、3D组件
26、VR全景图
每个全景图都由6个面组成，上下、左右、前后；因此需要6个图片。这里以一个全景看房为例做一个VR全景图效果。
原文作者：小南瓜开发平台；如有侵权，请联系管理员删除。
