echarts用法
1 页面上为 ECharts 准备一个具备大小(宽高)的 DOM,并引入ECharts
2 在mounted中基于准备好的dom,初始化echarts实例echarts.init(document.getElementById('main')) dom中 id="main"
3 调接口获取数据,传进setOption方法中
npm install echarts --save import * as echarts from 'echarts'
总结:引入js,选一个图表容器(DIV),初始化echarts对象并绑定到该容器上
给绑定的echarts容器配置图表参数来展示数据
根据业务结合官网API的属性和方法对图表进行自由控制
在mounted中加载
权限管理(角色列表)
搜索人员:首先把输入框中的值v-model绑定到一个空对象中,点击搜索按钮,事件中调接口把这个对象传进去,之后根据状态码判断如果失败提示下用户(Message),之后把得到的数据赋给用户列表 【这个搜索本身其实就是获取用户列表getUserList】
添加角色:点击事件中将相应的布尔值改为true,弹出添加角色对话框(dialog组件),里边有两个输入框输入名称及描述(from),然后这俩输入框的值v-model绑定到一个空对象上,然后点击确定按钮中调接口把对象中的信息传进去,根据状态码判断成功失败各自提示下用户(Message),更改对应的布尔值,重新获取数据
删除: 点击按钮先弹框提示用户(MessageBox) ,然后确认的话就掉接口,然后根据状态码判断成功失败各自提示下用户,之后重新获取数据列表
分配权限:首先点击事件中把点击这一项的id传进去,之后调接口获取所有权限数据,把数据赋给权限列表数组,在页面上渲染这个数组,之后把控制权限弹框的布尔值改为true
分配权限对话框(dialog加tree属性组件),点击确定按钮时,通过实例ref拿到树形组件tree的id值,然后调接口把大id(用户id)和小id(每项权限的id)传进去,根据返回值判断成功失败弹窗提示用户,之后重新获取列表数据,并将对应的布尔值该为false
这个项目着重点放在我自己了解上就行了,因为没法点开看所以不会问的特别详细,光写写权限列表,增删改查,以及用了那些组件,还有这个echast
对人员进行增加 删除及分配不同权限以及通过ECharts直观的进行数据展示