前言

    小南瓜的图表组件有12种，分别是：柱状图、立体柱状图Y4、立体柱状图Y3、立体柱状图Y2、饼图、时钟、滚动表格、水位图、折线图、动态环图、仪表盘、基础K线图。

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

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

11、柱状图

属性

柱类型：有普通柱状图、象形柱状图。

标题位置：有right、left、center三种位置可配置；

其他属性可根据需要再演示系统上自行玩耍

数据

数据类型支持：静态数据、接口、SQL三种数据类型

静态数据配置

静态数据的数据格式：

sql数据配置

1、创建数据库表

2、编写sql逻辑

3、将SQL配置进入到图表中，动态显示数据

动态接口数据配置

动态接口的调用方式与文字框的调用方式类似

1、在数据平台创建接口

注意：动态接口中定义的sql中的X轴必须是T_KEY, Y轴必须是T_VALUE

SELECT T.`WEEK_INFO` AS T_KEY,T.`WEEK_DATA` AS T_VALUE FROM T_BAR_CHART T

2、获取接口编码封装接口url请求参数

演示环境：

3、把2中的接口url贴入到图表中进行渲染

12、立体柱状图Y4

属性

标题位置：有right、left、center三种位置可配置；

其他属性可根据需要再演示系统上自行玩耍

数据

数据类型支持：静态数据、接口、SQL三种数据类型

静态数据配置

静态数据的数据格式：

sql数据配置

1、创建数据库表

2、编写sql逻辑

3、将SQL配置进入到图表中，动态显示数据

动态接口数据配置

动态接口的调用方式与文字框的调用方式类似

1、在数据平台创建接口

注意：动态接口中定义的sql中的X轴必须是T_KEY, Y轴必须是T_VALUEX的模式

SELECT T.`WEEK_INFO` AS T_KEY,

T.`WEEK_Y1` AS T_VALUE,

T.`WEEK_Y2` AS T_VALUE2,

T.`WEEK_Y3` AS T_VALUE3,

T.`WEEK_Y4` AS T_VALUE4

FROM T_BAR_CHART T                          

2、获取接口编码封装接口url请求参数

演示环境：

3、把2中的接口url贴入到图表中进行渲染

13、立体柱状图Y3

属性

标题位置：有right、left、center三种位置可配置；

其他属性可根据需要再演示系统上自行玩耍

数据

数据类型支持：静态数据、接口、SQL三种数据类型

静态数据配置

静态数据的数据格式：

sql数据配置

1、创建数据库表

2、编写sql逻辑

3、将SQL配置进入到图表中，动态显示数据

动态接口数据配置

动态接口的调用方式与文字框的调用方式类似

1、在数据平台创建接口

注意：动态接口中定义的sql中的X轴必须是T_KEY, Y轴必须是T_VALUEX的模式

SELECT T.`WEEK_INFO` AS T_KEY,

T.`WEEK_Y1` AS T_VALUE,

T.`WEEK_Y2` AS T_VALUE2,

T.`WEEK_Y3` AS T_VALUE3

FROM T_BAR_CHART T                          

2、获取接口编码封装接口url请求参数

演示环境：

3、把2中的接口url贴入到图表中进行渲染

14、立体柱状图Y2

属性

标题位置：有right、left、center三种位置可配置；

其他属性可根据需要再演示系统上自行玩耍

数据

数据类型支持：静态数据、接口、SQL三种数据类型

静态数据配置

静态数据的数据格式：

sql数据配置

1、创建数据库表

2、编写sql逻辑

3、将SQL配置进入到图表中，动态显示数据

动态接口数据配置

动态接口的调用方式与文字框的调用方式类似

1、在数据平台创建接口

注意：动态接口中定义的sql中的X轴必须是T_KEY, Y轴必须是T_VALUEX的模式

SELECT T.`WEEK_INFO` AS T_KEY,

T.`WEEK_Y1` AS T_VALUE,

T.`WEEK_Y2` AS T_VALUE2

FROM T_BAR_CHART T                          

2、获取接口编码封装接口url请求参数

演示环境：

3、把2中的接口url贴入到图表中进行渲染

15、饼图

属性

图例位置(X):设置图例位置，可以是顶部或者是底部或者是中间：left、right、center

图例位置(Y):设置图例位置在顶部还是底部：bottom、top、center

大饼颜色：根据饼图数据的大小设置对应的颜色

其他属性可以自行研究哈

数据

静态数据

