• 0

  • 470

从vue到elementUI项目(四)

文艺中年

白天是程序员,晚上是文艺青年

1个月前

 

 

XX课堂后台视频管理理系统之首页开发

介绍mock.js及axios全局配置

Mock.js

  • 作用:生成随机数据,拦截ajax请求
  • 安装与axios:
yarn add mockjs -S
yarn add axios -S
  • 核心:
    • Mock.mock()
      // 根据数据模板⽣生成模拟数据
      Mock.mock( rurl, rtype, template)
      /*
      ** rurl: 表示需要拦截的 URL,可以是 URL 字符串串或 URL 正则
      ** eg. /\/domain\/list\.json/、'/domian/list.json'
      */
      
    • Mock.Random():随机生成数据

先在项目中对axios进行实例配置,在src中新建api文件夹,存放config.js,内容如下

import axios from 'axios'

// 创建一个axios实例
const service = axios.create({
    // 请求超时时间
    timeout: 3000
})

// 添加请求拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    err => {
        console.log(err)
    }
)

service.interceptors.response.use(
    response => {
        let res = {}
        res.status = response.status
        res.data = response.data
        return res
    },
    err => console.log(err)
)

export default service

在main.js中引入这个config,并挂载到vue上

...
import http from '@/api/config'
// 挂载在Vue实例上
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.$http = http // 这样以后就能通过this.app调用axios实例了
...

随机生成数据

  • 新建mock文件夹
  • 配置mock请求时间
  • 新建home.js存放主页的数据
  • 安装mock的语法生成数据

新建mock文件夹,存放home.js,设置模拟返回接口的数据

import Mock from 'mockjs'

export default {
  getHomeData: () => {
    return {
      code: 20000,
      data: {
        videoData: [
          {
            name: 'SpringBoot',
            value: Mock.Random.float(100, 8000, 0, 2),
          },
          {
            name: '小程序',
            value: Mock.Random.float(100, 8000, 0, 2),
          }
        ],
      },
    }
  },
}

同路径下新建index.js,对mock进行配置,设置拦截的请求信息以及返回data

import Mock from 'mockjs'
import homeApi from './home.js'

// 设置200-2000毫秒延时请求数据
Mock.setup({
  timeout: '200-2000',
})

// 首页相关
// 拦截的是 /home/getData
Mock.mock(/\/home\/getData/, 'get', homeApi.getHomeData)

最后在main.js引入这个mock/index.js进行初始化

...
import http from '@/api/config'
import './mock' // 配置mock/index.js
...

在Home/Home.vue中,加载首页后,调用这个接口,返回模拟数据

...
<script>
export default {
  mounted() {
    this.$http.get('/home/getData').then((res) => {
      console.log(res.data)
    })
  },
}
</script>
...

使用element布局组件实现首页布局

主要是选择组件和调整css样式

首先我们新建一个home对应的scss,在assets/scss新建home.scss

.home {
...先不填
}

再来配置Home.vue中的布局,先看卡最终效果

基本都是使用卡片布局,然后微调一些css样式

<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover" style="height:290px">
        鼠标悬浮时显示
      </el-card>
      <el-card shadow="hover" style="height:522px; margin-top:20px">
        鼠标悬浮时显示
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card shadow="hover" v-for="item in 6" :key="item.name">
          <i class="icon"></i>
          <div class="detail">
            <p class="num">¥ 1234</p>
            <p class="txt">今日支付订单</p>
          </div>
        </el-card>
      </div>
      <el-card shadow="hover">
        <div style="height:280px"></div>
      </el-card>
      <div class="graph">
        <el-card shadow="hover">
          <div style="height:280px"></div>
        </el-card>
        <el-card shadow="hover">
          <div style="height:280px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  mounted() {
    this.$http.get('/home/getData').then((res) => {
      console.log(res.data)
    })
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/home';
</style>

微调的home.scss代码如下

