你在开发系统的过程中，有没有遇到过这样的问题：如果使用专业的报表工具，需要独立的报表系统，业务系统后端很难与报表后端集成，业务系统前端很难与报表前端集成；如果是在系统中开发，开发工作量太大，流程冗长，会有很多bug。 　　

　　这是系统工程中常见的问题。有没有方便的嵌入式报表系统，可以解决集成和开发效率的问题？是的，本文介绍的报表系统可以很好地解决这个问题。后端可以以JAR的形式嵌入系统，也可以单独部署。前端提供多个Vue组件，一个标签可以显示一个报表，真的很方便。 　　

　　通过Vue组件介绍演示报告 　　

　　关于报表的设计，请参考我另一篇文章的介绍。本文主要谈如何将报表引入前端项目。 　　

　　第一步，我们使用VueCli创建一个项目并引入依赖项，包括Element UI、axios和echarts。在src下建立一个lib目录，放入报表组件的js和css，修改src/main.js介绍各个组件的使用，如下图所示： 　　

　　在main.js中添加简介 　　

　　第二，设置VueCli的代理，这样开发时可以直接调试报表。如下图： 　　

　　设置代理可以在开发过程中直接调试报告。 　　

　　第三步：您可以在需要导入的地方直接导入报表，例如： 　　

　　标签被引入报告 　　

　　如果您想为报表提供一些初始参数，可以使用param property传入一个初始值对象，它表示一个键-值对。 　　

　　步骤4:通过命令npm install保存并安装组件。请注意，在安装组件的过程中，可能会从外部服务器下载信息，有时可能无法下载。如果无法从npm.org下载，可以通过设置图片来源来解决。如果无法从github.com下载，可能需要稍后再试。如果无法解决，请参考搜索引擎的相关解决方案。安装组件后，执行npm run serve来启动本地服务。如下所示，正确启动本地服务： 　　

　　正确启动本地服务 　　

　　第五步：打开浏览器体验一下。如果不配置开发端口，默认值为8080。如果您已经配置了端口，请使用您配置的端口。打开浏览器端口http://127.0.0.1:如下图： 　　

　　预览 　　

　　低分辨率预览 　　

　　该报告主要提供三个部分： 　　

　　查询-核心：基础报表，包括报表按钮、过滤器和报表结果； 　　

　　查询可钻取：基于查询核心，提供钻取顺序管理。如果不想用默认的el卡，可以用这个组件； 　　

　　查询卡片：在可查询钻取的基础上，增加默认的一卡通卡片； 　　

　　以上所有组件都支持使用params传递初始参数，使用params接收对象参数。 　　

　　如果你觉得以上步骤比较复杂，可以直接克隆开源演示，已经配置好了。克隆后，执行npm install来安装组件，并执行npm run serve来启动本地服务。中国开源地址：https://gitee.com/wjjkh1/reportexample/tree/master. 　　

　　报表设计师，报表系统定位，报表能力，请参考我的另一篇文档。欢迎有意者评论，私信交流。