React+Echarts简单的封装套路
今天我们来介绍一下React中,对Echarts的一个简单的封装。
首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以
cnpm install echarts --save
npm install echarts --save
yarn add echarts --save
安装好之后,新建一个JS文件,命名test.js,首先导入的是各种依赖(总代码在文章结尾)
import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
Echeart是需要对真实DOM进行渲染的,且必须用ID不能用className,所以在componentDidMount生命周期的时候,就需要get这个图表的id进行初始化,如:
let myChart = echarts.init(document.getElementById('myTable'));
但是反过来想一想,当你需要多次使用该组件的时候,你会发现如果是固定id的时候会出现问题,因为id只能有一个,所以这里会有两种处理方式:
1、如果你习惯于在这个组件留下能操控的id,你可以在给这个组件传值的时候,传入一个id参数,这样可以自己手动保证id不重复,还能在组件外能CSS或JS操作这个图标。
let { id } = this.props.data;
let myChart = echarts.init(document.getElementById( id ? id : 'myTable'));
2、如果你不需要留下自己操作的id,可以使用随机的id,这样不用留神是否id重复的问题(以下代码已省略部分)
let getRandomID = () => Number(Math.random().toString().substr(4, 10) + Date.now()).toString(36)
let id = getRandomID();
class Test extends React.Component {
componentDidMount() {
window.addEventListener("resize", function () {
myChart.resize();
});
// 初始化
let myChart = echarts.init(document.getElementById(id));
render() {
return (
<div id={id}></div>
);
}
} export default Test;
初始化完成后,使用图表是当然需要使用数据的,我们当然是不希望数据是只能固定一排或者两排的,所以我们应该在组件外传入不定量的数据,然后在组件中自动去初始化这个图表,这里我的传入数据有:图表标题、x轴名、y轴数据、y轴数据所对应的项目名、该图表的高度和宽度、id。以下就是我的组件代码:
import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine'; const defaultType = 'bar';
const defaultWidth = '100%';
const defaultHeight = '300px';
let getRandomID = () => Number(Math.random().toString().substr(4, 10) + Date.now()).toString(36)
let id = getRandomID();
class Test extends React.Component {
componentDidMount() {
window.addEventListener("resize", function () {
myChart.resize();
});
// 初始化
let { title, xdata, ydata, legend } = this.props.data;
let myChart = echarts.init(document.getElementById(id));
let series = [];
for (let i = 0; i < ydata.length; i++) {
let item = {
name: legend[i],
type: defaultType,
data: ydata[i],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
series.push(item)
}
// 绘制图表
myChart.setOption({
title: { text: title },
tooltip: {
trigger: 'axis'
},
legend: {
data: legend
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: {
show: true,
type: 'jpg'
}
}
},
xAxis: [
{
type: 'category',
data: xdata
}
],
yAxis: [
{
type: 'value'
}
],
series
});
}
render() {
let { width, height } = this.props.data;
return (
//默认高宽
<div id={id} style={{ width: width ? width : defaultWidth, height: height ? height : defaultHeight }}></div>
);
}
} export default Test;
这样封装好了之后,我们的调用就很舒服,无论是传几条数据在ydata里面都可以。
import React, { Component } from 'react'
import Test from './Test' class All extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="all">
<Test data={{
id: 'mainmain',
width: '100%',
height: '500px',
title: '某地区新增男孩人数、女孩人数和总人数',
xdata: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
ydata: [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
[4.6, 10.8, 16, 50, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6]],
legend: ['男孩', '女孩', '总人数']
}} />
</div>
)
}
} export default All
这是一个非常简单,但是实用的封装,不止是在Echarts,在很多其他的地方,大家都可以用到这么一套方法来封装自己的组件
React+Echarts简单的封装套路的更多相关文章
- React 最简单的入门教程
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...
- Echarts 的 Java 封装类库 转自 https://my.oschina.net/flags/blog/316920
转自: https://my.oschina.net/flags/blog/316920 Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-ja ...
- react hooks 如何自定义组件(react函数组件的封装)
前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...
- [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例)
[分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- 一个用python简单的封装了aria2的jsonrpc中adduri的脚本
aria2是一个十分牛逼的下载神器,有时候项目需要一个很牛逼的下载中间件的话,aria2是一个不错的选择.其中支持jsonrpc和websocket的特性尤其诱人.但是python用起来还是有点不爽, ...
- 最新 AFNetworking 3.0 简单实用封装
AFNetworking 3.0 的到来使我们开发者又方便了许多,话不多说,直接上代码. 1.首先 引入框架AFNetworking框架 GitHub下载地址:https://github.com/A ...
- React Hooks简单业务场景实战(非源码解读)
前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...
- react中使用decorator 封装context
2020-03-27 react中使用decorator 封装context 在传统的react context中,子组件使用context十分繁琐,如果需要使用context的子组件多的话 每个组件 ...
随机推荐
- nginx配置项。
一,用于调试进程,定位问题的配置项. (1)是否以守护进程方式运行nginx语法:daemon on | off:默认是on,daemon是脱离终端并且在后台运行的进程,off是关闭守护进程的模式 ...
- Linux环境下部署svn服务详解
说明 环境: 操作系统:centos 8.0 IP:39.100.228.13 安装 用ROOT账号登录,在控制台执行以下命令,一直默认安装就好可以了. [root@localhost ~]#yum ...
- MySQL插入操作
说明:value的值可以为数据,DEFAULT,NULL,expr 含有ATUO_INCREMENT的列可以插入DEFAULT.NULL,或者不插入记录来实现自动增长. 插入记录的三种方法:①可以同时 ...
- EntityFramework Core表名原理解析,让我来,揭开你神秘的面纱
前言 上一节我们针对最开始抛出的异常只是进行了浅尝辄止的解析,是不是有点意犹未尽的感觉,是的,我也有这种感觉,看到这里相信您和我会有一些疑惑,要是我们接下来通过注解.Fluent APi.DbSet分 ...
- Ceph日常运维管理和排错 -- <7>
Ceph日常运维管理 集群监控管理 集群整体运行状态 [root@cephnode01 ~]# ceph -s cluster: id: 8230a918-a0de-4784-9ab8-cd2a2b8 ...
- 你的应用安全吗? ——用Xray和Synk保驾护航
一.背景 在当下软件应用的开发过程当中,自研的内部代码所占的比例逐步地减少,开源的框架和共用库已经得到了广泛的引用.如下图所示,在一个Kubernetes部署的应用当中,我们自己开发代码所占的比例可能 ...
- Mixing Milk 混合牛奶 USACO 贪心
1009: 1.3.1 Mixing Milk 混合牛奶 时间限制: 1 Sec 内存限制: 128 MB提交: 9 解决: 9[提交] [状态] [讨论版] [命题人:外部导入] 题目描述 1. ...
- Webpack实战(二):webpack-dev-server的介绍与用法
为什么要用webpack-dev-server 在开发中,我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后,我们需要执行npm run build命 ...
- 测试必备之Java知识(四)—— 线程相关
线程相关 Java多线程实现方式 继承Thread,实现Runnable接口,实现Callable接口(能抛异常且有返回值,不常用) 为什么有了继承Thread方式还要有Runnable接口方式 实现 ...
- ORM基础4 跨表查询+原子性操作
一.跨表查询 1.# # 正向查找 对象查找 # book_obj = models.Book.objects.get(id=3) # print(book_obj) # ret = book_obj ...