Vue echarts封装组件需求分析与实现_vue.js_

1.需求分析

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

2.结构

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

3.代码

4.结果

原生echarts

上文是基于vue-echarts 依赖的，在使用一段时间后，发现该模块对于异步请求数据不是很友好qwq，所以我换回了原生的echarts。

思路与前面完全一样，只是模块换成了原生的echarts。

1.代码