Chart 图表

图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，echarts 配置文档

基本用法

```schema: scope=”body” { “type”: “chart”, “api”: “/api/mock2/chart/chart”, “interval”: 5000 }

  2. api 返回支持两种格式，一种是直接返回完整 echarts 配置，数据包含在配置里，具体格式请参考后面的静态数据写法，另一种是返回纯数据，具体请参考动态数据写法。
  4. ## 静态数据
  6. 在 `config` 里填写完整的 echarts 配置，这里的数据是静态的。
  8. ```schema: scope="body"
  9. {
  10.     "type": "chart",
  11.     "config": {
  12.         "title": {
  13.             "text": "极坐标双数值轴"
  14.         },
  15.         "legend": {
  16.             "data": [
  17.                 "line"
  18.             ]
  19.         },
  20.         "polar": {
  21.             "center": [
  22.                 "50%",
  23.                 "54%"
  24.             ]
  25.         },
  26.         "tooltip": {
  27.             "trigger": "axis",
  28.             "axisPointer": {
  29.                 "type": "cross"
  30.             }
  31.         },
  32.         "angleAxis": {
  33.             "type": "value",
  34.             "startAngle": 0
  35.         },
  36.         "radiusAxis": {
  37.             "min": 0
  38.         },
  39.         "series": [
  40.             {
  41.                 "coordinateSystem": "polar",
  42.                 "name": "line",
  43.                 "type": "line",
  44.                 "showSymbol": false,
  45.                 "data": [
  46.                     [
  47.                         0,
  48.                         0
  49.                     ],
  50.                     [
  51.                         0.03487823687206265,
  52.                         1
  53.                     ],
  54.                     [
  55.                         0.06958655048003272,
  56.                         2
  57.                     ],
  58.                     [
  59.                         0.10395584540887964,
  60.                         3
  61.                     ],
  62.                     [
  63.                         0.13781867790849958,
  64.                         4
  65.                     ],
  66.                     [
  67.                         0.17101007166283433,
  68.                         5
  69.                     ],
  70.                     [
  71.                         0.2033683215379001,
  72.                         6
  73.                     ],
  74.                     [
  75.                         0.2347357813929454,
  76.                         7
  77.                     ],
  78.                     [
  79.                         0.26495963211660245,
  80.                         8
  81.                     ],
  82.                     [
  83.                         0.2938926261462365,
  84.                         9
  85.                     ],
  86.                     [
  87.                         0.3213938048432697,
  88.                         10
  89.                     ]
  90.                 ]
  91.             }
  92.         ],
  93.         "animationDuration": 2000
  94.     },
  95.     "clickAction": {
  96.         "actionType": "dialog",
  97.         "dialog": {
  98.             "title": "详情",
  99.             "body": [
  100.                 {
  101.                     "type": "tpl",
  102.                     "tpl": "<span>当前选中值 ${value|json}<span>"
  103.                 },
  104.                 {
  105.                     "type": "chart",
  106.                     "api": "/api/mock2/chart/chart1"
  107.                 }
  108.             ]
  109.         }
  110.     }
  111. }

动态数据

如果要实现动态数据，需要在 config 中做调整，比如将前面的例子改成如下写法

```schema: scope=”body” { “type”: “chart”, “api”: “/api/mock2/chart/chartData”, “config”: { “xAxis”: { “type”: “category”, “data”: [“Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”] }, “yAxis”: { “type”: “value” }, “series”: [{ “data”: “${line}”, “type”: “line” }] } }

  2. 其中 api 返回内容是如下写法，可以看到通过[数据映射]($docs-docs-concepts-data-mapping)语法，我们可以将 api 放回结果中的 line 字段作为折线的数据。
  4. ```json
  5. {
  6.   "status": 0,
  7.   "msg": "ok",
  8.   "data": {
  9.     "line": [65, 63, 10, 73, 42, 21]
  10.   }
  11. }

除了 config 中的 data，config 里的其它属性也都支持数据映射，还能支持数据映射中的各种过滤器。

使用上层数据接口

有时候数据是在上层获取的，比如通过 service 中返回了数据，这时需要通过 trackExpression 来指定跟踪什么数据，比如下面的例子，数据是从 service 获取的就需要配置 trackExpression。

