各种图表的API格式要求
更新时间：2020-03-27
Sugar中的每个图表可以对应一个数据 API，用户浏览报表时，选定一定的过滤条件，点击「查询」按钮将会通过 API 拉取相应的数据；前面说过，为了确保用户数据的安全性，Sugar上的所有数据请求都在Sugar的后端通过 curl 的方式访问产品线的 API，都是使用的POST请求，POST 的数据是过滤条件、下钻、联动参数等，并且在请求的 Header 中会附加Sugar-Token.
Sugar支持多种类型的展示图表，每种类型的图表所需要的后端 API 返回的数据格式都有所区别，下面分别列举每种图表所对应的数据 API 格式：
表格
API 示例：/openapi/demo/chart?type=table
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"columns": [ // 定义表格的各个列
{
"name": "表头名1", // 显示的表头
"id": "key1", // 该列绑定的数据字段名称
"unit": "", // 单位，可以不传
"textAlign": "left", // 列中文字的对其方式，left、right、center, 可不传
"headerBgColor": "#333", // 该列表头的背景色，可不传
"autoWrap": true, // 文字太多时是否自动换行
"width": "200px", // 列宽度，可不传，默认为自适应，可传：100px、25%之类
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
{
"name": "表头名2", // 显示的表头
"id": "key2", // 该列绑定的数据字段名称
"unit": "%", // 单位，可以不传
"textAlign": "left", // 列中文字的对其方式，left、right、center, 可不传
"headerBgColor": "#333", // 该列表头的背景色，可不传
"autoWrap": false, // 文字太多时是否自动换行
"width": "", // 列宽度，可不传，默认为自适应，可传：100px、25%之类
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
......
],
"rows": [ // 表格各行的数据
{
"key1": 12313, // key和columns中的id一一对应
"key2": "<button>本宝宝是个html</button>",
"key1_level": "red", // 在字段名后加_level,表示展示时的字体颜色，可以是 red、green，当然可以不传,
"__showx_row_level": "red", // 整行飘红或飘绿，优先级低于单个字段的飘红飘绿设定
"key2_ishtml": true, // 在字段名后加_ishtml,表示展示时以html内容进行解析，可以不传。
"key2_noPadding": true, // 在字段名后加_noPadding,表示展示时表格单元格内不加padding属性，使传入的dom占满单元格，可以不传。
"key2_background": "#ff6c00", // 在字段名后加_background,表示展示时表格单元格背景色，可以不传。
},
{
"key1": 12313, // key和columns中的id一一对应
"key2": 12312,
},
......
],
"total": 99, // total表示总行数，启动了后端分页时才需要传递total字段
"superHeaders": [ // 超级表头, 比如想对表头做一个分类或者使用2级表头多级表头等，就可以用到它，可不传
[ // 第一行超级表头
{ // 第一行超级表头的具体每个item
"name": "superHeader1", // 名称
"colspan": 3 // 占3列
},
{
"name": "superHeader2", //名称
"colspan": 2 // 占2列
},
...
],
... // 后面可以加入多行行超级表头...
],
}
}表格分页
在控制面板中开启分页功能后，表格支持前后端分页。
- 前端分页：是将传过来的数据进行分页，切换页码时不会另外请求数据；
- 后端分页：会在 API 的请求参数中加入
start和limit参数，每次切换页码都会另外请求 API，另外使用后端分页时返回的数据中需要含有total字段用来表示总行数:
{
"start": n, // 表示从第n行开始，n以0为起点
"limit": x, // 每页多少行数据
}表格排序
在控制面板中开启排序功能后，表格支持前后端排序。
- 前端排序：是将传来的数据进行排序，排序时不会另外请求数据；
- 后端排序：会在 API 的请求参数中加入
sortKey和sortType参数，每次排序都会另外请求 API:
{
"sortKey": "key", // 即需要进行排序的列id
"sortType": "desc" // asc、desc
}轮播表格
API 示例：/openapi/demo/chart?type=tablePlay
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"columns":[ // 定义表格的各个列
{
"name": "表头名1", // 显示的表头
"id": "key1", // 该列绑定的数据字段名称
"unit": "", // 单位，可以不传
"textAlign": "left", // 列中文字的对其方式，left、right、center, 可不传
"autoWrap": true, // 文字太多时是否自动换行
"width": "50", // 列宽度，可不传，默认为均分，传50代表本列占总宽度50%
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
{
"name": "表头名2", // 显示的表头
"id": "key2", // 该列绑定的数据字段名称
"unit": "%", // 单位，可以不传
"textAlign": "left", // 列中文字的对其方式，left、right、center, 可不传
"autoWrap": false, // 文字太多时是否自动换行
"width": "", // 列宽度，可不传，默认为均分，传50代表本列占总宽度50%
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
......
],
"rows": [ // 表格各行的数据
{
"key1": 12313, // key和columns中的id一一对应
"key2": "<button>本宝宝是个html</button>",
"key2_ishtml": true, // 在字段名后加_ishtml,表示展示时以html内容进行解析，可以不传。
"key2_background": "#ff6c00", // 在字段名后加_background,表示展示时表格单元格背景色，可以不传。
},
{
"key1": 12313, // key和columns中的id一一对应
"key2": 12312,
},
......
]
}
}属性表格
API 示例：/openapi/demo/chart?type=attrTable
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "访问量", // 属性名称，必传
"desc": "访问量是指页面被访问的次数", // 属性说明，可选
"value": "<a href=\"http://www.baidu.com\" style=\"color: #337ab7; text-decoration: underline\">17480134</a>", // 属性取值，
"unit": "次", // 属性单位
"ishtml": true, // 如果 value 字段中是 html 内容，需要将此字段设置为 true
"level": "green", // 属性取值飘红飘绿，可传 green red
"url": "http://www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "访问人数",
"value": 2249190,
"level": "green",
"url": "http://tieba.baidu.com"
},
{
"name": "周活跃数",
"value": 5326784,
"url": "http://zhidao.baidu.com"
},
{
"name": "月活跃数",
"value": 7326784,
"level": "red",
"url": "http://zhidao.baidu.com"
}
];
}折线图、柱状图
API 示例：/openapi/demo/chart?type=line
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // x轴，下面以日期为例
"2015-01-01",
"2015-01-02",
"2015-01-03",
"2015-01-04",
"2015-01-05",
"2015-01-06",
"2015-01-07",
"2015-01-08"
],
"series": [ // 用来展示的多条折线或柱状
{
"name": "新增用户",
"data": [2334, 1214......] // 数组元素个数需要和categories一致
},
{
"name": "老用户",
"data": [2342, 1234......] // 数组元素个数需要和categories一致
"lineStyle": { // 折线图时，这样配置可以将该条折线展示为虚线，不传该部分时就默认是实线
"type": "dashed"
}
},
......
]
}
}线柱混搭图
API 示例：/openapi/demo/chart?type=lineBar
当然，其实您可以指定所有数据都是折线图，这样就可以实现双 Y 轴的折线图
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // x轴，下面以日期为例
"2015-01-01",
"2015-01-02",
"2015-01-03",
"2015-01-04",
"2015-01-05",
"2015-01-06",
"2015-01-07",
"2015-01-08"
],
"series": [ // 用来展示的多条折线或柱状
{
"name": "新增用户",
"type": "line 或 bar", //表示折线或者柱状，如果不填则默认为折线
"yAxisIndex": 0 或 1, //0表示第一个Y轴, 1表示第2个Y轴, 也可不填，默认为第一个Y轴；如果有一个yAxisIndex为1则标示开启了双重Y轴，可以配置不同的单位以及数据级别不同
"data": [2334, 1214......] // 数组元素个数需要和categories一致
},
{
"name": "老用户",
"type": "line 或 bar", //表示折线或者柱状，如果不填则默认为折线
"yAxisIndex": 0 或 1, //0表示第一个Y轴, 1表示第2个Y轴, 也可不填，默认为第一个Y轴；如果有一个yAxisIndex为1则标示开启了双重Y轴，可以配置不同的单位以及数据级别不同
"data": [2342, 1234......] // 数组元素个数需要和categories一致
},
......
]
}
}山峰柱图、象形柱状图
API 示例：/openapi/demo/chart?type=barPic
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // x轴，下面以日期为例
"2015-01-01",
"2015-01-02",
"2015-01-03",
"2015-01-04",
"2015-01-05",
"2015-01-06",
"2015-01-07",
"2015-01-08"
],
"series": [ // 山峰柱图、象形柱状图只支持一个系列
{
"name": "新增用户",
"data": [2334, 1214......] // 数组元素个数需要和categories一致
}
]
}
}圆形柱状图
API 示例：/openapi/demo/chart?type=barPolar
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // 径向轴取值，有多少个取值就有多少个柱子
"魅族",
"小米",
"vivo",
"oppo",
"华为",
"三星",
"苹果"
],
"series": [
{
"data": [ // data里的数值代表柱子覆盖的角度，和上面的径向轴取值一一对应
500,
600,
700,
800,
900,
1000,
1200
]
}
]
}
}饼图、环形饼图、轮播饼图
API 示例：/openapi/demo/chart?type=pie
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "chrome",
"value": 46,
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "safari",
"value": 32,
"url": "www.baidu.com"
},
{
"name": "fireFox",
"value": 16,
"url": "www.baidu.com"
},
......
]
}嵌套饼图
API 示例：/openapi/demo/chart?type=pieNested
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
[ // 内层的饼图数据
{
"name": "chrome",
"value": 46
},
{
"name": "ie",
"value": 32
},
{
"name": "fireFox",
"value": 36
},
......
],
[ // 外层的环形饼图数据
// 注意外层子扇区的顺序需要与内层母扇区的顺序进行对应
// 例如这里子扇区也是按照 chrome， ie， firefox 的顺序排列的
{
"name": "chrome49",
"value": 14
},
{
"name": "chrome50",
"value": 32
},
{
"name": "IE10",
"value": 10
},
{
"name": "IE11",
"value": 22
},
{
"name": "fireFox62",
"value": 20
},
{
"name": "fireFox65",
"value": 6
},
......
]
]
}漏斗图
API 示例：/openapi/demo/chart?type=funnel
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"unit": "%", // 单位，可以不传
"data": [
{
"name": "首页",
"value": 12323,
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "首页->列表页",
"value": 23457,
"url": "www.baidu.com"
},
{
"name": "首页->列表页->下单页",
"value": 23457,
"url": "www.baidu.com"
},
......
]
}
}散点图
API 示例：/openapi/demo/chart?type=scatter
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"series": [ // 用来展示的多系列数据，数据格式可以参考echarts的文档
{
"name": "数据1",
"data": [
{
"name": "点1",
"symbolSize": 31, // 散点的大小
"value": [10, 20] // X/Y轴的数值，X轴可以是日期字符串
},
......
]
},
{
"name": "数据2",
"symbol": "diamond", // 散点的形状，可参考echarts文档
"symbolSize": 20, // 统一配置改系列所有点的大小
"data": [
{
"name": "点1",
"value": [10, 30, 12, 23] // 散点图的数据支持多维，这里有四维的数据，另外两个维度将通过鼠标hover点时出现的tooltip中展示
},
......
]
},
......
],
"target": ["X指标", "Y指标", "指标3", "指标4"] // 展示多维数据的tooltip配置
}
}字符云
API 示例：/openapi/demo/chart?type=wordCloud
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "热词1",
"value": 46,
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "热词2",
"value": 32,
"url": "www.baidu.com"
},
{
"name": "热词3",
"value": 16,
"url": "www.baidu.com"
},
{
"name": "热词4",
"value": 15,
"url": "www.baidu.com"
},
......
]
}雷达图
API 示例：/openapi/demo/chart?type=radar
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
indicators:[
{
"text": "顶点1", // 顶点展示的文字
"max": 10, // 该顶点的最大值
"min": 0 // 该顶点的最小值，可不传，默认为0
},
{
"text": "顶点2", // 顶点展示的文字
"max": 20, // 该顶点的最大值
"min": 5 // 该顶点的最小值，可不传，默认为0
},
{
"text": "顶点3", // 顶点展示的文字
"max": 10, // 该顶点的最大值
"min": 2 // 该顶点的最小值，可不传，默认为0
},
......
],
"series": [
{
"name": "预算开支",
"value": [8, 18, 9, ...] // 数组元素个数和indicators相同
},
{
"name": "实际开销",
"value": [9, 15, 7, ...] // 数组元素个数和indicators相同
},
......
]
}
}旭日图
API 示例：/openapi/demo/chart?type=sunburst
response：
{
"status": 0,
"msg": "",
// data是一个数组，表示了一个树状结构
"data": [
{
// 每个节点必须有name属性，其值为字符串
"name": "Fruity",
// 非叶子节点必须有children字段，其值为包含其子节点的数组，不需要有value字段
"children": [
{
"name": "Berry",
"children": [
{
"name": "Blackberry",
// 叶子节点必须有value字段，其值为数字
"value": 1,
},
{
"name": "Raspberry",
"value": 1,
}
]
}]
},
{
"name": "Sour/\nFermented",
"children": [
{
"name": "Sour",
"children": [
{
"name": "Sour Aromatics",
"value": 1,
},
{
"name": "Acetic Acid",
"value": 1,
}
]
}
]
},
......
]
}矩形树图
API 示例：/openapi/demo/chart?type=treemap
response：
{
"status": 0,
"msg": "",
// data是一个数组，表示了一个树状结构
"data": [
{
// 每个节点必须有name属性，其值为字符串
"name": "Fruity",
// 非叶子节点必须有children字段，其值为包含其子节点的数组，不需要有value字段
"children": [
{
"name": "Berry",
"children": [
{
"name": "Blackberry",
// 叶子节点必须有value字段，其值为数字
"value": 1,
},
{
"name": "Raspberry",
"value": 1,
}
]
}]
},
{
"name": "Sour/Fermented",
"children": [
{
"name": "Sour",
"children": [
{
"name": "Sour Aromatics",
"value": 1,
},
{
"name": "Acetic Acid",
"value": 1,
}
]
}
]
},
......
]
}气泡图
API 示例：/openapi/demo/chart?type=bubble
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "热词1",
"value": 46,
"cat": "cat1", // 气泡所属的类别，不同类别的气泡颜色不同，若不传，则用name作为气泡名称
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "热词2",
"value": 32,
"cat": "cat1",
"url": "www.baidu.com"
},
{
"name": "热词3",
"value": 16,
"cat": "cat2",
"url": "www.baidu.com"
},
{
"name": "热词4",
"value": 15,
"cat": "cat2",
"url": "www.baidu.com"
},
......
]
}拓扑图
API 示例：/openapi/demo/chart?type=topology
response：
{
"status": 0,
"msg": "",
"data": {
"nodes": [ //表示各个节点
{
"id": "node1", //结点的id, 用于唯一标识1个节点，必传
"title": "node1Title", //节点的标题，可不填，
"data": [ //节点主体的数据，可用数组表示，数组每一项会分行。
"hello",
"<button>world</button>"
], //data数据也可不填，但title和data最好保留至少1个, 当然数据也可以写为html的内容
"tooltip": "hi, 我是tooltip" //字符串格式的tooltip
},
{
"id": "node2", //结点的id, 用于唯一标识1个节点，必传
"title": "node2Title", //节点的标题，可不填
"data": "hello, world", //data字段为字符串表示只占1行数据
"fontColor": "#ff0000", //自定义的字体颜色，可不传
"bgColor": "bgColor", //自定义的背景颜色，可不传
"tooltip": ["hi", "我是tooltip"] //数组格式的tooltip
},
...
],
"links": [
{
"source": "node1", // 表示从id为`node1`的结点出发，必传
"target": "node2", // 表示到id为`node2`的结点结束，必传
"text": "15%", // 折线上的数据，可不传
"tooltip": ["hi", "我是tooltip"] //数组格式的tooltip
},
{
"source": "node1", // 表示从id为`node1`的结点出发，必传
"target": "node3", // 表示到id为`node3`的结点结束，必传
"text": "15%", // 折线上的数据，可不传
"tooltip": "hi, 我是tooltip" //字符串格式的tooltip
},
...
]
}
}河流图
API 示例：/openapi/demo/chart?type=river
response：
{
"status": 0,
"msg": "",
"data": {
// legend 字段必填，代表一共有几个系列
"legend": ["华为", "联想", "微星", "宏基", "戴尔", "惠普"],
// data 字段是一个二维数组，每个子数组必须有三项：
// 0：用于横轴的序列。以 - 或 / 分隔的日期，以 : 分隔的时间，符合前面格式要求的日期时间组合，数字
// 1：数据的大小。数字或有效的数字字符串
// 2：数据属于哪个系列，需要与 legend 中的字段对应
"data": [
["2015/11/08",10,"华为"],["2015/11/09",15,"华为"],["2015/11/10",35,"华为"],
["2015/11/08",35,"联想"],["2015/11/09",36,"联想"],["2015/11/10",37,"联想"],
["2015/11/08",21,"微星"],["2015/11/09",25,"微星"],["2015/11/10",27,"微星"],
["2015/11/08",10,"宏基"],["2015/11/09",15,"宏基"],["2015/11/10",35,"宏基"],
["2015/11/08",10,"戴尔"],["2015/11/09",15,"戴尔"],["2015/11/10",35,"戴尔"],
["2015/11/08",10,"惠普"],["2015/11/09",15,"惠普"],["2015/11/10",35,"惠普"]
.....
]
}
}日历热力图
API 示例：/openapi/demo/chart?type=calHmap
response：
{
"status": 0,
"msg": "",
"data": [
// 每一项都是一个数组，代表某天的数据，数据可以不按日期顺序返回
// 第一个元素是日期，格式要求yyyy-mm-dd
// 第二个元素是取值，要求是数字或有效的数字字符串
["2020-02-10", 186],
["2020-02-10", 877],
......
]
}坐标热力图
API 示例：/openapi/demo/chart?type=cartHeatmap
response：
{
"status": 0,
"msg": "",
"data": {
// y轴类目，字符串数组
"yCategories": [
"Saturday", "Friday", "Thursday", "Wednesday",
"Tuesday", "Monday", "Sunday"
],
// x轴类目，字符串数组
"xCategories": [
"12a", "1a", "2a", "3a", "4a", "5a", "6a",
"7a", "8a", "9a","10a","11a","12p", "1p",
"2p", "3p", "4p", "5p", "6p", "7p", "8p",
"9p", "10p", "11p"
],
// 数据项数组
"data": [
// 第一项对应X轴类目，第二项对应Y轴类目，第三项为数据取值，需为数字
["12a","Saturday",5],
["12a","Friday",7],
["4a","Friday",0],
......
]
}
}3D 柱状图
API 示例：/openapi/demo/chart?type=bar3D
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// x轴数据，字符串数组
"xCategories": ["苹果", "三星", "华为", "oppo", "vivo", "小米"],
// y轴数据，字符串数组
"yCategories": ["2010", "2011", "2012", "2013", "2014", "2015"],
// 每个系列柱体的数据，数组
"series": [
{
// 系列名称，字符串
"name": "上半年",
// 系列数据，数组，原则上应该对应 xCategories，yCategories的所有组合
"data": [
// 每项数据有三项，分别为：
// X轴：应与 xCategories 内的数据对应
// Y轴：应与 yCategories 内的数据对应
// Z轴：应是数字或有效数字字符串
["苹果", "2010", 100087],
["苹果", "2011", 100079],
......
]
},
{
"name": "下半年",
"data": [
["苹果", "2010", 100079],
["苹果", "2011", 879],
......
]
},
......
]
}
}3D 散点图
API 示例：/openapi/demo/chart?type=scatter3D
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
// data 为一个数组，每行对应散点图中的一个点
"data": [
// 第一项为每个维度的名称
// 顺序为：[X轴，Y轴，Z轴，颜色映射，散点大小映射]
// 如果不需要颜色和大小映射，则只需要[X轴，Y轴，Z轴]
// 如果不需要大小映射，则只需要[X轴，Y轴，Z轴，颜色映射]
// 如果不需要颜色映射，则需要[X轴，Y轴，Z轴，null，散点大小映射]
["国家", "年份", "收入", "平均寿命", "人口"],
// 接下来的项为数据，数据项的列的各种情况与上面名称项的列相对应
// 每个数据的格式要求：
// X轴，Y轴，Z轴：数字或字符串
// 颜色映射：如果需要使用颜色映射散点类别，则传字符串；如果需要使用颜色渐变映射某连续数值维度，则传数字
// 散点大小映射：数字
["Australia", "1800", 815, 34.05, 351014],
["Canada", "1800", 1314, 39, 645526],
.....
]
}K 线图
API 示例：/openapi/demo/chart?type=candlestick
response：
{
"status": 0,
"msg": "",
"data": {
"candlestick": [ // K线数据，二维数组
[2320.26, 2320.26, 2287.3, 2362.94], // 某一个K线的点，必须是四项数据，分别表示：开盘价、收盘价、最低价、最高价
[2300, 2291.3, 2288.26, 2308.38],
......
],
"categories": [ // K线图的X轴数据
"2013-01-24",
"2013-01-25",
......
],
"ma": [ // 「移动平均线」，可不传（不传时不展示移动平均线），必须是数组，可展示多条移动平均线
{
"name": "MA5", // 本条移动平均线的名称
"data": [2352.936, 2378.48, ...] // 本条移动平均线的数据
},
......
],
"volume": [ // 成交量数据，可不传（不传时不展示成交量柱图）
23454,
34235,
......
],
"rise": [ // 涨跌额和涨跌幅，可不传，传递后会展示在鼠标hover时的tooltip中，二维数组
[45.23, 0.0367], // 两项数据分别表示涨跌额和涨跌幅，涨跌幅使用小数，示例即表示涨跌额是45.23，涨跌幅是3.67%
......
]
}
}桑基图
API 示例：/openapi/demo/chart?type=sankey
response：
{
"status": 0,
"msg": "",
"data": {
// nodes 字段是一个数组，每项代表一个节点
"nodes": [{
"name": "a" // name 字段，必填，字符串类型，是节点的名称，也是节点的唯一标识
}, {
"name": "b"
}, {
"name": "a1"
}, {
"name": "a2"
},
......
],
// links 字段是一个数组，每项代表一个流
"links": [{
"source": "a", // source 字段：源节点的名称，必填，字符串，需要与 nodes 中的某个节点相对应
"target": "a1", // target 字段：目的节点的名称，必填，字符串，需要与 nodes 中的某个节点相对应
"value": 5 // value 字段：流的大小，必填，数字类型
}, {
"source": "a",
"target": "a2",
"value": 3
},
....
]
}
}核心指标
API 示例：/openapi/demo/chart?type=summary
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "访问量", // 指标名称
"desc": "访问量是指页面被访问的次数", // 指标描述，可不传
"unit": "", // 单位，可以不传
"value": 17480134, // 指标取值
"rate": 3.34, // 涨跌率，如果不需要也可不传
"rate_level": "green", // 指标飘红还是飘绿，也可以自定义，取值可以是red、green、custom可不传
"color": "#f05050", // rate_level是custom时，此字段生效，可以自定义飘红飘绿的颜色
"rate_tip": "周环比", // 对涨跌率的说明，可不传
"rate2": 14.5, // 第二个涨跌率，如果不需要也可不传
"rate2_level": "green", // 第二个涨跌率字体展示的颜色，可以是green、red，可不传
"rate2_tip": "日环比" , // 对第二个涨跌率的说明，可不传
"url": "http://www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
....
];
}关于增长率这一项，Sugar 现支持 2 项不同的增长率，例如 日环比 和 周环比。用户不需要也可都不传，也可传一项内容。
数字翻牌器、百分比指标
API 示例：/openapi/demo/chart?type=flipNumber
response：
{
"status": 0,
"msg": "",
"data": 1201035.2990482938
}仪表盘
API 示例：/openapi/demo/chart?type=gauge
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"max": 100, // 最大值，可不传，默认为100
"min": 0, // 最小值，可不传，默认为0
"name": "完成率",
"unit": "%", // 单位，可不传
"value": 89.1 // 具体取值
}
}进度条、环形进度条
API 示例：/openapi/demo/chart?type=progressBar
response：
{
"status": 0,
"msg": "",
"data": 19.14602833247916
}水球图
API 示例：/openapi/demo/chart?type=progressBar
response：
{
"status": 0,
"msg": "",
"data": 19
}例如 data 返回 19，水球图中就会显示 19%。
平面地图(色彩、气泡、热力)
API 示例：/openapi/demo/chart?type=map
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一个气泡或一个区域
"mapData": [
{
// 气泡或区域的名称。必传，字符串。
// 当没有传递下面的 coord 字段时，系统会根据 name 的值自动匹配经纬度坐标
// 注意，自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度，可选，如果传递了则优先使用经纬度来定位气泡或区域
"coord": [116.41989, 40.189913],
"value": 7470,
// tooltip中附加显示的数据，可选，数字或字符串。对热力图无效
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"value": 8659,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称，会显示在 tooltip 中
"valueName": "人口",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}平面地图飞线图
API 示例：/openapi/demo/chart?type=mapLine
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一条飞线
"mapData": [
{
// 飞线的名称。字符串
"name": "线路一",
// 飞线起点到终点的名称。字符串。会在气泡图的tooltip中显示
// 当没有传递下面的 coords 字段时，系统会根据 locations 的值自动匹配经纬度坐标
// 注意，自动匹配经纬度坐标只支持全国省份和城市名称
"locations": ["北京", "广东"],
// 地点的经纬度，可选，如果传递了则优先使用经纬度来绘制飞线和气泡
"coords": [[116.41989, 40.189913], [113.429877, 23.334664]],
// 飞线的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射飞线和气泡的渐变颜色
"value": 7470,
// tooltip中附加显示的数据，可选，数字或字符串
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "线路二",
"locations": ["北京", "天津"],
"value": 8659,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "线路三",
"locations": ["北京", "上海"],
"value": 8424,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称，会显示在 tooltip 中
"valueName": "人流量",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"线路长度"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"公里"
]
}
}百度地图(散点、热力)
API 示例：/openapi/demo/chart?type=bmapScatter
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一个散点或一个热力区域
"mapData": [
{
// 散点或热力区域的名称。必传，字符串。
// 当没有传递下面的 coord 字段时，系统会根据 name 的值自动匹配经纬度坐标
// 注意，自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度，可选，如果传递了则优先使用经纬度来定位散点或热力区域
"coord": [116.41989, 40.189913],
// 散点或热力区域的值，必传，数字类型，会映射为散点或热力区域的渐变颜色
"value": 7470,
// 映射为散点大小的数据值，可选，数字类型。对热力图无效
"sizeValue": 811,
// tooltip中附加显示的数据，可选，数字或字符串。对热力图无效
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"value": 8659,
"sizeValue": 738,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"sizeValue": 851,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称，会显示在 tooltip 中
"valueName": "人口",
// 散点大小映射数据的名称，会显示在 tooltip 中
"sizeValueName": "GDP",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}百度地图(路径、飞线)
路径图 API 示例：/openapi/demo/chart?type=bmapLine
飞线图 API 示例：/openapi/demo/chart?type=bmapLine&cityLine=1
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// trails 字段是一个数组，每一项代表一条飞线/路径
"trails": [
{
// 飞线/路径通过 途径点的位置信息 在地图上进行绘制
// 飞线只需要提供起点和终点的位置信息，路径需要提供所有途经点的位置信息
// 途径点位置信息可以通过两种方式提供：locations字段和coords字段
// locations字段中可以包含中国省市名称，系统会根据这个名称自动解析各个途经点的坐标
// coords字段中则直接包含各途经点的gps坐标
"locations": [
"北京",
"上海"
],
"coords": [
[
120.14322240845,
30.236064370321
],
[
120.14280555506,
30.23633761213
],
[
120.14307598649,
30.236125905084
]
],
// 飞线/路径的名称，会在tooltip中显示
"name": "航线1",
// 路径的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射路径的渐变颜色
"value": 12
},
{
"locations": [
"北京",
"大连"
],
"name": "航线3",
"value": 14
},
{
"locations": [
"北京",
"南宁"
],
"name": "航线4",
"value": 15
},
......
]
}
}3D 飞线地图
API 示例：/openapi/demo/chart?type=map3DLine
response：
{
"status": 0,
"msg": "",
"data": [ // data中可以放多个系列的数据，每个系列包含多条飞线
{
"name": "easyJet", // 系列的名字，将会体现在图例中
"data": [
[[-4.499106, 36.6749], [-2.719089, 51.382669]],
// 每条飞线的具体数据，格式为：[[起点经度,起点纬度], [终点经度, 终点纬度]]
[[-4.499106, 36.6749], [7.529167, 47.59]],
......
]
},
{
"name": "Southwest Airlines",
"data": [
[[-106.6091944, 35.0402222], [-76.668333, 39.175361]],
[[-106.6091944, 35.0402222], [-104.673178, 39.861656]],
......
]
},
......
]
}3D 柱状地图
API 示例：/openapi/demo/chart?type=map3DBar
response：
{
"status": 0,
"msg": "",
"data": [
// 每项对应一个柱子的数据，格式为：经度，纬度，柱子数值
[-85.5, 73.5, 1.70293863659264],
[-78, 73, 1.224744871391589],
....
]
}文本、跑马灯
API 示例：/openapi/demo/chart?type=simpleText
response：
{
"status": 0,
"msg": "",
"data": "这里就是文本的展示内容"
}富文本
API 示例：/openapi/demo/chart?type=text
response：
{
"status": 0,
"msg": ,
"data": {
"name": "百度",
"dau": 999999999,
"mau": 1000000000,
"link": "https://www.badiu.com"
}
}使用示例 API 绑定富文本的数据，可以展示如下效果：
图片轮播
API 示例：/openapi/demo/chart?type=slider
response：
{
"status": 0,
"msg": "",
"data": [ // data 字段内容 是一个数组
{
// 每个图片的标题，如没有可不传
"title": "大屏示例1",
// 必传，图片的 url
"url": "https://sugar-files.cdn.bcebos.com/images/templet-templet04.png",
// 图片如果需要配置超链接，可传链接的 url ，如不需要可不传，注意图片超链接在编辑模式不生效，浏览模式生效
"link": "https://sugar.baidubce.com/dashboard/aa75c47fe742c2a33c186a3d364eb6a7"
},
{
"title": "大屏示例2",
"url": "https://sugar-files.cdn.bcebos.com/images/templet-templet01-1.png",
"link": "https://sugar.baidubce.com/dashboard/41510e632e1e1e4767b0a041030670ec"
},
...
]
}视频/直播
API 示例：/openapi/demo/chart?type=video
response：
{
"status": 0,
"msg": "",
"data": {
// 视频类型，可以设置为"auto"让系统自动识别视频类型
// 指定类型时，对于普通视频，支持 mp4, flv, m3u8
// 对于直播，支持 rtmp, flv, m3u8
"videoType": "flv",
// 完整视频地址
"videoUrl": "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hivruedyynkarv3d/mda-hivruedyynkarv3d.flv",
// 视频封面图片地址
"imageUrl": "https://login.bce.baidu.com/img/2020-02-10-2x.png"
}
}多层地图 - 区域色彩层
API 示例：/openapi/demo/chart?type=map
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一个区域
"mapData": [
{
// 区域的名称。必传，字符串
// 在使用内置区域地图的时候，系统会使用这个名称来将数据对应到各个区域
// 在使用自定义 geoJSON 绘制区域时，name要与 geoJSON 每个区域项中 properties 里的 name 对应
"name": "北京",
"value": 7470,
// tooltip中附加显示的数据，可选，数字或字符串。
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"value": 8659,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称，会显示在 tooltip 中
"valueName": "人口",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}多层地图 - 散点层/热力层
API 示例：/openapi/demo/chart?type=bmapScatter
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一个散点或一个热力区域
"mapData": [
{
// 散点或热力区域的名称。必传，字符串。
// 当没有传递下面的 coord 字段时，系统会根据 name 的值自动匹配经纬度坐标
// 注意，自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度，可选，如果传递了则优先使用经纬度来定位散点或热力区域
"coord": [116.41989, 40.189913],
// 散点或热力区域的值，必传，数字类型，会映射为散点或热力区域的渐变颜色
"value": 7470,
// 映射为散点大小的数据值，可选，数字类型。对热力图无效
"sizeValue": 811,
// tooltip中附加显示的数据，可选，数字或字符串。对热力图无效
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"value": 8659,
"sizeValue": 738,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"sizeValue": 851,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称，会显示在 tooltip 中
"valueName": "人口",
// 散点大小映射数据的名称，会显示在 tooltip 中
"sizeValueName": "GDP",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}多层地图 - 飞线层
API 示例：/openapi/demo/chart?type=mapLine
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一条飞线
"mapData": [
{
// 飞线的名称。字符串
"name": "线路一",
// 飞线起点到终点的名称。字符串。
// 当没有传递下面的 coords 字段时，系统会根据 locations 的值自动匹配经纬度坐标
// 注意，自动匹配经纬度坐标只支持全国省份和城市名称
"locations": ["北京", "广东"],
// 地点的经纬度，可选，如果传递了则优先使用经纬度来绘制飞线和气泡
"coords": [[116.41989, 40.189913], [113.429877, 23.334664]],
// 飞线的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射飞线和气泡的渐变颜色
"value": 7470,
// tooltip中附加显示的数据，可选，数字或字符串
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "线路二",
"locations": ["北京", "天津"],
"value": 8659,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "线路三",
"locations": ["北京", "上海"],
"value": 8424,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称，会显示在 tooltip 中
"valueName": "人流量",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"线路长度"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"公里"
]
}
}多层地图 - 路径层
API 示例：/openapi/demo/chart?type=bmapLine&nationLine=1
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// trails 字段是一个数组，每一项代表一条路径
"trails": [
{
// 路径通过 途径点的位置信息 在地图上进行绘制
// 途径点位置信息可以通过两种方式提供：locations字段和coords字段
// locations字段中可以包含中国省市名称，系统会根据这个名称自动解析各个途经点的坐标
// coords字段中则直接包含各途经点的坐标
"locations": [
"北京",
"上海"
],
"coords": [
[
120.14322240845,
30.236064370321
],
[
120.14280555506,
30.23633761213
],
[
120.14307598649,
30.236125905084
]
],
// 路径的名称，会在tooltip中显示
"name": "航线1",
// 路径的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射路径的渐变颜色
"value": 12
},
{
"locations": [
"北京",
"大连"
],
"name": "航线3",
"value": 14
},
{
"locations": [
"北京",
"南宁"
],
"name": "航线4",
"value": 15
},
......
]
}
}