---
order: 3
group:
  title: 事件区
---

## 事件详情右侧面板

Demo:

```tsx
import React, { useEffect } from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchEvent } from '../../../utils';

useEffect(() => {
  DispatchEvent('testId', 'biz-event-detail-updateById', { id: '377207' });
}, []);

const props = {
  id: 'testId',
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        right: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailRightPanel {...props} />
    </div>
  </div>
);
```

Empty:

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const data = [
  {
    records: [
      {
        id: 1,
        gmtCreate: '2020-06-09 14:16:10',
        content: 'content',
      },
    ],
  },
];

const props = {
  data,
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        right: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailRightPanel {...props} />
    </div>
  </div>
);
```