手把手教你！BI产品进阶只需这一篇！

道一云黑板报

于 2023-11-22 10:04:52 发布

阅读量67

点赞数

文章标签：低代码 java javascript 前端

本文链接：https://blog.csdn.net/Daoyiyun/article/details/134502029

版权

上一篇文章给大家讲述里BI基础入门：手把手教你！BI产品入门只需这一篇！
这一篇接着上一篇文章，继续一道一云为例，为大家讲解如何快速入门BI产品。

图表自适应

实现图表自适应关键函数为onDestroy()，

函数说明	监听JS图表销毁事件，通常在此处做onsize事件解绑等
调用示例	BI.onDestroy(() => { window.addEventListener(‘resize’, 函数) })

下述通过具体的示例来为您实现图表的自适应：
在这里插入图片描述

var myChart = BI.getEchartsInstance();
var option;

//柱状图
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);

//实现图表自适应
const chartsItem = BI.getEchartsInstance()
BI.onDestroy(()=>{
    window.addEventListener('resize', chartsItem.resize());
})
chartsItem.setOption(option)

动态引入Echarts

动态引入Echarts的关键代码为BI.loadScript(‘https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js’, ‘echarts’)
下述通过具体的示例来为您演示制作三维折线图正交投影–弹簧图：
代码示例：

//加载 Echats
await BI.loadScript('https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js', 'echarts') 
//加载 GL
await BI.loadScript('https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js', 'echarts-gl')
var ROOT_PATH = 'https://echarts.apache.org/examples';

var myChart = echarts.init(BI.getChartBoxDom());
var option;

var data = [];
// Parametric curve
for (var t = 0; t < 25; t += 0.001) {
  var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
  var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
  var z = t + 2.0 * Math.sin(75 * t);
  data.push([x, y, z]);
}
console.log(data.length);
option = {
  tooltip: {},
  backgroundColor: '#fff',
  visualMap: {
    show: false,
    dimension: 2,
    min: 0,
    max: 30,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  xAxis3D: {
    type: 'value'
  },
  yAxis3D: {
    type: 'value'
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    viewControl: {
      projection: 'orthographic'
    }
  },
  series: [
    {
      type: 'line3D',
      data: data,
      lineStyle: {
        width: 4
      }
    }
  ]
};
myChart.setOption(option);

在这里插入图片描述

图表数据使用行列区域数据

使用拖入行列区域数据制作图表，需先使用data()函数获取行列区域维度和度量返回的结果集，
data

函数说明	返回用户拖入至行列区域、视觉通道以及过滤器的字段计算后的结果集
调用示例	var data = BI.data();
返回值类型	类型：Array<{key:value}> 注意：key是字段别名
返回值结果示例	[ {'车系

再使用getChartRowFieldKeyByIndex()函数与getChartColumnFieldKeyByIndex()函数根据行列区域字段的索引，自动化获取其行列数据

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：视觉通道大小的配置

getChartColumnFieldKeyByIndex

函数说明	图表列区域拖入的字段，从上到下排列，根据坐标返回字段在集合中所对应的key
参数	参数1：数值，索引顺序
调用示例	var data = BI.getChartColumnFieldKeyByIndex(0);
返回值类型	类型：字符串或underfined
返回值结果示例	销量

下述通过具体的示例来为您演示：

在行列区域分别拖入【车系】及【销量】字段，编辑器选择【对开】模式，在代码编辑器中输入图表代码，点击【运行】按钮，如下图所示：
代码示例：

下面展示一些 内联代码片。

//获取行列区域维度和度量的结果集
var data = BI.data();
console.log(data)

var myChart = BI.getEchartsInstance();
var option;

//构造饼图需要的数据结构
var d = new Array();
for (var item of data) {
  //根据行列区域字段的索引，自动化获取其行列数据
  var m = {
    name: item[BI.getChartRowFieldKeyByIndex(0)],
    value: item[BI.getChartColumnFieldKeyByIndex(0)]
  }
  d.push(m);
}
console.log(d)

//制作饼图
option = {
  title: {
    text: '车系销量情况',
    subtext: '包含各区分公司',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: d,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);

在这里插入图片描述

图表颜色使用视觉通道中的颜色属性

图表颜色若需使用视觉通道颜色配置中自定义的配色且不跟随仪表盘主题变化而变化，则关键函数为getChartConfiguration()函数获取视觉通道的信息，得到配色主题ID，再根据配色主题ID使用getThemeById()函数，获取用户选择具体的配色信息

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：视觉通道大小的配置

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：主题名称

下述通过具体的示例来为您演示：
在行列区域分别拖入【部门】及【工资】字段，在视觉通道的颜色配置中拖入【部门】字段，并选择配色为【自定义-粉色】，编辑器选择【对开】模式，在代码编辑器中输入图表代码，点击【运行】按钮，如下图所示：

代码示例：

//获取行列区域的维度及度量形成的结果集（包含视觉通道字段的数据）
var data = BI.data();
console.log(data)
//获取图表的视觉通道配置信息
var chartConfig = BI.getChartConfiguration();
console.log(chartConfig)
//获取主题ID
var themeById = chartConfig.viewConfig.color.value;
//根据主题ID获取主题配色信息
var theme = BI.getThemeById(themeById)
console.log(theme)

var myChart = BI.getEchartsInstance();
var option;

var xdata = new Array();
var sdata = new Array();
for (var item of data) {
  //根据data返回的数据，拼装相应的数据
  xdata.push(item[BI.getChartRowFieldKeyByIndex(0)]);
  sdata.push(item[BI.getChartColumnFieldKeyByIndex(0)]);
}

option = {
    xAxis: {
        type: 'category',
        data: xdata
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: sdata,
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    //设置主题配色
                    var colorList = theme.colors;
                    return colorList[params.dataIndex]
                }
            }
        }
    }],
    tooltip: {
        trigger: 'axis'
    }
};

option && myChart.setOption(option);

修改仪表盘主题配色，JS图表中柱状图配色由于为【自定义-粉红】，故不跟随仪表盘主题配色变化，如下图所示：
在这里插入图片描述

七析BI是什么？

最后给大家安利一下：七析BI是什么？
七析是一款帮助企业提高数据决策能力的嵌入式自助 BI 平台，无需代码，通过简单的拖拉拽即可实现数据可视化大屏、丰富多样的报表。提供从数据准备、数据处理、数据分析、数据分享于一体的数据可视化解决方案，让各个领域的人员，都能对业务数据进行自由探索和分析。

作者介绍：
道一云，成立于2004年，是中国低代码领域的领导厂商、腾讯战略投资企业、腾讯生态核心合作伙伴。拥有自主知识产权管理软件产品百余项，涵盖数字化应用构建低代码平台-七巧、全场景智能业务分析BI-七析、千人千面、数智化办公企业级门户-七星以及30多款开箱即用的场景应用。

欢迎关注：
公众号：道一云低代码（do1info）
官网： https://www.do1.com.cn/

道一云黑板报

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
手把手教你！BI产品进阶只需这一篇！

七析是一款帮助企业提高数据决策能力的嵌入式自助 BI 平台，无需代码，通过简单的拖拉拽即可实现数据可视化大屏、丰富多样的报表。提供从数据准备、数据处理、数据分析、数据分享于一体的数据可视化解决方案，让各个领域的人员，都能对业务数据进行自由探索和分析。作者介绍：道一云，成立于2004年，是中国低代码领域的领导厂商、腾讯战略投资企业、腾讯生态核心合作伙伴。
复制链接

扫一扫