手把手教你！BI产品入门只需这一篇！

普通图表、电子表格、自定义图表

普通图表和电子表格是在数据可视化和数据处理方面常用的工具，它们在不同场景下有各自的特点和用途。很多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/