图表渲染器,采用 echarts 渲染,配置格式跟 echarts 相同,echarts 配置文档
api 返回支持两种格式,一种是直接返回完整 echarts 配置,数据包含在配置里,具体格式请参考后面的静态数据写法,另一种是返回纯数据,具体请参考动态数据写法。
在 config
里填写完整的 echarts 配置,这里的数据是静态的。
Echarts 中有些配置不能为未定义,所以要使用变量,最好使用类似上面的
${line || []}
写法配置默认值,保证在数据加载完前渲染也不会报错
其中 api 返回内容是如下写法,可以看到通过数据映射语法,我们可以将 api 放回结果中的 line 字段作为折线的数据。
{
"status": 0,
"msg": "ok",
"data": {
"line": [65, 63, 10, 73, 42, 21]
}
}
除了 config
中的 data
,config
里的其它属性也都支持数据映射,还能支持数据映射中的各种过滤器。
有时候数据是在上层获取的,比如通过 service 中返回了数据,这时需要通过 trackExpression
来指定跟踪什么数据,比如下面的例子,数据是从 service 获取的就需要配置 trackExpression
。
如果
trackExpression
追踪的数据是对象数据,可以使用数据映射的json
方法将数据序列化之后再比较,例如"trackExpression": "${fieldToTrack|json}"
可以通过配置"clickAction": {}
,来指定图表节点的点击行为,支持 amis 的 行为。
然后在配置的行为中可以通过 数据链 获取到 echarts 鼠标事件 的值,例如下面例子中可以通过${value|json}
获取到点击节点的传入的数据值
点击下面坐标中的节点查看效果!
具体能拿到的参数请参考 Echarts 的文档,官方定义如下
type EventParams = {
// 当前点击的图形元素所属的组件名称,
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string;
// 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesType: string;
// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number;
// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string;
// 数据名,类目名
name: string;
// 数据在传入的 data 数组中的 index
dataIndex: number;
// 传入的原始数据项
data: Object;
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
// dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
// 其他大部分图表中只有一种 data,dataType 无意义。
dataType: string;
// 传入的数据值
value: number | Array;
// 数据图形的颜色。当 componentType 为 'series' 时有意义。
color: string;
};
配置api
,来远程拉取图标配置
从 amis 1.1.0 版本开始,ECharts 版本升级到 5.0.0,为了规避政策风险,在这个版本删除了之前的地图 geojson,如果需要这个功能需要手动引入。
方法是去 https://github.com/apache/echarts/tree/master/test/data/map/js
下载 china.js
和 world.js
。
对于 npm 版本,直接 import
这两个文件就行。
对于 JS SDK 版本,需要先加入如下代码如下方式:
window.echarts = amisRequire('echarts');
然后通过 script 标签引入这两个文件,或者用下面的新版方法
2.4.1 及以上版本
新增了 mapURL
及 mapName
两个配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 为上下文数据。 | |
mapURL | api | 地图 geo json 地址 | |
mapName | string | 地图名称 | |
loadBaiduMap | boolean | 加载百度地图 |
2.4.1 及以上版本
当前组件会对外派发以下事件,可以通过onEvent
来监听这些事件,并通过actions
来配置执行的动作,在actions
中可以通过${事件参数名}
或${event.data.[事件参数名]}
来获取事件产生的数据,详细请查看事件动作。
事件名称 | 事件参数 | 说明 |
---|---|---|
init | - | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |
click | 查看ECharst 事件与行为文档 | 鼠标点击时触发 |
mouseover | 查看ECharst 事件与行为文档 | 鼠标悬浮时触发 |
legendselectchanged | 查看ECharst 事件与行为文档 | 切换图例选中状态时触发 |
finished | {echarts: echarts.init(ref, theme)} | echarts 图表绘制完成, version > 6.11.0 |
当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称
、componentId: 该组件id
来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}
来配置具体的参数,详细请查看事件动作。
动作名称 | 动作配置 | 说明 |
---|---|---|
reload | - | 刷新(重新加载) |
setValue | value: object 更新的数据 |
更新数据,等于更新图表所依赖数据域中的变量 |
2.4.1 及以上版本,除了以上动作,还支持直接触发ECharts 组件行为,即通过actionType
指定行为名称,行为配置通过args: {动作配置项名称: xxx}
来配置具体的参数。
重新发送api
请求,刷新 Chart 时,只配置componentId
目标组件 ID 即可。
刷新 Chart 组件时,如果配置了data
,将发送data
给目标组件,并将该数据合并到目标组件的数据域中(如果配置"dataMergeMode": "override"
将覆盖目标组件的数据),然后重新请求数据。