前言

    小南瓜的基础组件有10种，分别是：边框、文字框、走马灯、按钮、图片、酷炫装饰、数字翻拍器、进度池、iframe、胶囊柱图。

每种组件都有三种数据来源方式：静态数据、sql数据、外部API接口数据。

以下是小南瓜可视化的基础组件的使用教程，一起看看学习下吧！

一、基础组件

1、边框

边框组件可作为其他图表组件的一个容器，将其他组件放入边框容器中，起到修饰美观的作用。

2、文字框

文字框用于展示普通的文本信息，数据来源有：静态数据、动态数据；其中动态数据又分为：sql数据、外部接口数据。

静态数据配置

sql数据配置

编写sql，获取文本为：背景库 的数据展示

SELECT g.`group_name` FROM `design_img_group` g WHERE g.`id`='1456457428993859585';

数据平台动态接口配置

【根据数据格式自行定义API】

3、走马灯

上传多张图片，对多张图片进行动态轮播的效果。

4、按钮

按钮显示的数据来源有三种方式：静态数据、动态sql数据、动态接口数据；使用方式与文本框一致。

按钮同时也可作为超链接使用，点击可跳转到设置的对应页面；因此也用来作为一个应用的入口大屏展示

5、图片

可上传一张图片展示对应的图片信息来进行展示，点击可进行放大操作

6、酷炫装饰

作为一个动态装饰用途，可实现动态的一个效果

7、数字翻牌器

作为一个时钟翻牌倒计时最为合适。

数据格式：xxx,xxx

静态数据配置

动态sql配置

SELECT CONCAT(DATE_FORMAT(NOW(),'%H'),',',DATE_FORMAT(NOW(),'%s')) FROM DUAL;

动态接口配置

使用方式与文本框中的一致，创建一个接口，返回数据格式为: XXX,XXX的数据

8、进度池

作为百分比进度条展示，使用方式与文本框一致。但返回的数据必须数字

9、iframe

作为一个嵌入式页面，可将其他网页嵌入到iframe中进行展示

10、胶囊柱图

属性

数据

静态数据

动态数据(sql)

1、创建数据库表

CREATE TABLE `t_pie_chart` (

  `ID` int NOT NULL AUTO_INCREMENT,

  `T_NAME` varchar(100) COLLATE utf8mb4_general_ci DEFAULT NULL,

  `T_VALUE` float DEFAULT NULL,

  PRIMARY KEY (`ID`)

) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci

2、编写sql视图

CREATE VIEW VIEW_PIE AS

SELECT

CONCAT('[',

GROUP_CONCAT(CONCAT('{"value":',T.T_VALUE,',"name":"',T.T_NAME,'"}')),

']')

FROM T_PIE_CHART T ORDER BY T.`T_VALUE`

3、将视图贴入到图标组件sql框中

SELECT * FROM VIEW_PIE

4、效果图

动态数据(接口)

1、编写sql语句

SELECT T.`T_NAME` AS K_NAME,T.`T_VALUE` AS K_VALUE FROM T_PIE_CHART T

2、数据平台创建接口

3、输入接口地址：

http://localhost/design/data/Pie?ApiCode=2f36ab4f79ed41719162dce95a0465a4

演示环境：

http://qxsdcloud.com:3389/shejiqi/sjq/data/Pie?ApiCode=2f36ab4f79ed41719162dce95a0465a4