.home {

    // background-color: #000;
    .num {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .el-card {
            width: 32%;
            margin-bottom: 20px;
        }
    }

    .graph {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .el-card {
            width: 49%;
        }
    }
}

完成首页除图表外的内容

完成左边用户头像和登录信息

登录信息直接写死

<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" alt="" />
          <div class="userinfo">
            <p class="name">Nick</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间:<span>2020-09-04</span></p>
          <p>上次登录地点:<span>北京</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" style="height:522px; margin-top:20px">
        鼠标悬浮时显示
      </el-card>
    </el-col>
    <el-col :span="16">
...
    </el-col>
  </el-row>
</template>
...

对这一块的css进行微调,在home.scss中调整

.home {
...
    .user {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;

        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 40px;
        }
    }

    // 等同于.userinfo
    &info {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }

    // 用户头像下面的登录时间
    .login-info {
        p {
            line-height: 28px;
            font-size: 16px;
            color: #999999;

            span {
                color: #666666;
                margin-left: 60px;
            }
        }
    }
...
}

可以看到目前的效果为

完成右边显示数据

...
  data() {
    return {
      userImg: require('../../assets/images/user.png'),
      countData: [
        {
          name: '今日支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9',
        },
        {
          name: '今日收藏订单',
          value: 210,
          icon: 'star-on',
          color: '#ffb980',
        },
        {
          name: '今日未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef',
        },
        {
          name: '本月支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9',
        },
        {
          name: '本月收藏订单',
          value: 210,
          icon: 'star-on',
          color: '#ffb980',
        },
        {
          name: '本月未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef',
        },
      ],
    }
  },
...

通过v-for循环,渲染页面

<template>
 ...
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{ background: item.color }"
          ></i>
          <div class="detail">
            <p class="num">¥ {{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card shadow="hover">
        <div style="height:280px"></div>
      </el-card>
...
...

对这个home.scss进行微调

.home {
...
    // 配置页面右侧的icon样式
    .icon {
        font-size: 30px;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        color: #fff;
    }

    // 配置页面右侧的detail样式
    .detail {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .num {
            font-size: 30px;
            margin-bottom: 10px;
        }

        .txt {
            font-size: 14px;
            text-align: center;
            color: #999999;
        }
    }
}

这样右边的效果出来了
> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EDpTCO3t-1599481729667)(BA1AC6B660024D51A02947F07333FA6D)]

完成首页table部分及ECharts介绍

首页table部分

table部分的数据从home

先给mock下的/home.js加上我们的函数getStatisticalData,替换之前的getData

import Mock from 'mockjs'

// 图表数据
let List = []
export default {
  getStatisticalData: () => {
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          vue: Mock.Random.float(100, 8000, 0, 2),
          wechat: Mock.Random.float(100, 8000, 0, 2),
          ES6: Mock.Random.float(100, 8000, 0, 2),
          Redis: Mock.Random.float(100, 8000, 0, 2),
          React: Mock.Random.float(100, 8000, 0, 2),
          springboot: Mock.Random.float(100, 8000, 0, 2),
        })
      )
    }
    return {
      code: 20000,
      data: {
        tableData: [
          {
            name: 'ES6',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: '小程序',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'Vue',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'springboot',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'React',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'Redis',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
        ],
      },
    }
  },
}

在Home.vue中去调用这个模拟数据

<script>
export default {
  data() {
    return {
...
      tableData: [],
      tableLabel: {
        name: '课程',
        todayBuy: '今日购买',
        monthBuy: '本月购买',
        totalBuy: '总购买',
      },
    }
  },
  methods: {
    getTableData() {
      this.$http.get('/home/getData').then((res) => {
        console.log(res.data)
        res = res.data
        this.tableData = res.data.tableData
      })
    },
  },
  created() {
    this.getTableData()
  },
  mounted() {
    // this.$http.get('/home/getData').then((res) => {
    //   console.log(res.data)
    // })
  },
}
</script>

tableData为我们从mock得到的模拟数据,tableLabel是我们打算渲染表格的head,在table中根据tableLabel来循环data中绑定的数据tableData,tableLabel是一个key value,跟后台的数据相对应

