可视化图表API格式要求有哪些？Sugar BI详细代码示例（4）

Sugar BI中的每个图表可以对应一个数据 API，用户浏览报表时，选定一定的过滤条件，点击「查询」按钮将会通过 API 拉取相应的数据；前面说过，为了确保用户数据的安全性，Sugar BI上的所有数据请求都在Sugar BI的后端通过 curl 的方式访问产品线的 API，都是使用的POST请求。

POST 的数据是过滤条件、下钻、联动参数等，并且在请求的 Header 中会附加Sugar-Token.

Sugar BI支持多种类型的展示图表，每种类型的图表所需要的后端 API 返回的数据格式都有所区别，之前已经发布了

可视化图表API格式要求有哪些？Sugar BI详细代码示例（1）

可视化图表API格式要求有哪些？Sugar BI详细代码示例（2）

可视化图表API格式要求有哪些？Sugar BI详细代码示例（3）

今天，为大家带来其他图表所对应的数据 API 格式：

3D 区域色彩地图

API 示例：/openapi/demo/chart?type=map3DArea

response

{"status": 0,"msg": "","data": {// mapData字段是一个数组，每项代表一个区域"mapData": [{// 区域名称。必传，字符串。"name": "北京",// 颜色映射字段"value": 7470,// 区域高度映射(选填)"areaHeight": 234,// tooltip中附加显示的数据，可选，数字或字符串。"tooltipValues": [44,8],// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可"url": "sugar.baidu.com"},{"name": "广东","value": 8659,"areaHeight": 344,"tooltipValues": [62,8],"url": "sugar.baidu.com"},{"name": "上海","value": 8424,"areaHeight": 21,"tooltipValues": [44,9],"url": "sugar.baidu.com"},......],// 颜色映射数据的名称，会显示在 tooltip 中"valueName": "人口",// 高度映射数据的名称，会显示在 tooltip 中"heightName": "GDP",// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应"tooltipNames": ["面积","流动人口"],// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应"tooltipUnits": ["平方公里","人"]}
}

3D 柱状地图

API 示例：/openapi/demo/chart?type=map3DBar

response：

{"status": 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=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,// 映射为散点形状，可选，可枚举类型的数字或字符串"type": 1,// tooltip中附加显示的数据，可选，数字或字符串"tooltipValues": [44,8],// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可。"url": "sugar.baidu.com"},{"name": "广东","coord": [113.429877, 23.334664],"value": 8659,"sizeValue": 738,"type": 1,"tooltipValues": [62,8],"url": "sugar.baidu.com"},{"name": "上海","value": 8424,"sizeValue": 851,"type": 2,"tooltipValues": [44,9],"url": "sugar.baidu.com"},......],// 颜色映射数据的名称，会显示在 tooltip 中"valueName": "人口",// 散点大小映射数据的名称，会显示在 tooltip 中"sizeValueName": "GDP",// 散点系列映射数据的名称，会显示在 tooltip 中"typeName": "级别",// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应"tooltipNames": ["面积","流动人口"],// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应"tooltipUnits": ["平方公里","人"]}
}

 

多层地图 - 热力层/蜂窝聚合层

API 示例：/openapi/demo/chart?type=heatMap

response：

{"status": 0,  // 0表示成功，非0表示失败"msg": "",    // 失败时的提示信息"data": {// mapData字段是一个数组，每项代表一个散点或一个热力区域"mapData": [{// 点的名称。必传，字符串。// 当没有传递下面的 coord 字段时，系统会根据 name 的值自动匹配经纬度坐标// 注意，自动匹配经纬度坐标只支持全国省份和城市名称"name": "北京",// 地点的经纬度，可选，如果传递了则优先使用经纬度来定位点位置"coord": [116.41989, 40.189913],// 热力区域的值，可选，数字类型，会映射为热力区域的渐变颜色。"value": 7470},{"name": "广东","coord": [113.429877, 23.334664],"value": 8659},{"name": "上海",},......]}
}

 

多层地图 - 飞线层

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,// 飞线的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射飞线的宽度"sizeValue": 234,// tooltip中附加显示的数据，可选，数字或字符串"tooltipValues": [44],// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可"url": "sugar.baidu.com"},{"name": "线路二","locations": ["北京", "天津"],"value": 8659,"sizeValue": 134,"tooltipValues": [62],"url": "sugar.baidu.com"},{"name": "线路三","locations": ["北京", "上海"],"value": 8424,"sizeValue": 235,"tooltipValues": [44],"url": "sugar.baidu.com"},......],// 飞线颜色、粗细映射数据的名称，会显示在 tooltip 中"valueName": "人流量","sizeValueName": "次数",// 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// 路径的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射路径的宽度"sizeValue": 213,// tooltip中附加显示的数据，可选，数字或字符串"tooltipValues": [44,8],},{"locations": ["北京","大连"],"name": "航线3","value": 14,"sizeValue": 212,"tooltipValues": [62,8],},{"locations": ["北京","南宁"],"name": "航线4","value": 15,"sizeValue": 213,"tooltipValues": [44,9],},......],// 路径颜色、粗细映射数据的名称，会显示在 tooltip 中"valueName": "飞机数量","sizeValueName": "平均高度",// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应"tooltipNames": ["航班数","人流量"],// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应"tooltipUnits": ["架次","人次"]}
}

 

多层地图 - 点聚合层

API 示例：/openapi/demo/chart?type=clusterMap

response：

{"status": 0,  // 0表示成功，非0表示失败"msg": "",    // 失败时的提示信息"data": {// mapData字段是一个数组，每项代表一个散点"mapData": [{// 点的名称。必传，字符串。// 当没有传递下面的 coord 字段时，系统会根据 name 的值自动匹配经纬度坐标// 注意，自动匹配经纬度坐标只支持全国省份和城市名称"name": "北京",// 地点的经纬度，可选，如果传递了则优先使用经纬度来定位点位置"coord": [116.41989, 40.189913],// tooltip中附加显示的数据，可选，数字或字符串。"tooltipValues": [44,8],// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可"url": "sugar.baidu.com"},{"name": "广东","coord": [113.429877, 23.334664],"tooltipValues": [62,8],"url": "sugar.baidu.com"},{"name": "上海","tooltipValues": [44,9],"url": "sugar.baidu.com"},......],// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应"tooltipNames": ["面积","流动人口"],// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应"tooltipUnits": ["平方公里","人"]}
}

 Sugar BI支持免费试用，欢迎大家前来体验