# 进阶教程

在进阶教程中,可以利用代码实现更多隐藏功能,推荐有编程基础的同学学习。

# 使用tab切换不同图表

通过组件的交互事件展示不同图表,原理很简单就是切换按钮时展示指定的图表隐藏其他图表:

  • 创建一个按钮单选组件,选择需要的几个图表,拖拽至画布相同位置,将多个图表名称修改为[名称][index]的形式,如柱形图0、柱形图1。
  • 将按钮单选组件数据中的value修改为和图标名称后index相同,如图表命名为0、1、2,则value的值也应为0、1、2。 按钮组件数据:
{
  "defaultValue": 1,
  "optionList": [
    {
      "label": "选项1",
      "value": 0
    },
    {
      "label": "选项2",
      "value": 1
    },
    {
      "label": "选项3",
      "value": 2
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 为按钮组件添加一个【返回值改变】的事件:
function onValChange(value,$element,$global){
    $global.$query.byConditions('name ~ 柱形图')
  .then(matches => {
    matches.forEach(match => {
      match.changeAttr('display', match.name.endsWith(value) ? '' : 'none')
    })
  })

}
1
2
3
4
5
6
7
8
9

提醒

byConditions('name ~ 柱形图')会匹配到项目中所有名为柱形图的元素。

关于byConditions('name ~ 柱形图')的使用和说明点击:

组件数据和组件事件

# 在饼图的图例中展示数据值

创建一个饼图,选择【图例】配置项中的【自定义文本】:

function formatter(name,data){
  const result = data.find(d => d[0] === name)
  return name + ' '+ result[1] + '件'
}
1
2
3
4

# 在饼图的标签和图例中展示数据的比例

创建一个饼图,选择【图例】配置项中的【自定义文本】:s

function formatter(name,data){
  const total = data.reduce((result, item) => (result += item[1]), 0)
  const target = data.find(d => d[0] === name)
  return name + ' ' +  Math.round(target[1] / total * 100) +'%'
}
1
2
3
4
5

选择饼图中的【标签】配置项【自定义格式】:

function formatter(options){
  return options.name + ' ' + Math.round(options.percent) + '%'
}
1
2
3