在Home.vue的html中只需要绑定tableData、tableLabel这两个变量信息即可显示表格

<template>
  <el-row class="home" :gutter="20">
    ...
      <el-card shadow="hover" style="height:522px; margin-top:20px">
        <el-table :data="tableData">
          <el-table-column
            show-overflow-tooltip
            v-for="(val, key) in tableLabel"
            :label="val"
            :key="key"
            :prop="key"
          ></el-table-column>
        </el-table>
    ...
</template>

这样tableData的数据就渲染到表格中来了

ECharts的使用

  • 一个使用 JavaScript实现的开源可视化库,通过这个库可实现可视化展示数据
  • 快速入门
    • 先设置ECharts要在哪显示,设置EChart容器
      <body>
      <!-- 为 ECharts 准备⼀一个具备⼤大⼩小(宽⾼高)的 DOM -->
      <div id="main" style="width: 600px;height:400px;"></div>
      </body>
      
    • 通过 echarts.init方法初始化一个echarts实例并通过setOption 方法生成一个简单的柱状图
      // data中声明echart对象
      // 通过ref获取dom,初始化echarts实例例
      this.echart = echarts.init(this.$refs.ref名字);
      // 指定图表的配置项和数据
      var option = {
      title: {
      text: 'ECharts ⼊入⻔门示例例'
      },
      tooltip: {},
      legend: {
      data:['销量量']
      },
      xAxis: {
      data: ["衬衫","⽺羊⽑毛衫","雪纺衫","裤⼦子","⾼高跟鞋","袜⼦子"]
      },
      yAxis: {},
      series: [{
      name: '销量量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
      }]
      };
      // 使⽤用刚指定的配置项和数据显示图表。
      this.echart.setOption(option);
      
    • 案例

安装EChart

yarn add echarts -S

谈封装一个EChart组件的一些想法

封装一个组件,需要知道哪些属性是动态改变的,哪些是要通过外部传入的,是否需要初始化等

在项目components文件夹中新建一个EChart.vue组件,内容如下

<template>
  <div style="height: 100%" ref="echart">
    echart
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
        }
      },
    },
    isAxisChart: { // 是否需要显示坐标做
      type: Boolean,
      default: true,
    },
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption
    },
  },
  methods: {
    initChart() {
      // 初始化echarts
      this.initChartData()
      if (this.echart) {
        this.echart.setOption(this.options)
      } else {
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
      }
    },
    initChartData() {
      // 设置图表的data
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData
        this.axisOption.series = this.chartData.series
      } else {
        this.normalOption.series = this.chartData.series
      }
    },
  },
}
</script>

这是一个大体的封装框架,后面再根据情况进行补充

上手封装一个EChart组件并处理数据展示图表

echarts表格的核心就是xAxis、yAxis和series这三个部分,有了这三个部分就可以任意渲染出来一个图表

有坐标轴的图表
+ 数据格式
// 类⽬目轴 xAxis: { data: [], type: 'category', }, // 数据部分 yAxis: { type: 'value' }, series: []

没坐标轴的图表
+ 数据格式
{ series: [] }

下面需要补充mock的模拟数据,在home.js中加上orderData和userData、videoData

import Mock from 'mockjs'

