如何在vue项目中一步步封装并使用echarts图表组件？

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

为什么需要封装echarts？每个开发者制作图表时都需从头到尾书写完整的option配置，十分繁琐。在同一个项目中，各类图表设计十之八九相似，甚至相同，无需重复工作。

为什么需要封装echarts

• 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余
• 在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作
• 可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题
  

我希望这个echarts组件能设计成什么样

• 业务数据和样式配置数据分离，我只需要传入业务数据就行了
• 它的大小要完全由使用者决定
• 不会因为缩放出现变形问题，而是能很好地自适应
• 有时候某个图表的样式可能有点不一样，希望能保留自己配置样式的灵活性
• 无论传入什么数据都能正确地更新视图
• 如果我传入的数据为空，能展示一个空状态
  

公共组件结构建议

当你把它书写为一个公共组件时，我我希望它应该是这样：将单独机械的配置表独立成一份文件，暴露一个必要的vue单文件，同时携带一份README说明文档，当然，文档里面需要有关于你写的组件的使用示例和入参含义说明，这在大型项目中非常重要。