在vue的方法里面，我们定义一个画饼的方法,这里定义的输入就是请求后端返回的数据，其他的看echarts的配置项，这边都配好了（如果写成单个组件，需要根据业务考虑相关的配置项，目前这边就care数据项）。逻辑是这样子的，定义了一个基于数据项变动的配置项options，然后当执行drawPie方法的时候，如果没有初始化echarts，那么我们这边就初始化一个echarts的饼，如果有，那么我们就只有更新相关的options就好了。
drawPie(source) { const options = { title: { text: '各追查类型占比统计' }, tooltip: { trigger: 'item', formatter: '{b} : ({d}%)' }, legend: { orient: 'vertical', x: 'left', y: 'bottom', data: ['银行查控', '电话查控', '虚拟账号查控', '网站查控'] }, dataset: { source }, series: { type: 'pie', label: { position: 'outer', alignTo: 'edge', margin: 10, formatter: '{@name}: {@count} ({d}%)' }, encode: { itemName: 'name', value: 'count' } } } if (this.pieChart) { this.pieChart.setOption(options, true) } else { this.pieChart = echarts.init(this.$refs.pieChart) this.pieChart.setOption(options, true) } } 画柱形图跟楼上的类似的，画柱子如楼下所示：
drawBar(source) { const options = { title: { text: `各月份止付金额之和统计, 合计： ${this.totalAmount}元` }, dataset: { source }, xAxis: { type: 'category', name: '时间' }, yAxis: [ { type: 'value', name: '止付金额' } ], series: [ { type: 'bar', encode: { x: 'name', y: 'amount' }, label: { normal: { show: true, position: 'top' } } } ] } if (this.barChart) { this.barChart.setOption(options, true) } else { this.barChart = echarts.init(this.$refs.barChart) this.barChart.setOption(options, true) } },备注：考虑到需求量不大，这里笔者是为了赶进度偷懒写成这样的，学习的话，建议封装成一个个组件，例如pie.vue,bar.vue这样子去搞。
功能实现-页面权限控制和页面权限的按钮权限粒度控制因为这个项目涉及到多个角色，这就涉及到对多个角色的页面控制了，每个角色分配的页面权限是不一样的，第二个就是进入到页面后，针对某一条记录，该登录用户按钮的权限控制。
页面权限控制页面的权限这边有两种做法，分别是控制权在前端，和控制权在后端两种，在前端的话是通过获取用户信息的角色，根据角色去匹配，匹配中了就加到路由里面。在后端的话，就是登录的时候后端就把相应的路由返回给你，前端这边注册路由。
借着vue-element-admin的东风，笔者这边是将控制权放在前端，在路由的meta中加入roles角色去做页面的权限控制的。
参见 vue-element-admin - 路由和侧边栏：
参见 vue-element-admin - 权限验证：
按钮权限控制首先我们来分析下，针对我们这个系统，不外乎删除、修改、详情、审核、追查等等按钮权限，不是特别多，所以我们可以用detail、modify、delete、audit、check等去表示这些按钮，后端在service层进行相关业务处理，把它们这些包到一个数组btnList里面返回给前端，跟前端这边做对比，如果命中那么我们就展示按钮。
核心代码如下：
template
<template v-if="column.key === 'actions'"> <el-table-column :key="column.key" :width="column.width" :label="column.title" > <template slot-scope="scope"> <el-button v-for="action in filterOperate( column.actions, scope.row.btnList )" :key="action.type" type="text" size="small" @click="handleClick(scope.row, action.type, action.title)" >{{ action.title }}</el-button> </template> </el-table-column> </template> filterOperate(actions, btnList) { return actions.filter(action => btnList.includes(action.type)) }那么我们就可以这么使用了
columns: [ ...... { title: '操作', key: 'actions', align: 'center', actions: [ { title: '详情', type: 'detail' }, { title: '修改', type: 'modify' } ] } ]