test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 10:38:16 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

ECharts 编辑器初始

Browse Source
This commit is contained in:
wuduoyi 2020-10-29 19:52:25 +08:00
parent 1c56e087bc
commit 28afe57339
8 changed files with 438 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

@ -1,4 +1,4 @@
language: node_js
node_js:
- 10
- 12
script: sh deploy-gh-pages.sh

178
examples/components/Echarts.tsx Normal file
View File

@ -0,0 +1,178 @@
/**
* @file 基于 amis 实现 ECharts 图表可视化编辑
*/
import title from './echarts/Title';
import titleStyle from './echarts/TitleStyle';
const titleControl = {
type: 'tabs',
tabs: [
{
title: '内容',
controls: [title]
},
{
title: '样式',
controls: [titleStyle]
}
]
};
export default {
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
title: 'ECharts 编辑器',
data: {
config: {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
magicType: {
show: false,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value',
name: '°C'
}
],
series: [
{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10]
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0]
}
]
}
},
body: [
{
type: 'form',
title: '',
controls: [
{
type: 'grid',
columns: [
{
md: 7,
controls: [
{
type: 'chart',
source: '${config}'
}
]
},
{
md: 5,
controls: [
{
name: 'config',
type: 'combo',
label: '',
noBorder: true,
multiLine: true,
controls: [
{
type: 'tabs',
mode: 'vertical',
className: 'echarts-editor',
tabs: [
// {
// title: '基础',
// tab: 'Content 2'
// },
{
title: '标题',
controls: [titleControl]
},
{
title: '视区',
controls: [
{
name: 'config.text',
type: 'text',
label: 'text'
}
]
},
{
title: 'X 轴',
tab: 'Content 2'
},
{
title: 'Y 轴',
tab: 'Content 2'
},
{
title: '图例',
tab: 'Content 2'
},
{
title: '提示',
tab: 'Content 2'
},
{
title: '工具',
tab: 'Content 2'
},
{
title: '标题',
tab: 'Content 2'
}
]
}
]
}
]
}
]
},
{
type: 'editor',
name: 'config',
language: 'json',
source: '${config}'
}
]
}
]
};

8
examples/components/Example.tsx
View File

