自定义图表

概述

自定义图表可通过自动化、表达式两种方式组装渲染数据，并支持图表、HTML、Markdown三种渲染类型。相较于图表、富文本卡片，自由度更高，上手难度也更高。

设置项

设置项	说明
数据源类型	配置数据源的类型。选项：`调用自动化`、`使用表达式计算`
调用自动化返回数据	数据源类型`调用自动化`时调用的自动化。通过`设置自动化返回值`步骤，返回数据
使用表达式计算数据	数据源类型`使用表达式计算`时执行的表达式。
渲染类型	配置自定义图表的显示方式。选项：`图表`、`HTML`、`Markdown`。不同的渲染类型，返回数据需要使用不同的数据结构，具体参考下文渲染类型及数据结构说明文档
点击后调用自动化	点击自定义图表内容后触发的自动化。
双击后调用自动化	双击自定义图表内容后触发的自动化。
在以下数据表变更时刷新图表	配置的数据表数据发生变更时（包含数据表记录创建、数据表记录删除、数据表记录修改），刷新卡片数据

渲染类型及数据结构

图表渲染类型，返回数据为JSON对象，配置项与Echarts一致，支持将JSON对象作为Echarts配置项进行图表渲染。数据结构示例：

javascript

{
    "xAxis": {
      "type": 'category',
      "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    "yAxis": {
      "type": 'value'
    },
    "series": [
      {
        "data": [150, 230, 224, 218, 135, 147, 260],
        "type": 'line'
      }
    ]
}

HTML渲染类型，返回数据的为字符串类型，支持将HTML格式的字符串渲染为DOM节点。数据结构示例：

javascript

`
<h1>hellow world</h1>
`

注意：因直接渲染HTML，很容易导致XSS攻击，请只对可信内容使用HTML渲染类型，绝不要将用户提供内容作为返回数据。

Markdown渲染类型，返回数据的为字符串类型，支持将Markdown格式的字符串渲染为DOM节点。数据结构示例：

javascript

`
# hellow world
`

交互

图表渲染类型，点击或者双击图表可以触发一个自动化程序，自动化程序接受一个参数，类型如下：

javascript

{
    name:String,//类目名
    color:String,//数据图形的颜色
    seriesName:String,//图表名称
    seriesType:String,//图表类型
    type:String,//事件类型 click dblclick
    value:Object,//点击的值
}

注意：仅图表渲染类型下可用

使用示例

假设一个气象监测站需要查看全年降雨量与蒸发量的对比图，并需要显示全年降雨量蒸发量最大最小值平均值，我们可以使用渲染类型为图表，并通过自动化设置自动化返回值步骤返回对应数据：

javascript

{
  "title": { "text": "降雨量与蒸发量", "subtext": "虚拟数据" },
  "tooltip": { "trigger": "axis" },
  "legend": { "data": ["Rainfall", "Evaporation"] },
  "toolbox": {
    "show": true,
    "feature": {
      "dataView": { "show": true, "readOnly": false },
      "magicType": { "show": true, "type": ["line", "bar"] },
      "restore": { "show": true },
      "saveAsImage": { "show": true }
    }
  },
  "calculable": true,
  "xAxis": [
    {
      "type": "category",
      "data": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    }
  ],
  "yAxis": [{ "type": "value" }],
  "series": [
    {
      "name": "降雨量",
      "type": "bar",
      "data": [2, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3],
      "markPoint": {
        "data": [
          { "type": "max", "name": "Max" },
          { "type": "min", "name": "Min" }
        ]
      },
      "markLine": { "data": [{ "type": "average", "name": "Avg" }] }
    },
    {
      "name": "蒸发量",
      "type": "bar",
      "data": [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3],
      "markPoint": {
        "data": [
          { "name": "Max", "value": 182.2, "xAxis": 7, "yAxis": 183 },
          { "name": "Min", "value": 2.3, "xAxis": 11, "yAxis": 3 }
        ]
      },
      "markLine": { "data": [{ "type": "average", "name": "Avg" }] }
    }
  ]
}

使用示例

自定义图表 ​

概述 ​

设置项 ​

渲染类型及数据结构 ​

交互 ​

使用示例 ​

自定义图表

概述

设置项

渲染类型及数据结构

交互

使用示例