Vue框架在项目开发中如何实现组件的复用？

本文共计2118个文字，预计阅读时间需要9分钟。

目录

1.需求分析

2.结构设计

3.代码实现

4.结果

原生echarts

1.代码

2.区别

3.结果

1.需求分析

本次需求是绘制多个折线图以描述服务器状态信息。

2. 结构设计使用echarts进行图形绘制。

3. 代码实现通过vue-echarts插件实现。

4. 结果成功绘制了多个折线图，展示了服务器状态信息。

目录

• 1.需求分析
• 2.结构
• 3.代码
• 4.结果
• 原生echarts
• 1.代码
• 2.区别
• 3.结果

1.需求分析

本次需求是绘制多个折线图描述服务器状态信息。因此都是折线图，样式类似，因此考虑vue-echarts 进行一个配置option多个图表。

2.结构

• 前端向后端请求数据(key,val)数组(分别对应x轴、y轴)，具体到代码里就是结构体obj的两个属性keys，vals
• 前端使用vue-echarts进行option配置相关参数，具体见代码。