创新实训博客（41）——管理员数据统计和搜索自动提示设计

添加用户性别饼状图

1. 显示效果

2. 接口调用

[code]// 性别统计
export function getSexStatistic() {
return request({
url: '/admin/user/statistics/sex',
method: 'get'
})
}

3. js端echarts数据显示部分配置

[code]          grid: {
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [{
name: '用户性别',
type: 'pie',
radius: ['35%', '55%'],
center: ['50%', '53%'],
avoidLabelOverlap: true,
label: {
position: 'outer'
},
data: [
{ value: data[0].count, name: '男' },
{ value: data[1].count, name: '未知' },
{ value: data[2].count, name: '女' }
]
}]

4. js端统计出总数的显示部分代码

[code]        var total = data[0].count + data[1].count + data[2].count
var option = ({
title: [{
text: '用户性别'
},
{
text: '{name|总数' + '}\n{val|' + total + '}',
top: 'center',
left: 'center',
textStyle: {
rich: {
name: {
fontSize: 12,
color: '#999999',
padding: [10, 0]
},
val: {
fontSize: 18,
color: '#000000'
}
}
}
}],

搜索自动提示示意图

前端html修改

autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性。

如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

[code]          <el-autocomplete v-model="search" :fetch-suggestions="querySearch" placeholder="请输入搜索内容" :trigger-on-focus="false" style="width: 100%">
<el-button slot="append" icon="el-icon-search" @click="routeToSearch" />
</el-autocomplete>

js调用部分

[code]    querySearch(queryString, cb) {
var tagList = this.tagList
var results = queryString ? tagList.filter(this.createFilter(queryString)) : tagList
console.log(results)
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter(queryString) {
return (tagItem) => {
return (tagItem.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
}