// 图表数据
let List = []
export default {
  getStatisticalData: () => {
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          vue: Mock.Random.float(100, 8000, 0, 2),
          wechat: Mock.Random.float(100, 8000, 0, 2),
          ES6: Mock.Random.float(100, 8000, 0, 2),
          Redis: Mock.Random.float(100, 8000, 0, 2),
          React: Mock.Random.float(100, 8000, 0, 2),
          springboot: Mock.Random.float(100, 8000, 0, 2),
        })
      )
    }
    return {
      code: 20000,
      data: {
        // 折线图
        orderData: {
          date: [
            '20201001',
            '20201002',
            '20201003',
            '20201004',
            '20201005',
            '20201006',
            '20201007',
          ],
          data: List,
        },
        // 柱状图
        userData: [
          {
            date: '周一',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000),
          },
          {
            date: '周二',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000),
          },
          {
            date: '周三',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000),
          },
          {
            date: '周四',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000),
          },
          {
            date: '周五',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000),
          },
          {
            date: '周六',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000),
          },
          {
            date: '周日',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000),
          },
        ],
        // 饼图
        videoData: [
          {
            name: 'springboot',
            value: Mock.Random.float(1000, 10000, 0, 2),
          },
          {
            name: 'vue',
            value: Mock.Random.float(1000, 10000, 0, 2),
          },
          {
            name: '小程序',
            value: Mock.Random.float(1000, 10000, 0, 2),
          },
          {
            name: 'ES6',
            value: Mock.Random.float(1000, 10000, 0, 2),
          },
          {
            name: 'Redis',
            value: Mock.Random.float(1000, 10000, 0, 2),
          },
          { 
            name: 'React',
            value: Mock.Random.float(1000, 10000, 0, 2),
          },
        ],
        tableData: [
          {
            name: 'ES6',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: '小程序',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'Vue',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'springboot',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'React',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
          {
            name: 'Redis',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2),
          },
        ],
      },
    }
  },
}

补充EChart.vue组件的内容,让其响应data数据,并且监听data数据的变换

<template>
  <div style="height: 100%" ref="echart">
    echart
  </div>
</template>

<script>
import echarts from 'echarts'
...
  watch: {
    // 监听chartData是否发生改变
    chartData: {
      handler: function() {
        this.initChart()
      },
      deep: true,
    },
  },
  data() {
    return {
      echart: null,
      axisOption: {
        legend: {
          textStyle: {
            color: '#333',
          },
        },
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: [
          {
            type: 'value',
          },
        ],
      },
      normalOption: {
        series: [],
      },
    }
  },
...
}
</script>

到views下的Home/Home.vue,初始化控件,并将得到的数据绑定到控件,最后渲染到div中

<template>
 ...
      <el-card shadow="hover">
        <echart style="height: 280px" :chartData="echartData.order"></echart>
      </el-card>
      <div class="graph">
        <el-card shadow="hover">
          <echart style="height: 280px" :chartData="echartData.user"></echart>
        </el-card>
        <el-card shadow="hover">
          <echart
            style="height: 280px"
            :chartData="echartData.video"
            :isAxisChart="false"
          ></echart>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Echart from '../../components/EChart'
