简化配置(默认配置)

通过简化配置可以将一些常用的配置用常量标识,减少重复代码的编写。可以使用ams内部继承的配置,也可以在项目自行配置,在文末自定义有使用说明。

在ams内部目前集成了以下几种简化配置,通过在Console控制台打印ams.configs也可以查看

FORM_SUBMIT

提交按钮的简化配置

  1. operations: {
  2. BASE: 'FORM_SUBMIT'
  3. }
  4. 等同于
  5. operations: {
  6. submit: {
  7. type: 'button',
  8. label: '提交',
  9. props: {
  10. type: 'primary'
  11. }
  12. }
  13. }

SELECT_REMOTE

远程搜索的简化配置,更多的配置详见远程搜索

  1. select: {
  2. BASE: 'SELECT_REMOTE',
  3. label: 'select',
  4. type: 'select',
  5. remoteConfig: {
  6. action: 'http://xxx.vip.com/examples/admin/mock/simple.tags.json',
  7. queryKey: 'requiredName'
  8. }
  9. }

LIST

列表页的简化配置

  1. list: {
  2. BASE: 'LIST'
  3. }
  4. 等同于
  5. list: {
  6. type: 'list'
  7. }

LINE

折线图的简化配置

  1. line: {
  2. BASE: 'LINE'
  3. }
  4. 等同于
  5. line: {
  6. type: 'line',
  7. toolbox: {
  8. show: true,
  9. trigger: 'axis'
  10. },
  11. legend: {
  12. data: 'data.legend'
  13. },
  14. xAxis: {
  15. data: 'data.xAxis'
  16. }
  17. }

BAR

柱状图的简化配置

  1. bar: {
  2. BASE: 'BAR'
  3. }
  4. 等同于
  5. bar: {
  6. type: 'bar',
  7. tooltip: {
  8. show: true,
  9. trigger: 'axis' // 触发类型, axis 坐标轴触发
  10. },
  11. legend: {
  12. data: 'data.legend'
  13. },
  14. xAxis: {
  15. data: 'data.xAxis'
  16. }
  17. }

PIE

饼状图的简化配置

  1. pie: {
  2. BASE: 'PIE'
  3. }
  4. 等同于
  5. pie: {
  6. type: 'pie',
  7. tooltip: {
  8. trigger: 'item',
  9. formatter: '{a} <br/>{b}: {c} ({d}%)'
  10. },
  11. legend: {
  12. orient: 'vertical',
  13. x: 'left',
  14. data: 'data.legend'
  15. }
  16. }

FUNNEL

漏斗图的简化配置

  1. funnel: {
  2. BASE: 'FUNNEL'
  3. }
  4. 等同于
  5. funnel: {
  6. tooltip: {
  7. trigger: 'item',
  8. formatter: '{a} <br/>{b} : {c}%'
  9. },
  10. toolbox: {
  11. feature: {
  12. dataView: { readOnly: false },
  13. restore: {},
  14. saveAsImage: {}
  15. }
  16. },
  17. legend: {
  18. data: 'data.legend'
  19. }
  20. }

SCATTER

散点图的简化配置

  1. scatter: {
  2. BASE: 'SCATTER'
  3. }
  4. 等同于
  5. scatter: {
  6. tooltip: {
  7. trigger: 'item'
  8. },
  9. legend: {
  10. right: 10,
  11. data: 'data.legend'
  12. },
  13. xAxis: {
  14. scale: true
  15. },
  16. yAxis: {
  17. scale: true // y轴不会强制包含零刻度,在双数值轴的散点图中比较有用
  18. }
  19. }

RADAR

雷达图的简化配置

  1. radar: {
  2. BASE: 'RADAR'
  3. }
  4. 等同于
  5. radar: {
  6. tooltip: {
  7. trigger: 'item'
  8. },
  9. legend: {
  10. data: 'data.legend',
  11. right: 0
  12. },
  13. // 雷达图坐标系, 每一个轴(indicator 指示器)都是一个单独的维度
  14. radar: {
  15. name: {
  16. textStyle: {
  17. color: '#fff',
  18. backgroundColor: '#999',
  19. borderRadius: 3,
  20. padding: [3, 5]
  21. }
  22. }
  23. }
  24. }

自定义

可以调用ams.config(config)设置自定义的简化配置,如需要一个TEXT类型,则可以设置

  1. ams.config({
  2. TEXT: {
  3. type: 'text',
  4. style: {}
  5. }
  6. })
  7. 使用时如下:
  8. custom: {
  9. BASE: 'TEXT'
  10. }