@ -59,6 +59,7 @@ import OptionsPageSchema from './Linkage/Options';
import OptionsLocalPageSchema from './Linkage/OptionsLocal';
import WizardSchema from './Wizard';
import ChartSchema from './Chart';
import EchartsEditorSchema from './Echarts';
import HorizontalSchema from './Horizontal';
import VideoSchema from './Video';
import AudioSchema from './Audio';
@ -481,6 +482,13 @@ export const examples = [
path: '/examples/chart',
component: makeSchemaRenderer(ChartSchema)
},
{
label: 'Echarts 编辑器',
icon: 'fa fa-bar-chart',
path: '/examples/echarts',
component: makeSchemaRenderer(EchartsEditorSchema)
},
{
label: '轮播图',
icon: 'fa fa-pause',

1
examples/components/Form/StyleBuilder.jsx
View File

@ -262,6 +262,7 @@ export default {
label: '属性',
type: 'select',
searchable: true,
unique: true,
options: propertiesOptions
},
...valueTypeControls,

86
examples/components/echarts/Common.tsx Normal file
View File

@ -0,0 +1,86 @@
/**
* @file 生成一些通用的配置项
*/
/**
* 支持三种类型，一种是关键字，比如 auto，一种是数字，另一种是百分比
* @param name
* @param label
* @param labelForRadio 切换按钮的文字
* @param keywordList 关键字列表
*/
export const keywordOrNumber = (
name: string,
label: string,
labelForRadio: string,
keywordList: string[]
) => {
return [
{
type: 'button-group',
name: name,
label: labelForRadio,
options: [
{
label: '关键字',
value: keywordList[0]
},
{
label: '数字',
value: 2
},
{
label: '百分比',
value: 3
}
],
pipeIn: value => {
if (typeof value === 'undefined') {
return keywordList[0];
}
if (typeof value === 'string') {
if (value.indexOf('%') !== -1) {
return 3;
} else {
return keywordList[0];
}
} else if (typeof value === 'number') {
return 2;
} else {
return keywordList[0];
}
},
pipeOut: (value, oldValue) => {
if (value === 1) {
return keywordList[0];
} else if (value === 2) {
return 0;
} else if (value === 3) {
return '0%';
} else {
return keywordList[0];
}
}
},
{
type: 'select',
name: name,
label: label,
options: keywordList,
value: keywordList[0],
visibleOn: `(typeof data.${name} === "undefined") || ((typeof data.${name} === "string") && (data.${name}.indexOf("%") === -1))`
},
{
type: 'number',
name: name,
label: label,
visibleOn: `(typeof data.${name} === "number")`
},
{
type: 'text',
name: name,
label: label,
visibleOn: `(typeof data.${name} === "string") && (data.${name}.indexOf("%") !== -1)`
}
];
};

80
examples/components/echarts/Title.tsx Normal file
View File

@ -0,0 +1,80 @@
/**
* @file Echarts title 的配置
*/
export default {
name: 'title',
type: 'combo',
label: '',
noBorder: true,
multiLine: true,
controls: [
{
type: 'switch',
name: 'show',
value: true,
label: '是否显示标题组件'
},
{
type: 'container',
visibleOn: 'data.show',
controls: [
{
type: 'text',
name: 'text',
label: '主标题文本'
},
{
type: 'text',
name: 'link',
visibleOn: 'data.text',
label: '主标题文本超链接',
validations: {
isUrl: true
}
},
{
type: 'switch',
name: 'target',
value: 'blank',
visibleOn: 'data.link',
label: '指定窗口打开主标题超链接',
options: [
{label: '但前窗口打开', value: 'self'},
{label: '新窗口打开', value: 'blank'}
]
},
{
type: 'text',
name: 'subtext',
label: '副标题文本'
},
{
type: 'text',
name: 'sublink',
visibleOn: 'data.subtext',
label: '副标题文本超链接',
validations: {
isUrl: true
}
},
{
type: 'switch',
name: 'subtarget',
value: 'blank',
visibleOn: 'data.sublink',
label: '指定窗口打开副标题超链接',
options: [
{label: '但前窗口打开', value: 'self'},
{label: '新窗口打开', value: 'blank'}
]
},
{
type: 'switch',
name: 'triggerEvent',
label: '是否触发事件'
}
]
}
]
};

76
examples/components/echarts/TitleStyle.tsx Normal file
View File

@ -0,0 +1,76 @@
/**
* @file Echarts title 样式的配置
*/
import {keywordOrNumber} from './Common';
export default {
name: 'title',
type: 'combo',
label: '',
noBorder: true,
multiLine: true,
controls: [
{
type: 'select',
name: 'textAlign',
value: 'auto',
label: '整体（包括 text 和 subtext）的水平对齐',
options: ['auto', 'left', 'right', 'center']
},
{
type: 'select',
name: 'textVerticalAlign',
value: 'auto',
label: '整体（包括 text 和 subtext）的垂直对齐',
options: ['auto', 'top', 'bottom', 'middle']
},
{
type: 'number',
name: 'padding',
hiddenOn: 'Array.isArray(data.padding)',
value: 5,
label: '标题内边距，单位px'
},
{
type: 'switch',
name: 'padding',
label: '单独设置每个内边距',
pipeIn: (value, data) => {
return Array.isArray(value);
},
pipeOut: (value, oldValue) => {
if (typeof oldValue !== 'undefined') {
return Array.isArray(oldValue) ? 5 : [0, 0, 0, 0, 0];
}
return value ? [0, 0, 0, 0] : 5;
}
},
{
type: 'array',
name: 'padding',
label: '设置标题内边距',
remark:
'设置两个值将分别是上下的内边距、坐右的内边距；设置四个值则分别是上、右、下、左',
visibleOn: 'Array.isArray(data.padding)',
minLength: 2,
maxLength: 4,
items: {
type: 'number'
}
},
{
type: 'number',
value: 5,
name: 'itemGap',
label: '主副标题之间的间距'
},
...keywordOrNumber('left', '标题离容器左侧的距离', '左侧距离值类型', [
'auto',
'left',
'center',
'right'
])
]
};

8
examples/style.scss
View File

@ -912,3 +912,11 @@ a {
background-color: #333538;
}
}
// 让 echarts 编辑器的 tabs 更紧凑
.echarts-editor > .a-Tabs-links {
width: 3rem;
> .a-Tabs-link > a {
padding: 5px 5px 5px 7px;
}
}