```schema: scope=”body” { “type”: “service”, “api”: “/api/mock2/chart/chartData”, “interval”: 3000, “body”: [ { “type”: “chart”, “trackExpression”: “${line}”, “config”: { “xAxis”: { “type”: “category”, “data”: [“Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”] }, “yAxis”: { “type”: “value” }, “series”: [{ “data”: “${line}”, “type”: “line” }] } } ] }

  2. ## 配置图表点击行为
  4. 可以通过配置`"clickAction": {}`，来指定图表节点的点击行为，支持 amis 的 [行为](./action)。
  6. 然后在配置的行为中可以通过 [数据链](../../docs/concepts/datascope-and-datachain) 获取到 [echarts 鼠标事件](https://echarts.apache.org/zh/api.html#events.%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.click) 的值，例如下面例子中可以通过`${value|json}`获取到点击节点的`传入的数据值`
  8. > 点击下面坐标中的节点查看效果！
  10. ```schema: scope="body"
  11. {
  12.     "type": "chart",
  13.     "config": {
  14.         "title": {
  15.             "text": "极坐标双数值轴"
  16.         },
  17.         "legend": {
  18.             "data": [
  19.                 "line"
  20.             ]
  21.         },
  22.         "polar": {
  23.             "center": [
  24.                 "50%",
  25.                 "54%"
  26.             ]
  27.         },
  28.         "tooltip": {
  29.             "trigger": "axis",
  30.             "axisPointer": {
  31.                 "type": "cross"
  32.             }
  33.         },
  34.         "angleAxis": {
  35.             "type": "value",
  36.             "startAngle": 0
  37.         },
  38.         "radiusAxis": {
  39.             "min": 0
  40.         },
  41.         "series": [
  42.             {
  43.                 "coordinateSystem": "polar",
  44.                 "name": "line",
  45.                 "type": "line",
  46.                 "showSymbol": false,
  47.                 "data": [
  48.                     [
  49.                         0,
  50.                         0
  51.                     ],
  52.                     [
  53.                         0.03487823687206265,
  54.                         1
  55.                     ],
  56.                     [
  57.                         0.06958655048003272,
  58.                         2
  59.                     ],
  60.                     [
  61.                         0.10395584540887964,
  62.                         3
  63.                     ],
  64.                     [
  65.                         0.13781867790849958,
  66.                         4
  67.                     ],
  68.                     [
  69.                         0.17101007166283433,
  70.                         5
  71.                     ],
  72.                     [
  73.                         0.2033683215379001,
  74.                         6
  75.                     ],
  76.                     [
  77.                         0.2347357813929454,
  78.                         7
  79.                     ],
  80.                     [
  81.                         0.26495963211660245,
  82.                         8
  83.                     ],
  84.                     [
  85.                         0.2938926261462365,
  86.                         9
  87.                     ],
  88.                     [
  89.                         0.3213938048432697,
  90.                         10
  91.                     ]
  92.                 ]
  93.             }
  94.         ],
  95.         "animationDuration": 2000
  96.     },
  97.     "clickAction": {
  98.         "actionType": "dialog",
  99.         "dialog": {
  100.             "title": "详情",
  101.             "body": [
  102.                 {
  103.                     "type": "tpl",
  104.                     "tpl": "<span>当前选中值 ${value|json}<span>"
  105.                 },
  106.                 {
  107.                     "type": "chart",
  108.                     "api": "/api/mock2/chart/chart1"
  109.                 }
  110.             ]
  111.         }
  112.     }
  113. }

远程拉取动态配置项

配置api，来远程拉取图标配置

