普通图表、电子表格、自定义图表
普通图表和电子表格是在数据可视化和数据处理方面常用的工具,它们在不同场景下有各自的特点和用途。很多BI产品也内置了强大的普通图表设计引擎、电子表格设计引擎,针对用户的数据可视化诉求,提供完整有效的解决方案。
以道一云七析BI产品为例,今天重点给大家分析“自定义图表”功能如何使用。
假设在七析BI中 ,选中了自定义图表组件后,可以看到普通图表界面出现了JS代码编辑区。
在JS语法的基础上,七析封装了一些内嵌函数,帮助用户更方便快捷的进行JS的编写。用户在JS编辑器中,编写完成点击"运行"即可渲染出图。
封装的内嵌函数
BI
内嵌函数调用的主函数,文档中的其他内嵌函数都需要通过BI函数进行调用,例如:BI.data()。
data
函数说明 | 返回用户拖入至行列区域、视觉通道以及过滤器的字段计算后的结果集 |
---|---|
调用示例 | var data = BI.data(); |
返回值类型 | 类型:Array<{key:value}> 注意:key是字段别名 |
返回值结果示例 | [ {‘车系1687746858746’: ‘凯美瑞’,‘销量1687746860491’: 8819}, {‘车系1687746858746’: ‘哈弗H6’,‘销量1687746860491’: 2572}, {‘车系1687746858746’: ‘奔驰GLC’,‘销量1687746860491’: 3651}, … …] |
datasetNames
函数说明 | 图表已选择的数据集名称列表(包含关联模型中的数据集),且按页面显示的数据集顺序由上往下排列 |
---|---|
调用示例 | var data = BI.datasetNames(); |
返回值类型 | 类型:Promise<Array<String>>异步Promise对象 |
返回值结果示例 | [‘产品’, ‘订单’, ‘订单明细’, …] |
dataset
函数说明 | 图表已选择的数据集的数据信息 |
---|---|
参数 | 参数1:数组对象,需使用的数据集字段名称集合;参数2:布尔值,是否跟随当前仪表盘中的筛选器控件进行数据过滤 |
调用示例 | 调用示例: var data = BI.dataset([ {‘dataSetName’:‘产品’,‘fieldName’:‘产品名称’,‘showName’:‘名称’}, {‘dataSetName’:‘产品’,‘fieldName’:‘产品分类’,‘showName’:‘分类’}, {‘dataSetName’:‘订单’,‘fieldName’:‘订单编号’,‘showName’:‘订单编号’}],true); 参数解释:- dataSetName:数据集的名称; -fieldName:数据集字段的别名; -showName:返回的结果集中字段的名称(可自定义) |
返回值结果示例 | [ {‘名称’: ‘牛奶’, ‘分类’: ‘饮品’, ‘订单编号’: 1234}, {‘名称’: ‘饼干’, ‘分类’: ‘零食’, ‘订单编号’: 4321}, {‘名称’: ‘芬达’, ‘分类’: ‘饮品’, ‘订单编号’: 5678}, … …] |
getDashboardConfig
函数说明 | 获取当前图表的仪表盘配置,如:背景色、字体、主题等 |
---|---|
调用示例 | var data = BI.getDashboardConfig(); |
返回值类型 | 类型:对象,{key:value, …} |
返回值结果示例 | 结果示例: { “bgColor”: “#F2F3F5”, “color”: “#1D2129”, “fontFamily”: “Arial”, “fontSize”: “14px”, “fontWeight”: “bold”, “theme”: “theme_1”, “titlePosition”: “left”} 参数解释:- bgColor是背景色 -color是字体色; -fontFamily是字体; -fontSize是字号; -fontWeight是字的粗细; -theme是主题; -titlePosition是标题的对其方式 |
getChartConfiguration
函数说明 | 获取当前图表配置,如:视觉通道中颜色、大小等 |
---|---|
调用示例 | var data = BI.getChartConfiguration(); |
返回值类型 | 类型:对象,{key:value, …} |
返回值结果示例 | 结果示例: { “viewConfig”: { “color”: { “type”: “theme”, “value”: “theme_1” }, size: 50 }} 参数解释:- viewConfig:视觉通道配置; - color:视觉通道颜色的配置; - type:theme类型(theme为主题); - value:主题编号(如"theme_1"为一个主题的编号) - size:视觉通道大小的配置 |
getThemeList
函数说明 | 获取仪表盘所有主题及其对应的配置 |
---|---|
调用示例 | var data = BI.getThemeList(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [ { “colors”:[‘#409EFF’, ‘#58D184’, ‘#46C1EB’, ‘#FFCE2F’, ‘#F56649’, ‘#F19A4B’, ‘#AE856B’, ‘#A166CC’, ‘#6F7CAF’, ‘#3CBDB1’], “gradient”:[‘#9CFFF2’, ‘#3271FF’], “themeId”: “theme_1”, “themeName”: “经典” }, { “colors”: [‘#14B9BC’, ‘#83DDFF’, ‘#3DA7F3’, ‘#42E3E3’, ‘#2F94FF’, ‘#74B8FF’, ‘#25A1C7’, ‘#A0D615’, ‘#64D9BA’, ‘#26C4FF’], “gradient”: [‘#E0FF8F’, ‘#2AC6C9’], “themeId”: “theme_2”, “themeName”: “薄荷” }, … …] 参数解释:- colors:主题对应的配色; - gradient:渐变颜色数组; - themeId:主题编号; - themeName:主题名称 |
getThemeById
函数说明 | 根据主题编号获取主题配置 |
---|---|
参数 | 参数1:字符串,主题编号 |
调用示例 | var data = BI.getThemeById(“theme_1”); |
返回值类型 | 类型:对象,对象,{key:value, …} |
返回值结果示例 | 结果示例: { “colors”:[‘#409EFF’, ‘#58D184’, ‘#46C1EB’, ‘#FFCE2F’, ‘#F56649’, ‘#F19A4B’, ‘#AE856B’, ‘#A166CC’, ‘#6F7CAF’, ‘#3CBDB1’], “gradient”:[‘#9CFFF2’, ‘#3271FF’], “themeId”: “theme_1”, “themeName”: “经典”} 参数解释:- colors:主题对应的配色; - gradient:渐变颜色数组; - themeId:主题编号; - themeName:主题名称 |
getChartColorData
函数说明 | 图表视觉通道的颜色信息 |
---|---|
调用示例 | var data = BI.getChartColorData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “type”: “ncal”}] **参数解释:- aliasName:视觉通道颜色配置中字段的别名 ; - originName:字段的原名 ; - createTimeStamp:字段拖拽时刻的时间戳 ; - type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartSizeData
函数说明 | 图表视觉通道的大小信息 |
---|---|
调用示例 | var data = BI.getChartSizeData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “销量”, “createTimeStamp”: “1687765466583”, “originName”: “销量”, “type”: “ncal”}] 参数解释:- aliasName:视觉通道大小配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳 ;- type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartLabelFieldData
函数说明 | 图表视觉通道的标签信息注:当标签信息存在多字段时,按照从上往下的顺序依次在数组中排列 |
---|---|
调用示例 | var data = BI.getChartLabelFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “type”: “ncal”}, …] 参数解释:- aliasName:视觉通道标签配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartDetailFieldData
函数说明 | 图表视觉通道的详情信息注:当详情信息存在多字段时,按照从上往下的顺序依次在数组中排列 |
---|---|
调用示例 | var data = BI.getChartDetailFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “type”: “ncal”}, …] 参数解释:- aliasName:视觉通道详情配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳 ;- type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartAngleFieldData
函数说明 | 图表视觉通道的角度信息 |
---|---|
调用示例 | var data = BI.getChartAngleFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “销量”, “createTimeStamp”: “1687765466583”, “originName”: “销量”, “type”: “ncal”}] 参数解释:- aliasName:视觉通道角度配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartRowFieldData
函数说明 | 图表行区域拖入的字段信息 |
---|---|
调用示例 | var data = BI.getChartRowFieldData(); |
返回值 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “fieldType”: “Text”}, …] 参数解释:- aliasName:图表行区域拖入的字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - fieldType是字段的类型(Text:文本,Decimal:小数,Integer:整数,Date:日期,DateTime:日期时间) |
getChartColumnFieldData
函数说明 | 图表列区域拖入的字段信息 |
---|---|
调用示例 | var data = BI.getChartColumnFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “销量”, “createTimeStamp”: “1687765466583”, “originName”: “销量”, “fieldType”: “Integer”}, …] 参数解释:- aliasName:图表列区域拖入的字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - fieldType是字段的类型(Text:文本,Decimal:小数,Integer:整数,Date:日期,DateTime:日期时间) |
getChartColorFieldKeyByIndex
函数说明 | 视觉通道颜色区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartColorFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartSizeFieldKeyByIndex
函数说明 | 视觉通道大小区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartSizeFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 销量 |
getChartLabelFieldKeyByIndex
函数说明 | 视觉通道标签区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartLabelFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartDetailFieldKeyByIndex
函数说明 | 视觉通道详情区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartDetailFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartAngleFieldKeyByIndex
函数说明 | 视觉通道角度区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartAngleFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 销量 |
getChartRowFieldKeyByIndex
函数说明 | 图表行区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartRowFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartColumnFieldKeyByIndex
函数说明 | 图表列区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartColumnFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 销量 |
getEcharts
函数说明 | 获取Echarts,当前支持的版本是5.4.x |
---|---|
调用示例 | const echart = BI.getEcharts(); |
返回值类型 | 对象 |
getEchartsInstance
函数说明 | 获取Echarts实例 |
---|---|
调用示例 | const myEchart = BI.getEchartsInstance(); |
返回值类型 | 对象 |
更多内容,可前往七析帮助中心了解。
实践讲解
图表数据使用数据集数据
使用数据集数据制作图表关键函数为dataset(),下述通过具体的示例来为您演示:
代码示例:
//获取数据集及其关联数据集关联后的结果集,输出的结果集会根据输入的字段以及顺序进行输出
var ds = BI.dataset([
{'dataSetName':'产品','fieldName':'产品名称','showName':'产品名称'},
{'dataSetName':'产品类别','fieldName':'类别名称','showName':'类别'},
{'dataSetName':'产品','fieldName':'已销售量','showName':'已销售量'}
],true);
ds = await ds;
console.log(ds)
var myChart = BI.getEchartsInstance()
var option;
//构造图表需要的数据结构
var category = BI.keyValueToArrayData(ds, ['类别'])[0];
category = Array.from(new Set(category))
var data = new Array();
$.each(category,function(index,item){
var children = new Array();
var v = 0;
$.each(ds,function(i,oo){
if(item===oo['类别']){
var c = {
name: oo['产品名称'],
value: oo['已销售量']
}
v += oo['已销售量'];
children.push(c);
return true;
}
})
var a = {
name: item,
value: v,
children: children
}
data.push(a)
})
console.log(data)
//制作矩形树图
option = {
series: [
{
type: 'treemap',
data: data
}
]
};
option && myChart.setOption(option);
mg-PpGmRMiG-1699867467768)
图表数据使用外部接口数据
使用外部接口的数据制作图表,则需要使用JS语法中的 fetch 函数,且若请求链接存在跨域则搭配内嵌函数中transformBaseUrl()函数来请求外部接口的数据,下述通过具体的示例来为您演示:
代码示例:
//请求外部接口数据,且该接口存在跨域
const url = 'https://api.oioweb.cn/api/weather/GetWeather';
let response = await fetch(BI.transformBaseUrl(url), {method: 'GET'});
//接口返回的数据(JSON对象)
var data = await response.json();
data = data['result']['forecast'];
//构造折线图需要的数据结构
var xdata = new Array();
var sdata = new Array();
for(var item of data) {
xdata.push(item['predictDate']);
sdata.push(item['tempDay']);
}
//折线图
var myChart = BI.getEchartsInstance()
var option = {
xAxis: {
data: xdata
},
yAxis: {
name: '气温(摄氏度)',
axisLabel: {
formatter: function (value) {
return value + ' °C';
}
}
},
series: [
{
data: sdata,
type: 'line'
}
],
tooltip:{
valueFormatter: function (value) {
return value + ' °C';
}
}
};
myChart.setOption(option);
最后给大家安利一下:七析BI是什么?
七析是一款帮助企业提高数据决策能力的嵌入式自助 BI 平台,无需代码,通过简单的拖拉拽即可实现数据可视化大屏、丰富多样的报表。提供从数据准备、数据处理、数据分析、数据分享于一体的数据可视化解决方案,让各个领域的人员,都能对业务数据进行自由探索和分析。
作者介绍:
道一云,成立于2004年,是中国低代码领域的领导厂商、腾讯战略投资企业、腾讯生态核心合作伙伴。拥有自主知识产权管理软件产品百余项,涵盖数字化应用构建低代码平台-七巧、全场景智能业务分析BI-七析、千人千面、数智化办公企业级门户-七星以及30多款开箱即用的场景应用。
欢迎关注:
公众号:道一云低代码(do1info)
官网: https://www.do1.com.cn/