react中改变echart图表的形状
首先说明一点constructor中的只会渲染一次。

父组建是两个点击按钮,点击一个传过来bar,和一个line,子组件也就是当前组建通过this.props.type接收。
渲染是通过;;;;;;this.state.option
这里要用到一个监听props变化的方法
componentWillReceiveProps(nextProps,prevProps){
const option = JSON.parse(JSON.stringify(this.state.option)) //////////////////////////////////这里进行序列化也就是深拷贝
option.series[0].type = nextProps.type
this.setState({
option
})
}
当然也有其他方法,那就是将option定义再render函数里面

this.state={
type:this.props.type //////////////////子组件传过来的
}
componentWillReceiveProps(nextProps,prevProps){
this.setState({
type:nextProps.type
})
}
当然地下的渲染部分就是option={option}了
通过实际打印两种方法中的这个nextProps是有值的,而那个prevProps是一个空对象。
react中改变echart图表的形状的更多相关文章
- vuejs中使用echart图表
首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用: <template> <div :class="classNa ...
- 在Vue中使用Echart图表库。【全网最简单】
使用npm安装echart npm install echarts --save 然后在使用的页面上直接import import echarts from "echarts"; ...
- echart 图表 在.net中生成图片的方法
经过中午近两个小时的努力,终于可以实现了:echart 图表 在.net中生成图片 以下源代码: 前台页面: <!DOCTYPE html><html><head> ...
- 在同一页面中显示多个echart图表
整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表,废话不说直接上代码. 在同一个echart对象中绘制多个图表 <!DOCTYPE html> <html lan ...
- 用React 中的useState改变值不重新渲染的问题
不渲染 const [lists,setLists] =useState([]); ..... const arr = lists; arr.splice(index,1) //根据删除index下标 ...
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
- 切换tab页时,tab页中的echart变形问题
本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...
- ng2 中使用echart
1.首先创建echarts指令 //echart.directive.ts important { Directive,ElementRef,Input,Ouput,Onchanges,OnInit, ...
- 如何在vue中使用echart
1.安装echarts依赖 npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.protot ...
随机推荐
- Oracle 之 树查询 START WITH ... CONNECT BY ...子句
START WITH ... CONNECT BY ...子句是结构化查询中用到的,其基本语法是: select … from tablename start with 条件1 connect by ...
- 一步步教你轻松学K-means聚类算法
一步步教你轻松学K-means聚类算法(白宁超 2018年9月13日09:10:33) 导读:k-均值算法(英文:k-means clustering),属于比较常用的算法之一,文本首先介绍聚类的理 ...
- TRAC-IK机器人运动学求解器
TRAC-IK和Orocos KDL类似,也是一种基于数值解的机器人运动学求解器,但是在算法层面上进行了很多改进(Specifically, KDL’s convergence algorithms ...
- MongoDB存储过程创建和使用一例
mongo的脚本是js语法,所以存储过程也是js语法. 创建: db.system.js.save( { _id: "saveAndCount", value : function ...
- FreeBie—免费设计师专用素材网
FreeBie—免费设计师专用素材网 网站地址: https://freebiesupply.com/ 网站分类: 素材 浏览次数: 192 标签: 设计素材 Freebie Supply 是国外一家 ...
- Django-jet自定义菜单
Django-jet自定义菜单:并且可设置权限.https://jet.readthedocs.io/en/latest/config_file.html#custom-menu
- C++ char 类型:字符型和最小的整型
C++ 中没有 byte,Java 中有 byte. 但是 C++ 有 char,char 是可用来放整数的最小字节类型. #include <iostream> int main() { ...
- [加密]openssl之数字证书签名,CA认证原理及详细操作
转自:http://blog.sina.com.cn/s/blog_cfee55a70102wn3h.html 1 公钥密码体系(Public-key Cryptography) 公钥密码体系,又称非 ...
- [Java并发编程(五)] Java volatile 的实现原理
[Java并发编程(五)] Java volatile 的实现原理 简介 在多线程并发编程中 synchronized 和 volatile 都扮演着重要的角色,volatile 是轻量级的 sync ...
- linux 编译运行c文件
在ubuntu安装gcc 编辑 test.c /* Not stdio.h */ #include <unistd.h> void main() { char str[100]; /*Wr ...