echarts公共组件封装

宁渡课堂 2023-01-13 03:33:03

课时名称	课时知识点
echarts公共组件封装	echarts公共组件封装

...全文

158 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

该文档从从创建Vue项目，再到引入echarts，最后封装成柱图公共组件，子父组件传参，从父组件传入配置项和尺寸作为参数，都讲解得很详细，手把手教你封装基于echarts的vue图表组件库。通过此组件库的封装，让你学会自己造轮子，自己会封装vue组件库。

因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图：我需要这样一个饼图，并且接下来在很多次地方要用到。直接复制官网的代码，再改改数据，需要用的时候直接拿来用。但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’)); 当封装为组件使用的时候，id固定，同一个页面多次出现相同id，所以不能正常显示。所以想出来以下解决方

Vue是一个流行的前端框架，能够快速构建现代化的Web应用程序。Vue2模板项目是基于Vue2语言进行开发的Demo项目，旨在提供一套可重复使用的代码，帮助开发者快速构建后台管理系统。该模板项目已经封装了一些常用的公共组件，对于常用功能进行了二次封装开发，从而提高了开发效率。该模板项目支持json化配置表单，这意味着开发者可以通过简单的配置，快速生成表单页面。不需要手写html代码，这大大提高了开发效率。同时，该模板项目还提供标准搜索页面，可通过简单的配置，快速生成搜索页面，包括搜索条件、排序、分页等功能。这些功能的快捷上手，对于后台管理系统的新人上手很方便。该模板项目还提供了常见的echarts声明，这些声明可直接使用，简化图表开发流程。此外，该模板项目还封装了基础工具函数声明，包括日期格式化、字符串截取、数组去重等常用函数。这些函数可直接调用，简化了开发流程。该模板项目还提供了组件使用示例和二次封装函数的简单demo，方便新手快速上手。开发者可以通过这些示例和demo，更好地理解如何使用组件和二次封装函数。此外，该模板项目基于vue2语言进行开发，采用了webpack打

整合了柱状图、饼图、地图、表格等的数据展示通用模板，开箱即用

公共组件在目前的各个项目中，熟悉某一组件的开发人员采用自己熟悉的组件，使用到的前端组件非常多，有Ext、jquery UI、ligerUI、各种不同的附件上传组件、图表组件等等。造成各个项目中用到的组件都不一样，有些项目可能同时使用多个前端组件，这样就带来项目维护困难，开发人员需要不同项目学习了解不同前端组件等问题，由此，该公共组件应运而生。该组件基于jquery、boostrap以及requireJS 树组件采用zTree，图表采用ECharts，附件上传采用WebUploader,使用时可以参照相关官方API 主要目的为： 1.规范前端开发组件 2.去掉笨重第三方组件，封装自己的前端常用组件作补充样例地址： wiki地址：最后，该版本为第一版，实际使用中肯定会有许许多多的问题与不便，希望各位同学勿喷，积极提Issues与建议，通过大家共同的努力不断的完善与丰

jason的课程社区_NO_1

1

社区成员

140

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章