自主封装hooks+echarts(超详细介绍)开箱即用框架

前言

react的hooks兴起之后,我们开始了新技术的探研,重新构建了以react,hooks,echarts为基准的框架,对可视化的封装。开箱即可用,非常实用,特别是如果对echarts有需求的。

项目介绍

  1. hooks刚出来时我们就在使用,已经踩了很多坑而完善了这一整套开箱即用的框。
  2. 针对echarts进行了封装,菜单栏、面包屑等都做了自己的封装,对于icon都真正意义上进行了按需加载。
  3. 对于echarts常用的,都做了很详细的注释说明,小白也都能很快上手。
  4. 对自己项目需求但是不常用的进行了封装(特别是时间选择器)。
  5. 我们把常用的都会封装,以达到统一性,我也已把封装方法写出来了大家指导指导:npm插件制作
  6. github地址
    注:本文不是针对hooks用法说明,也把项目中用法删了,所以hooks用法很少,只有自己封装使用到的用法,但是没有给予注释,建议直接查看官网,更准确















第一步:拉取项目

git clone https://github.com/Songwei1029/hooks_echarts.git

第二部:配置npm源

如果已有npm/yarn则跳过

# npm
npm config set registry=https://registry.npm.taobao.org -g

# cnpm,使用cnpm
npm install -g cnpm

# yarn
yarn config set registry https://registry.npm.taobao.org -g

第三步:依赖安装

如果你本地没有安装 yarn,请提前安装,yarn下载

yarn install

第四步:启动项目

# 启动本地服务预览
npm start
或
yarn start

# 构建打包
npm run build
或
yarn build

# 打包并查看包大小分析
npm run analyze

原文地址:https://www.cnblogs.com/zz-zrr/p/11650086.html

时间: 2024-10-13 09:14:50

自主封装hooks+echarts(超详细介绍)开箱即用框架的相关文章

超详细介绍 图像处理(卷积)(转)

图像处理(卷积)作者太棒了 原文 http://blog.sina.com.cn/s/blog_4bdb170b01019atv.html 图像处理-线性滤波-1 基础(相关算子.卷积算子.边缘效应) 这里讨论利用输入图像中像素的小邻域来产生输出图像的方法,在信号处理中这种方法称为滤波(filtering).其中,最常用的是线性滤波:输出像素是输入邻域像素的加权和. 1.相关算子(Correlation Operator) 定义:,  即 ,其中h称为相关核(Kernel). 步骤: 1)滑动核

Echart ---超详细介绍

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="height:400px;"></div>

HBase 超详细介绍

1-HBase的安装 HBase是什么? HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用hadoop的DFS工具就可以看到这些这些数据 存储文件夹的结构,还可以通过Map/Reduce的框架(算法)对HBase进行操作,如右侧的图所示: HBase在产品中还包含了Jetty,在HBase启动时采用嵌入式的方式来启动Jetty,因此可以通过web界面对HBase进行管理和查看当前运行的一些状态,非常轻巧. 为什么采用HB

【转】HBase 超详细介绍

---恢复内容开始--- http://blog.csdn.net/frankiewang008/article/details/41965543 1-HBase的安装 HBase是什么? HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用hadoop的DFS工具就可以看到这些这些数据 存储文件夹的结构,还可以通过Map/Reduce的框架(算法)对HBase进行操作,如右侧的图所示: HBase在产品中还包含了Jetty

OSPF网络入门级路由协议超详细介绍(一)

目录: 一.OSPF的定义 二.OSPF 的应用环境 三.OSPf的五大区域 四.OSPF的4种路由类型 五.OSPF的五大数据包类型 六.OSPF的七种状态 七.OSPF的四种网络类型 八.OSPF的六种LSA 一.OSPF的定义 OSPF路由协议是一种典型的链路状态(Link-state)的路由协议,一般用于同一个路由域内. 2.在这里,路由域是指一个自治系统(Autonomous System),即AS,它是指一组通过统一的路由政策或路由协议互相交换路由信息的网络. 在这个AS中,所有的O

mac自带功能超详细介绍

mac自带的超实用的功能分享给大家,包含自带的Spotlight(聚焦) 计算器功能,预览的 PDF 压缩功能,切换同一应用的不同窗口等,让您的工作更加轻松. 1.Spotlight(聚焦) 计算器功能 点击右上角菜单栏中的聚焦按钮,或者按 command - 空格组合键,调出聚焦(说聚焦怎么那么别扭呢,还是喜欢叫 Spotlight ),输入你要算的数即可.比特意打开计算器 App 要方便一些.(文章来源macdown.com) 2.预览的 PDF 压缩功能 用 Mac 自带的预览 App 打

详细介绍spring框架(下篇)

上篇简单介绍了spring,下面详细介绍为什么需要spring框架? Spring带给我们什么 方便解耦,简化开发,通过Spring提供的IoC容器,我们可以将对象之间的依赖关系交由Spring进行控制,避免硬编码所造成的过度程序耦合.有了Spring,用户不必再为单实例模式类.属性文件解析等这些很底层的需求编写代码,可以更专注于上层的应用. AOP编程的支持 通过Spring提供的AOP功能,方便进行面向切面的编程,许多不容易用传统OOP实现的功能可以通过AOP轻松应付. 声明式事务的支持 在

Oracle11超详细安装教程和配置

这篇博客主要是介绍一下Oracle数据的安装过程和简单的配置,帮助大家可以简单的让Oracle运行起来,只是一个基础的教程. 准备工作: 如果你以前装过Oracle数据库,而且安装目录要改变请先打开注册表编辑器里的: HKEY_LOCAL_MACHINE\SOFTWARE\ORACLE\和HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\Oracle11和它下面的几个.如果你没安装过Oracle产品的话在注册表里面的与Oracle有关的注册

利用apache+svn+jenkins+maven 实现java环境的自动化构建和部署(一)(网内首发超详细版)

目录结构如下: 目录 1说明及环境介绍3 1.1说明3 1.2环境准备及格式约定4 2 Linux下apache搭建svn服务器4 2.1 apache安装部署4 2.2 svn安装部署5 2.3整合svn和apache6 2.4 ssl方式部署apache7 2.4.1安装apache7 2.4.2安装svn7 2.4.2 部署认证8 3 Linux下svn独立服务器方式部署9 3.1安装SVN9 3.2 配置环境10 3.3 权限配置样例11 3.4 启动SVN服务器12 3.5 访问方式1