mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
feat:chart接入事件动作 (#5669)
This commit is contained in:
hsm-lv
GitHub
parent
c43064a43f
commit
ad1d133f86
@ -478,9 +478,19 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
| trackExpression | `string` | | 当这个表达式的值有变化时更新图表 |
|
||||
| dataFilter | `string` | | 自定义 echart config 转换，函数签名：function(config, echarts, data) {return config;} 配置时直接写函数体。其中 config 是当前 echart 配置，echarts 就是 echarts 对象，data 为上下文数据。 |
|
||||
|
||||
## 事件表
|
||||
|
||||
> 2.4.1 及以上版本
|
||||
|
||||
当前组件会对外派发`click`、`mouseover`、`legendselectchanged`事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。事件参数提供通用的字段，可以查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/)。
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| -------- | -------------------------- | ------------------------------------------ |
|
||||
| reload | - | 刷新（重新加载） |
|
||||
| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |
|
||||
|
||||
2.4.1 及以上版本，除了以上动作，还支持直接触发[ECharts 组件行为](https://echarts.apache.org/handbook/zh/concepts/event/#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA)，即通过`actionType`指定行为名称，行为配置通过`args: {动作配置项名称: xxx}`来配置具体的参数。
|
||||
|
||||
@ -0,0 +1,98 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
title: 'chart组件事件',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '显示提示框',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
componentId: 'chart01',
|
||||
actionType: 'showTip',
|
||||
args: {
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
name: '',
|
||||
dataIndex: 8
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
id: 'chart01',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '详情',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span>当前选中值 ${value|json}<span>'
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
api: '/api/mock2/chart/chart1'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
config: {
|
||||
title: {
|
||||
text: '极坐标双数值轴'
|
||||
},
|
||||
legend: {
|
||||
data: ['line']
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '54%']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'value',
|
||||
startAngle: 0
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0
|
||||
},
|
||||
series: [
|
||||
{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: [
|
||||
[0, 0],
|
||||
[0.03487823687206265, 1],
|
||||
[0.06958655048003272, 2],
|
||||
[0.10395584540887964, 3],
|
||||
[0.13781867790849958, 4],
|
||||
[0.17101007166283433, 5],
|
||||
[0.2033683215379001, 6],
|
||||
[0.2347357813929454, 7],
|
||||
[0.26495963211660245, 8],
|
||||
[0.2938926261462365, 9],
|
||||
[0.3213938048432697, 10]
|
||||
]
|
||||
}
|
||||
],
|
||||
animationDuration: 2000
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -87,6 +87,7 @@ import ServiceEventSchema from './EventAction/cmpt-event-action/ServiceEvent';
|
||||
import CarouselEventSchema from './EventAction/cmpt-event-action/CarouselEvent';
|
||||
import TableEventSchema from './EventAction/cmpt-event-action/TableEvent';
|
||||
import ListEventSchema from './EventAction/cmpt-event-action/ListEvent';
|
||||
import ChartEventSchema from './EventAction/cmpt-event-action/ChartEvent';
|
||||
import ReloadFormActionSchema from './EventAction/reload-action/ReloadForm';
|
||||
import ReloadSelectActionSchema from './EventAction/reload-action/ReloadSelect';
|
||||
import ReloadChartActionSchema from './EventAction/reload-action/ReloadChart';
|
||||
@ -727,6 +728,11 @@ export const examples = [
|
||||
label: '列表展示类组件',
|
||||
path: 'examples/event/list',
|
||||
component: makeSchemaRenderer(ListEventSchema)
|
||||
},
|
||||
{
|
||||
label: 'chart组件',
|
||||
path: 'examples/event/chart',
|
||||
component: makeSchemaRenderer(ChartEventSchema)
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Renderer, RendererProps} from 'amis-core';
|
||||
import {ActionObject, Renderer, RendererProps} from 'amis-core';
|
||||
import {ServiceStore, IServiceStore} from 'amis-core';
|
||||
|
||||
import {filter, evalExpression} from 'amis-core';
|
||||
@ -26,6 +26,20 @@ import {
|
||||
import {ActionSchema} from './Action';
|
||||
import {isAlive} from 'mobx-state-tree';
|
||||
import debounce from 'lodash/debounce';
|
||||
import pick from 'lodash/pick';
|
||||
|
||||
const DEFAULT_EVENT_PARAMS = [
|
||||
'componentType',
|
||||
'seriesType',
|
||||
'seriesIndex',
|
||||
'seriesName',
|
||||
'name',
|
||||
'dataIndex',
|
||||
'data',
|
||||
'dataType',
|
||||
'value',
|
||||
'color'
|
||||
];
|
||||
|
||||
/**
|
||||
* Chart 图表渲染器。
|
||||
@ -195,6 +209,7 @@ export class Chart extends React.Component<ChartProps> {
|
||||
this.reload = this.reload.bind(this);
|
||||
this.reloadEcharts = debounce(this.reloadEcharts.bind(this), 300); //过于频繁更新 ECharts 会报错
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.dispatchEvent = this.dispatchEvent.bind(this);
|
||||
this.mounted = true;
|
||||
|
||||
props.config && this.renderChart(props.config);
|
||||
@ -243,14 +258,41 @@ export class Chart extends React.Component<ChartProps> {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
handleClick(ctx: object) {
|
||||
const {onAction, clickAction, data} = this.props;
|
||||
async handleClick(ctx: object) {
|
||||
const {onAction, clickAction, data, dispatchEvent} = this.props;
|
||||
|
||||
const rendererEvent = await dispatchEvent(
|
||||
(ctx as any).event,
|
||||
createObject(data, {
|
||||
...pick(ctx, DEFAULT_EVENT_PARAMS)
|
||||
})
|
||||
);
|
||||
|
||||
if (rendererEvent?.prevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
clickAction &&
|
||||
onAction &&
|
||||
onAction(null, clickAction, createObject(data, ctx));
|
||||
}
|
||||
|
||||
dispatchEvent(ctx: any) {
|
||||
const {data, dispatchEvent} = this.props;
|
||||
|
||||
dispatchEvent(
|
||||
(ctx as any).event,
|
||||
createObject(data, {
|
||||
...pick(
|
||||
ctx,
|
||||
ctx.type === 'legendselectchanged'
|
||||
? ['name', 'selected']
|
||||
: DEFAULT_EVENT_PARAMS
|
||||
)
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
refFn(ref: any) {
|
||||
const chartRef = this.props.chartRef;
|
||||
const {chartTheme, onChartWillMount, onChartUnMount, env} = this.props;
|
||||
@ -298,6 +340,8 @@ export class Chart extends React.Component<ChartProps> {
|
||||
|
||||
onChartMount?.(this.echarts, echarts);
|
||||
this.echarts.on('click', this.handleClick);
|
||||
this.echarts.on('mouseover', this.dispatchEvent);
|
||||
this.echarts.on('legendselectchanged', this.dispatchEvent);
|
||||
this.unSensor = resizeSensor(ref, () => {
|
||||
const width = ref.offsetWidth;
|
||||
const height = ref.offsetHeight;
|
||||
@ -324,6 +368,13 @@ export class Chart extends React.Component<ChartProps> {
|
||||
this.ref = ref;
|
||||
}
|
||||
|
||||
doAction(action: ActionObject, data: object, throwErrors: boolean = false) {
|
||||
return this.echarts?.dispatchAction?.({
|
||||
type: action.actionType,
|
||||
...data
|
||||
});
|
||||
}
|
||||
|
||||
reload(
|
||||
subpath?: string,
|
||||
query?: any,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user