动态数据(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                      

16、时钟

默认展示当前服务器时间，可设置时针颜色、表盘狂赌、表盘字体、字体边距、刻度边距

17、滚动表格

属性

表头背景颜色

奇数行背景色

偶数行背景色

显示行数

轮播时间间隔

表头高度

滚动方式：单列滚动、全表滚动

数据

静态数据

{"data":[["行1列1","行1列2","行1列3"],["行2列1","行2列2","行2列3"],["行3列1","行3列2","行3列3"],["行4列1","行4列2","行4列3"],["行5列1","行5列2","行5列3"],["行6列1","行6列2","行6列3"],["行7列1","行7列2","行7列3"],["行8列1","行8列2","行8列3"],["行9列1","行9列2","行9列3"],["行10列1","行10列2","行10列3"]],"header":["列1","列2","列3"]}

动态数据(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 OR REPLACE VIEW VIEW_TABLE_RUN AS SELECT

CONCAT('{"data":[',

GROUP_CONCAT('["',T.T_NAME,'","',T.T_VALUE,'","',T.ID,'"]'),

'],"header":["姓名","年龄","性别"]}')

FROM T_PIE_CHART T;

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

SELECT * FROM VIEW_TABLE_RUN

4、效果图

动态数据(接口)

1、编写sql语句

SELECT*FROMT_PIE_CHART T ;

2、创建接口

3、效果

http://localhost/design/data/Runtable?ApiCode=a4c3d34d04724d84820b312eb360752a

18、水位图

属性

颜色1：顶部颜色

颜色2：底部颜色

样式

波浪数量

波浪高度

波浪透明度

信息格式：{value}%

数据

静态数据

["55"]

动态数据(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 OR REPLACE VIEW view_water_level AS SELECT CONCAT('["',t.`T_VALUE`,'"]') AS V,T.ID FROM `t_pie_chart` t

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

SELECT * FROM view_water_level where id=4

4、效果图

动态数据（接口）

1、编写sql

SELECTt.`T_VALUE`FROM`t_pie_chart` t WHERE T.`ID`=#ID#

2、编写接口

3、效果

param=ID/4 :ID是参数，与2中的ID对应，4是参数的值

http://localhost/design/data/waterLevel?ApiCode=711527fcaf0a438ab934b969280373f6&param=ID/4

19、折线图

属性

数据

静态数据

{"xData":"Mon,Tue,Wed,Thu,Fri,Sat,Sun","yData": "120,200,150,80,70,110,130"}

动态数据(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视图

SELECT CONCAT('{"xData":"',GROUP_CONCAT(T.`T_NAME`),'","yData": "',GROUP_CONCAT(T.`T_VALUE`),'"}') FROM T_PIE_CHART T;

3、效果图

动态数据（接口）

与柱状图使用方式一致

http://localhost/design/data/XY?ApiCode=1737d78bba294e0f86e975e364aab30d

20、动态环图

属性

数据

静态数据

[{"name": "南阳","value": 120},

{"name": "西峡","value": 78},

{"name": "周口","value": 55},{"name": "驻马店","value": 66}]

动态数据(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 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`;

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

SELECT * FROM VIEW_AROUND_CHART

4、效果图

动态数据（外部接口）

与饼图获取方式一致

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

21、仪表盘

属性

数据

静态数据

22

动态数据(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视图

SELECT t_value FROM T_PIE_CHART WHERE id=4;

3、效果图

动态数据(外部接口)

与文字框获取方式一致，但返回值必须是数字

param=ID/4 :ID是参数，与2中的ID对应，4是参数的值

http://localhost/design/data/text?ApiCode=711527fcaf0a438ab934b969280373f6&param=ID/4

22、基础K线图

属性

数据

yData的数据 组成：开盘价 、 收盘价、下影线、上影线

静态数据

{"xData": "2022-03-24,2022-03-25,2022-03-26,2022-03-27,2022-03-28","yData":[[40, 20, 10, 49],[10, 40, 10, 49],[30, 40, 10, 39],[10, 40, 10, 49],[30, 40, 10, 39]]}

动态数据(sql)

1、创建数据库表

CREATE TABLE `t_k_line` (`id` INT NOT NULL AUTO_INCREMENT,`t_date` DATE DEFAULT NULL,`K_VALUE` FLOAT DEFAULT NULL COMMENT '开盘价',`S_VALUE` FLOAT DEFAULT NULL COMMENT '收盘价',`TOP_LINE` FLOAT DEFAULT NULL COMMENT '上影线',`BOT_LINE` FLOAT DEFAULT NULL COMMENT '下影线',PRIMARY KEY (`id`)) ENGINE=INNODB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci

2、编写sql视图

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;

3、效果图

动态数据（外部接口）

与其他组件使用方式一致