react获取地址栏参数（react 获取cookie）



1，基础篇
我们在使用echart，基本使用，可以使用script标签引入的方式进行使用，也可以使用npm的方式，进行加载echarts。

script的方式，非常简单，就像我们的jquery一样，引入这样的一个js文件就可以使用echarts了。然后echarts的核心就是实例化一个echarts对象，然后给这个对象设置options，options的设置，参考echarts官方文档。

npm的方式，使用echarts，这是我们在项目中常用的方式。

使用的时候，我们一般这么写。

主要看在react中，我们该如何使用？
2，react中使用echarts
首先先引入echarts，在这之前你需要使用npm下载echarts的依赖。

然后在react的componentDidMount中，进行echats的实例化。

其中，this.chart是使用react中的ref标记的当前dom。

当然，这样的方式，我们仅仅只能展示一个基本的echarts图表，但是我们还没法做到echarts在页面上的伸缩。这个时候，我们可能需要用到的echarts对象的一些方法。

• resize()方法，当调用此方法，echarts实例会触发一次重绘功能。
• dispose()方法，当调用此方法，echarts实例会被销毁。

所以这个随着页面的伸缩，或者dom元素的变化的时候，触发resize方法，就能实现echarts的伸缩特效。

在实现上，我们可以使用onresize事件。

这是可伸缩的echats组件的实现原理。

下面代码就是一个echarts可伸缩组件的实现。

3，实现一个echarts的插件
一个完整的可伸缩的echarts组件应该像下面这样。

在使用的时候，直接像这样使用：

4，集成到npm中使用
像上面的方式，是我们自己写echarts的可伸缩组件，有没有更简单的方式？显然是有的，我们可以把这个集成到npm的package包中，在任何使用的地方，直接使用就行了，没有必要重复写这样的插件。

我自己实现的一个可伸缩的echarts包—“wd-echarts-react”;

使用的时候直接npm install。

然后在项目中：

这样就实现了echats的使用。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/13822.html