Vue项目后台部分5，ECharts，Home首页的制作，权限管理的菜单权限的相关逻辑

ECharts

基本使用

1、安装：cnpm install --save echarts
2、引入ECharts

import echarts from "echarts";
1

3、准备一个容器：容器就是显示图标的区域
4、基于准备好的DOM初始化echarts实例

this.mycharts = echarts.init(this.$refs.charts);
1

5、指定图标的配置项与数据

dataset(字符集)

• source数据源
• encode定义使用data哪个索引值的数据

内置组件

• 提示组件tooltip
• 系列切换组件legend，给两个图形分别起名
• 工具栏组件toobox
• 观看某一区域区域dataZoom
• 调整图标布局grid

坐标系

• 散点图scatter
• 双坐标，y轴写成数组形式，给单个图标设置yAxisIndex属性，0代表左边的y轴，1代表右边的y轴
• 多坐标

Home首页

静态组件

顶部

（1）封装一个子组件
（2）父组件引入子组件并使用
（3）利用props和作用域插槽设置每个小组件的样式

如何画一个圆润的折线图？
设置折现拐点样式透明度为0，itemStyle:{opacity:0}
series中加上smooth:true

如何让折线图在布局中完全显示？
grid中的left，top，right，bottom都设为0

如何给折线图填充？
areaStyle直接设置颜色，即为同色，

如何画一个进度条？
先画一个柱状图，让它在y轴均分，type:category
给x轴设置一个最小值为0，最大值100,min:0,max:100
然后再series中设置data的值即为它的百分比。data:[78]
设置宽度，barWidth:10
设置背景颜色，showBackground:true，background:{color:"#eee"}
在进度条中设置文本：label:{show:true,formatter:'|',position:"right"}

中部

1、动态样式
点击不同tab栏标题发生变化，可以用计算属性实现。

  computed: {
    //计算属性-标题
    title() {
      //重新设置配置项
      return this.activeName == "sale" ? "销售额" : "访问量";
      }
1
2
3
4
5
6

柱状图的标题发生变化利用监听属性实现，当tab栏发生变化时，重新修改图标的配置数据。
2、日历
安装dayjs: cnpm install --save dayjs
引入：import dayjs from "dayjs";
使用：

    //本天
    setDay() {
      const day = dayjs().format("YYYY-MM-DD");
      this.date = [day, day];
    },
    //本周
    setWeek() {
      const start = dayjs().day(1).format("YYYY-MM-DD");
      const end = dayjs().day(7).format("YYYY-MM-DD");
      this.date = [start, end];
    },
    //本月
    setMonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.date = [start, end];
    },
    //本年
    setYear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.date = [start, end];
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

底部

静态展示两个折线图已经一个饼图

3、动态展示
利用mock模拟数据，mock数据之后引入，在vue.config.js中开启mock数据。proxy中添加after: require('./mock/mock-server.js')

权限管理

静态组件

大量使用了elementUI，与之前的静态组件都十分相似

发送请求

携带添加角色的信息等等向服务器发送请求

菜单权限

逻辑1：
除去超级管理员可以访问所有菜单，其他用户是被超级管理员分配的菜单。当登录时，向服务器发送登录用户的信息，服务器会返回一个数组routes，数组由该用户需要访问的路由名称字符串组成。

逻辑2：
将所有路由进行分组，常量路由（任何角色都可以访问的菜单），异步路由（需要管理员分配的菜单），任意路由（不确定会出现，当满足条件时才出，如404）。此时需要书写一个方法，可以筛选出应该被展现的异步路由。使用数组的filiter方法过滤出异步路由的路由名与服务器返回数组内一样的字符串，此时返回true，得到了新的数组，然后将新的数组与常量路由和任意路由利用concat方法拼接成最终路由。然后将这个最终路由用addRoutes添加给路由器。

concat:
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法：array1.concat(array2,array3,...,arrayX)

注意：
在过滤时，判断路由是否还存在子路由，有的话需要用到递归。判断之后，在该方法的内部，让子路由携带参数（item.children, routes）再次调用该方法。

注意：
在element-ui中的tree树形控件，无法获取父节点的id，此时需要修改element-ui的源码。

vue elementUI tree树形控件获取父节点ID的实例
修改源码:
情况1: element-ui没有实现按需引入打包
  node_modules\element-ui\lib\element-ui.common.js    25382行修改源码  去掉 'includeHalfChecked &&'
  // if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
  if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
情况2: element-ui实现了按需引入打包
  node_modules\element-ui\lib\tree.js    1051行修改源码  去掉 'includeHalfChecked &&'
  // if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
  if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
1
2
3
4
5
6
7
8
9
10