自定义函数使用 javascript 编写,可以用来对数据源返回的数据做加工。数据处理流程图如下
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/7caba2ed834fcc69981acbab30060f0f.png)
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/7caba2ed834fcc69981acbab30060f0f.png)
举例
自定义函数可任意对数据进行处理,同时也可以使用内置函数一次性请求所有数据,然后更新其他组件。
可实现数组顺序倒换。
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/727fd98296a52507eec3aedfd992b980.png)
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/727fd98296a52507eec3aedfd992b980.png)
可对数据做过滤,仅显示100以上数据项。
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/70b88bbd14c21c57eae0fb01a0f62dd4.png)
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/70b88bbd14c21c57eae0fb01a0f62dd4.png)
内置函数
自定义函数内置了一些方便快捷的函数和属性,可使用 this 访问。
this.id
获取当前的组件 ID。this.fields.[FIELD_NAME]
获取全局变量this.fetchJSON(options): Promise <data>
请求 json 数据,支持跨域。options.url
请求地址,如:https://www.example.com/api
。options.method
请求方法,如:GET、POST。options.params
请求参数对象,如:{ a:1, b:2 }
。this.notifyUpdate(...componentIds): void
通知组件重新获取数据、加工数据、图表显示。可在组件属性面板菜单,单击拷贝组件ID获取 componentId。
![](https://qcloudimg.tencent-cloud.cn/image/document/f945d9157d16ada42545d502debd1e31.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f945d9157d16ada42545d502debd1e31.png)
// 可以传递任意个 componentId 参数this.notifyUpdate('component/ChartColumnBasic_1_0_0_0_1583399807314', 'component/EchartMixLineBar_1_0_0_1_1583418533793')
一次性请求大屏所有数据
如果想一次性拉取大屏所有图表的数据,避免大屏进行多次请求,可以参考下面的示例用自定义函数实现。
这里将设计一个大屏,柱状图和折线图从缓存中读取数据,饼图负责数据拉取。
饼图数据拉取成功后将通知柱状图和折线图刷新。
![示例](https://qcloudimg.tencent-cloud.cn/image/document/78fd672db9e754ea0eefff599385da4c.png)
![示例](https://qcloudimg.tencent-cloud.cn/image/document/78fd672db9e754ea0eefff599385da4c.png)
设置饼图的自定义函数
首先调用内置函数请求接口获取数据,这个接口将返回当前大屏所有组件的数据(后文给出实现方式代码),我们将它缓存在
window.__globalData
,然后通知其他组件刷新,最后返回缓存中当前组件的数据。说明
这里的示例为了充分说明自定义函数的强大功能使用了 this.fetchJSON 接口发起 POST 请求,如果 API 支持这里也可以将数据源切换到 API 去发起 GET 的请求。
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/9bc34bc15308b8d37864b6fe574b9a4c.png)
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/9bc34bc15308b8d37864b6fe574b9a4c.png)
下面是图中的代码:
/*** @param {any[]} data 数据源返回的数据* @return {any[]} 自定义函数处理后的数据*/async function process(data) {const result = await this.fetchJSON({url: 'https://127.0.0.1/api',method: 'POST'})if (!window.__globalData) {window.__globalData = new Map()}// 设置数据缓存result.forEach(com => {window.__globalData.set(com.id, com.data)})// 通知其他组件刷新result.filter(com => com.id !== this.id).forEach(com => this.notifyUpdate(com.id))// 返回当前组件的缓存数据return window.__globalData && window.__globalData.get(this.id) || []}
需要为饼图开启,这样才会定时执行自定义函数。
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/527a23f7f939d5cf21ca3e46cd6750f4.png)
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/527a23f7f939d5cf21ca3e46cd6750f4.png)
设置柱状图和折线图的自定义函数
柱状图和折线图的自定义函数内容一致,直接从
window.__globalData
缓存中获取数据。![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/0e945bd09a8e0f8dc3c056d5d982ebcb.png)
![自定义函数](https://qcloudimg.tencent-cloud.cn/image/document/0e945bd09a8e0f8dc3c056d5d982ebcb.png)
至此,大屏已创建完成。
实现接口
上面
https://127.0.0.1/api
接口的 NodeJs 示例代码如下(支持 node 8 及以上版本):说明
代码中的组件 ID 可通过右键大屏中的组件,然后单击【复制ID】获取。
const express = require('express')const app = express()const PORT = 443const DATA_MAX = 120const CORS_ALLOW_ORIGIN = ['http://yuntu.cloud.tencent.com','https://yuntu.cloud.tencent.com','http://v.yuntus.com','https://v.yuntus.com']function randomNumber(max) {return parseInt(Math.random() * max, 10)}app.options('/api', (req, res, next) => {const origin = req.header('origin')if (CORS_ALLOW_ORIGIN.includes(origin)) {res.header('Access-Control-Allow-Origin', origin)res.header('Access-Control-Allow-Credentials', true)res.header('Access-Control-Allow-Headers', req.get('Access-Control-Request-Headers'))}res.end()})app.post('/api', (req, res, next) => {// 设置响应 CORS 头const origin = req.header('origin')if (CORS_ALLOW_ORIGIN.includes(origin)) {res.header('Access-Control-Allow-Origin', origin)res.header('Access-Control-Allow-Credentials', true)res.header('Access-Control-Allow-Headers', req.get('Access-Control-Request-Headers'))}res.json([{id: 'component/ChartPieBasic_1_0_0_2_1583461715768',data: [{x: '1K以下',y: randomNumber(DATA_MAX)},{x: '1K~2K元',y: randomNumber(DATA_MAX)},{x: '2K~3K元',y: randomNumber(DATA_MAX)}]},{id: 'component/ChartColumnBasic_1_0_0_1_1583461707890',data: [{x: '一月',y: randomNumber(DATA_MAX),s: 's1'},{x: '二月',y: randomNumber(DATA_MAX),s: 's1'},{x: '三月',y: randomNumber(DATA_MAX),s: 's1'}]},{id: 'component/ChartLineBasic_1_0_0_0_1583461700285',data: [{x: '一月',y: randomNumber(DATA_MAX),s: 's1'},{x: '二月',y: randomNumber(DATA_MAX),s: 's1'},{x: '三月',y: randomNumber(DATA_MAX),s: 's1'}]}])})app.listen(PORT)