2020-10-29 19:52:25 +08:00
|
|
|
/**
|
|
|
|
* @file 基于 amis 实现 ECharts 图表可视化编辑
|
|
|
|
*/
|
|
|
|
|
2020-11-03 12:43:33 +08:00
|
|
|
import {createHierarchy} from './EChartsEditor/Common';
|
|
|
|
import example from './EChartsEditor/Example';
|
2020-12-17 18:16:29 +08:00
|
|
|
|
|
|
|
import {lazyData} from './LazyData';
|
|
|
|
import React from 'react';
|
2021-01-19 14:17:51 +08:00
|
|
|
import Spinner from '../../src/components/Spinner';
|
2020-12-17 18:16:29 +08:00
|
|
|
|
|
|
|
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:
|
2021-01-07 23:35:03 +08:00
|
|
|
'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
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|