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