腾讯云图数据可视化自定义函数-操作指南（数据可视化大屏）-文档中心-腾讯云

自定义函数使用 javascript 编写，可以用来对数据源返回的数据做加工。数据处理流程图如下
﻿
﻿
 
举例
自定义函数可任意对数据进行处理，同时也可以使用内置函数一次性请求所有数据，然后更新其他组件。
可实现数组顺序倒换。
﻿
﻿
﻿
可对数据做过滤，仅显示100以上数据项。
﻿
﻿
﻿
内置函数
自定义函数内置了一些方便快捷的函数和属性，可使用 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。
﻿
﻿
﻿
// 可以传递任意个 componentId 参数
this.notifyUpdate('component/ChartColumnBasic_1_0_0_0_1583399807314', 'component/EchartMixLineBar_1_0_0_1_1583418533793')
一次性请求大屏所有数据
如果想一次性拉取大屏所有图表的数据，避免大屏进行多次请求，可以参考下面的示例用自定义函数实现。
这里将设计一个大屏，柱状图和折线图从缓存中读取数据，饼图负责数据拉取。
饼图数据拉取成功后将通知柱状图和折线图刷新。
﻿
﻿
﻿
设置饼图的自定义函数
首先调用内置函数请求接口获取数据，这个接口将返回当前大屏所有组件的数据（后文给出实现方式代码），我们将它缓存在 window.__globalData，然后通知其他组件刷新，最后返回缓存中当前组件的数据。
说明
这里的示例为了充分说明自定义函数的强大功能使用了 this.fetchJSON 接口发起 POST 请求，如果 API 支持这里也可以将数据源切换到 API 去发起 GET 的请求。
﻿
﻿
﻿
下面是图中的代码：
/**
 * @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) || []
}
需要为饼图开启，这样才会定时执行自定义函数。
﻿
﻿
﻿
设置柱状图和折线图的自定义函数
柱状图和折线图的自定义函数内容一致，直接从window.__globalData缓存中获取数据。
﻿
﻿
﻿
至此，大屏已创建完成。
实现接口
上面https://127.0.0.1/api接口的 NodeJs 示例代码如下（支持 node 8 及以上版本）：
说明
代码中的组件 ID 可通过右键大屏中的组件，然后单击【复制ID】获取。
const express = require('express')
const app = express()
const PORT = 443
const DATA_MAX = 120
const 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)
﻿
自定义函数

本页目录：

举例

内置函数

一次性请求大屏所有数据

设置饼图的自定义函数

设置柱状图和折线图的自定义函数

实现接口
