mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
ECharts 编辑器初始
This commit is contained in:
wuduoyi
parent
1c56e087bc
commit
28afe57339
@ -1,4 +1,4 @@
|
|||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- 10
|
- 12
|
||||||
script: sh deploy-gh-pages.sh
|
script: sh deploy-gh-pages.sh
|
||||||
|
|||||||
178
examples/components/Echarts.tsx
Normal file
178
examples/components/Echarts.tsx
Normal 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}'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -59,6 +59,7 @@ import OptionsPageSchema from './Linkage/Options';
|
|||||||
import OptionsLocalPageSchema from './Linkage/OptionsLocal';
|
import OptionsLocalPageSchema from './Linkage/OptionsLocal';
|
||||||
import WizardSchema from './Wizard';
|
import WizardSchema from './Wizard';
|
||||||
import ChartSchema from './Chart';
|
import ChartSchema from './Chart';
|
||||||
|
import EchartsEditorSchema from './Echarts';
|
||||||
import HorizontalSchema from './Horizontal';
|
import HorizontalSchema from './Horizontal';
|
||||||
import VideoSchema from './Video';
|
import VideoSchema from './Video';
|
||||||
import AudioSchema from './Audio';
|
import AudioSchema from './Audio';
|
||||||
@ -481,6 +482,13 @@ export const examples = [
|
|||||||
path: '/examples/chart',
|
path: '/examples/chart',
|
||||||
component: makeSchemaRenderer(ChartSchema)
|
component: makeSchemaRenderer(ChartSchema)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: 'Echarts 编辑器',
|
||||||
|
icon: 'fa fa-bar-chart',
|
||||||
|
path: '/examples/echarts',
|
||||||
|
component: makeSchemaRenderer(EchartsEditorSchema)
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '轮播图',
|
label: '轮播图',
|
||||||
icon: 'fa fa-pause',
|
icon: 'fa fa-pause',
|
||||||
|
|||||||
@ -262,6 +262,7 @@ export default {
|
|||||||
label: '属性',
|
label: '属性',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
searchable: true,
|
searchable: true,
|
||||||
|
unique: true,
|
||||||
options: propertiesOptions
|
options: propertiesOptions
|
||||||
},
|
},
|
||||||
...valueTypeControls,
|
...valueTypeControls,
|
||||||
|
|||||||
86
examples/components/echarts/Common.tsx
Normal file
86
examples/components/echarts/Common.tsx
Normal 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
80
examples/components/echarts/Title.tsx
Normal 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
76
examples/components/echarts/TitleStyle.tsx
Normal 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'
|
||||||
|
])
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -912,3 +912,11 @@ a {
|
|||||||
background-color: #333538;
|
background-color: #333538;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 让 echarts 编辑器的 tabs 更紧凑
|
||||||
|
.echarts-editor > .a-Tabs-links {
|
||||||
|
width: 3rem;
|
||||||
|
> .a-Tabs-link > a {
|
||||||
|
padding: 5px 5px 5px 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user