amis/examples/components/ECharts.tsx

154 lines
4.0 KiB
TypeScript
Raw Normal View History

2020-10-29 19:52:25 +08:00
/**
* @file amis ECharts
*/
import {createHierarchy} from './EChartsEditor/Common';
import example from './EChartsEditor/Example';
import {lazyData} from './LazyData';
import React from 'react';
2021-01-19 14:17:51 +08:00
import Spinner from '../../src/components/Spinner';
const LazyComponent = lazyData(
async () =>
(
await Promise.all([
import('./EChartsEditor/Title'),
import('./EChartsEditor/Legend'),
import('./EChartsEditor/Global'),
import('./EChartsEditor/Axis'),
import('./EChartsEditor/Polar'),
import('./EChartsEditor/Tooltip'),
import('./EChartsEditor/Toolbox'),
import('./EChartsEditor/Series')
])
).map(item => item.default),
([title, legend, Global, Axis, polar, tooltip, toolbox, series]) => {
return ({renderFormItems}: any) => {
return renderFormItems({
controls: [
createHierarchy('config', [
{
type: 'tabs',
mountOnEnter: true,
// unmountOnExit: true, // 加了更慢的样子
mode: 'vertical',
className: 'echarts-editor',
tabs: [
{
title: '图表',
controls: [series]
},
{
title: '标题',
controls: [title]
},
{
title: '图例',
controls: [legend]
},
{
title: 'X 轴',
controls: Axis('x')
},
{
title: 'Y 轴',
controls: Axis('y')
},
{
title: '极标',
controls: [polar]
},
{
title: '提示框',
controls: [tooltip]
},
{
title: '工具栏',
controls: [toolbox]
},
{
title: '全局',
controls: [Global]
}
]
}
])
]
});
};
}
);
2020-10-29 19:52:25 +08:00
export default {
2020-12-25 12:09:26 +08:00
type: 'page',
cssVars: {
'--Form-input-paddingY': '0.25rem'
},
2020-12-22 15:31:57 +08:00
title:
'ECharts 图表可视化编辑,用于演示如何基于 amis 将任意 json 配置改造成可视化编辑,这个例子无法复制配置,实现方式请在源码中寻找',
2020-10-29 19:52:25 +08:00
data: {
2020-10-30 17:58:23 +08:00
config: example
2020-10-29 19:52:25 +08:00
},
body: [
{
type: 'form',
title: '',
controls: [
{
2020-12-25 12:09:26 +08:00
type: 'grid',
columns: [
{
sm: 12,
md: 5,
columnClassName: 'pl-1 pr-0.5',
controls: [
{
type: 'chart',
source: '${config}',
replaceChartOption: true,
unMountOnHidden: false
},
{
type: 'editor',
name: 'config',
language: 'json',
disabled: true,
options: {
lineNumbers: 'off'
},
source: '${config}'
2020-10-29 19:52:25 +08:00
}
2020-12-25 12:09:26 +08:00
]
},
{
sm: 12,
md: 7,
columnClassName: 'pl-0.5 pr-1',
controls: [
{
2021-01-19 14:17:51 +08:00
component(props: any) {
2020-12-25 12:09:26 +08:00
return (
<React.Suspense
fallback={
<Spinner
overlay
spinnerClassName="m-t-lg"
size="lg"
/>
}
>
<LazyComponent {...props} />
</React.Suspense>
);
}
}
]
}
]
2020-10-29 19:52:25 +08:00
}
]
}
]
};