```schema: scope=”body” { “type”: “chart”, “api”: “/api/mock2/chart/chart1” }

  2. ## 通过组件间联动，更新图表
  4. ```schema: scope="body"
  5. [
  6.     {
  7.         "type": "form",
  8.         "title": "过滤条件",
  9.         "target": "chart1,chart2",
  10.         "submitOnInit": true,
  11.         "className": "m-b",
  12.         "wrapWithPanel": false,
  13.         "mode": "inline",
  14.         "body": [
  15.             {
  16.                 "type": "input-date",
  17.                 "label": "开始日期",
  18.                 "name": "starttime",
  19.                 "value": "-8days",
  20.                 "maxDate": "${endtime}"
  21.             },
  22.             {
  23.                 "type": "input-date",
  24.                 "label": "结束日期",
  25.                 "name": "endtime",
  26.                 "value": "-1days",
  27.                 "minDate": "${starttime}"
  28.             },
  29.             {
  30.                 "type": "input-text",
  31.                 "label": "条件",
  32.                 "name": "name",
  33.                 "addOn": {
  34.                     "type": "submit",
  35.                     "label": "搜索",
  36.                     "level": "primary"
  37.                 }
  38.             }
  39.         ],
  40.         "actions": []
  41.     },
  42.     {
  43.         "type": "divider"
  44.     },
  45.     {
  46.         "type": "grid",
  47.         "className": "m-t-lg",
  48.         "columns": [
  49.             {
  50.                 "type": "chart",
  51.                 "name": "chart1",
  52.                 "initFetch": false,
  53.                 "api": "/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}"
  54.             },
  55.             {
  56.                 "type": "chart",
  57.                 "name": "chart2",
  58.                 "initFetch": false,
  59.                 "api": "/api/mock2/chart/chart2?name=$name"
  60.             }
  61.         ]
  62.     }
  63. ]

对函数配置的特殊支持

ECharts 中有些配置项可以写函数，比如 formatter 和 sort，但在 JSON 里无法写函数，因此我们做了特殊支持，将看起来像函数的字符串转成了函数：

```schema: scope=”body” { “type”: “chart”, “config”: { “legend”: { “formatter”: “function (name) { return ‘Legend ‘ + name;}” }, “dataset”: { “source”: [[“type”,”2012”,”2013”,”2014”,”2015”,”2016”],[“Forest”,320,332,301,334,390],[“Steppe”,220,182,191,234,290],[“Desert”,150,232,201,154,190],[“Wetland”,98,77,101,99,40]] }, “xAxis”: { “type”: “category”, “axisTick”: { “show”: false } }, “yAxis”: {}, “series”: [{“type”:”bar”,”seriesLayoutBy”:”row”},{“type”:”bar”,”seriesLayoutBy”:”row”},{“type”:”bar”,”seriesLayoutBy”:”row”},{“type”:”bar”,”seriesLayoutBy”:”row”}] } }

  2. ## 使用地图
  4. 从 amis 1.1.0 版本开始，ECharts 版本升级到 5.0.0，为了规避政策风险，在这个版本删除了之前的地图 geojson，如果需要这个功能需要手动引入。
  6. 方法是去 `https://github.com/apache/echarts/tree/master/test/data/map/js` 下载 `china.js` 和 `world.js`。
  8. 对于 npm 版本，直接 `import` 这两个文件就行。
  10. 对于 JS SDK 版本，需要先加入如下代码如下方式：
  12. ```javascript
  13. window.echarts = amisRequire('echarts');

然后通过 script 标签引入这两个文件。

动态处理 echart 配置

echarts 的 config 一般是静态配置的，支持简单的数据映射。如果你觉得还不够灵活可以通过自己手写逻辑代码来完成配置。

通过配置 dataFiler 来处理。

schema: scope="body" { "type": "chart", "data": { "line": [65, 63, 10, 73, 42, 21], "line2": [22, 33, 90, 20, 11, 33] }, "config": { "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] }, "yAxis": { "type": "value" } }, "dataFilter": "config.series = [];Object.keys(data).forEach(function(key) {config.series.push({data: data[key], type: 'line'})})" }

属性表

属性名 类型 默认值 说明
type string "chart" 指定为 chart 渲染器
className string 外层 Dom 的类名
body SchemaNode 内容容器
api api 配置项接口地址
source 数据映射 通过数据映射获取数据链中变量值作为配置
initFetch boolean 组件初始化时，是否请求接口
interval number 刷新时间(最小 1000)
config object 或 string 设置 eschars 的配置项,当为string的时候可以设置 function 等配置项
style object 设置根元素的 style
width string 设置根元素的宽度
height string 设置根元素的高度
replaceChartOption boolean false 每次更新是完全覆盖配置项还是追加？
trackExpression string 当这个表达式的值有变化时更新图表
dataFilter string 自定义 echart config 转换，函数签名：function(config, echarts, data) {return config;} 配置时直接写函数体。其中 config 是当前 echart 配置，echarts 就是 echarts 对象，data 为上下文数据。

动作表

动作名称 动作配置 说明
reload - 刷新（重新加载）
setValue value: object 更新的数据 更新数据，等于更新图表所依赖数据域中的变量