# vue+element ui

**Repository Path**: wsy56/web

## Basic Information

- **Project Name**: vue+element ui
- **Description**: 课程设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-01
- **Last Updated**: 2023-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

####
给出以下几点描述：
* 在过构建Vue组件来实现页面，其中使用element ui进行设计，然后配置菜单项相应的跳转的路由来展示
* 在app.vue中写入侧边栏已经搜索框等组件，然后剩下的组件分别写成一个vue组件，通过配置路由，来实现局部刷新。
* 在home组件中 <el-carousel>标签用于展示一个轮播图，其中的<el-carousel-item>表示每个轮播项，通过v-for指令循环渲染图片。
<el-row>和<el-col>组件用于创建栅格布局，将页面分为左右两个部分。
左侧部分包含了一些数据统计的卡片，使用了<el-card>组件展示数据，并使用条件渲染指令v-if显示不同的样式。
右侧部分是一个操作记录的表格，使用了<el-table>组件展示数据。
* 在chat组件中<template>标签中定义了组件的HTML结构。包含一个<h1>标题和一个具有id为"chart-container"的容器，用于展示echarts折线图 <script> 标签中首先使用import语句引入了echarts库。

组件的mounted钩子函数在组件挂载后执行。首先调用generateData方法生成了30天的模拟数据，并将数据传递给drawChart方法绘制图表。

generateData方法用于生成模拟的饰品价格数据。通过循环生成每天的日期和随机价格，并将日期和价格存储在一个对象中，然后将对象推入data数组中。最后返回这个数据数组。

drawChart方法用于绘制echarts折线图。首先根据传入的数据生成echarts配置项option，其中包含x轴和y轴的设置，以及折线图系列的数据。然后使用echarts.init方法初始化图表，将配置项设置给图表，并将图表绑定到指定的DOM元素。
## 页面展示
![大欧buff首页](./vue/实验报告/images/图片1.png)
![市场分析接线图](./vue/实验报告/images/图片2.png)
![大欧老师介绍](./vue/实验报告/images/图片3.png)