export default {
  components: {
    Echart,
  },
  data() {
 ...
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: [],
        },
      },
    }
  },
  methods: {
    getTableData() {
      this.$http.get('/home/getData').then((res) => {
        console.log(res.data)
        res = res.data
        this.tableData = res.data.tableData
        // 订单折线图
        const order = res.data.orderData
        this.echartData.order.xData = order.date
        // 第一步取出series中的name部分——键名
        let keyArray = Object.keys(order.data[0])
        // 第二步,循环添加数据
        keyArray.forEach((key) => {
          this.echartData.order.series.push({
            name: key === 'wechat' ? '小程序' : key,
            data: order.data.map((item) => item[key]),
            type: 'line',
          })
        })

        // 绘制bar图
        // 第一步取出series中的name部分——键名
        this.echartData.user.xData = res.data.userData.map((item) => item.date) // 遍历每一项,取出来key值
        this.echartData.user.series.push({
          // 给series喂数据
          name: '新增用户',
          data: res.data.userData.map((item) => item.new),
          type: 'bar',
        })
        this.echartData.user.series.push({
          name: '活跃用户',
          data: res.data.userData.map((item) => item.active),
          type: 'bar',
          barGap: 0, // 两个柱状图之间的间隔
        })

        // video 饼图
        this.echartData.video.xData = res.data.videoData.map(
          (item) => item.name
        ) // 遍历每一项,取出来key值
        this.echartData.video.series.push({
          // data: res.data.videoData.map((item) => item.value),
          data: res.data.videoData,
          type: 'pie',
        })
      })
    },
  },
  created() {
    this.getTableData()
  },
  mounted() {
    // this.$http.get('/home/getData').then((res) => {
    //   console.log(res.data)
    // })
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/home';
</style>

现在所有的图都已经做完了,下来只需要对图表做一下样式的调整即可

修改EChart组件样式及自适应图表

修改EChart组件样式

完善图表选项,主要是让表格配置颜色以及点击效果,修改地方在EChart.vue组件中

...
<script>
...
  data() {
    return {
      echart: null,
      axisOption: {
        legend: {
          textStyle: {
            color: '#333', // 配置文字描述的字体颜色
          },
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: { // 更改X轴线的颜色
              color: '#17b3a3'
            }
          },
          axisLabel: { // 如果不加这个样式,x轴的标签也是#17b3a3颜色
            color: '#333'
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLine: { // 更改Y轴线的颜色
              lineStyle: {
                color: '#17b3a3'
              }
            },
          },
        ],
        color: [
          '#2ec7c9',
          '#b6a2de',
          '#5ab1ef',
          '#ffb980',
          '#d87a80',
          '#8d98b3',
          '#e5cf0d',
          '#97b552',
          '#95706d',
          '#dc69aa',
          '#07a2a4',
          '#9a7fd1',
          '#588dd5',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ],
        tooltip: { // 点到x坐标上触发对比效果
          trigger: 'axis'
        },
        grid: { // 绘制折线图的偏移,默认10%
          left: '20%'
        },
      },
      normalOption: {
        // 配置饼图的颜色和点击效果
        tooltip: {
          trigger: 'item'
        },
        color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
        series: [],
      },
    }
  },
...
  },
}
</script>

其他地方都不需要修改,现在的效果如下

完成自适应图表

有些情况,我们需要图表进行自适应伸缩

  • 浏览器器窗口大小发生变化
  • 折叠菜单的时候

浏览器器窗口大小发生变化需要对窗口变大事件进行监听,当法神windows事件时,就触发组件的resize

<template>
  <div style="height: 100%" ref="echart">echart</div>
</template>

<script>
import echarts from 'echarts'
...
  methods: {
...
    // 图表是否发生变化
    resizeChart() {
      this.echart ? this.echart.resize() : ''
    }
  },
  // 监听Windows的变化事件,当发生变化echart则重新绘制
  mounted() {
    window.addEventListener('resize', this.resizeChart)
  },
  // 在Windows销毁的时候也销毁组件,防止内存泄露
  destroyed() {
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>

这样就完成浏览器器窗口大小发生变化的效果

折叠菜单的时候,如果想要对图表进行缩放,那么需要监听折叠的变换即isCollapse的值,将这个值在computed中引入,在watch中进行更改

<script>
...
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse
    }
  },
  watch: {
    chartData: {
      handler: function() {
        this.initChart()
      },
      deep: true
    },
    isCollapse() {
      setTimeout(() => {
        this.resizeChart()
      }, 300)
    }
  },
...
}
</script>

这样折叠菜单后,组件也会进行resize了

完成对侧边菜单的标题

在components下的侧边栏组件CommonAside.vue中,引入h3的标题,当折叠的时候显示XX,不折叠的时候显示小滴后台管理系统

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="isCollapse"
  >
    <h3 v-show="isCollapse">XX</h3>
    <h3 v-show="!isCollapse">XX后台管理系统</h3>
    <el-menu-item
      :index="item.path"
      v-for="item in noChildren"
      :key="item.path"
      @click="clickMenu(item)"
    >
...

效果分别如下

Echart组件封装总结

  • 观察文档,考虑组件需要的基本参数
  • 参数筛选,分为从父组件传来的参数和自身的参数
  • 完善组件,观察设计图,找不同,在文档中寻找对应的配置项
  • 细节优化,考虑多种场景下,图表自适应的处理
免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

470

相关文章推荐

未登录头像

暂无评论