首先说明一点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图表的形状的更多相关文章

  1. vuejs中使用echart图表

    首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用: <template> <div :class="classNa ...

  2. 在Vue中使用Echart图表库。【全网最简单】

    使用npm安装echart npm install echarts --save 然后在使用的页面上直接import import echarts from "echarts"; ...

  3. echart 图表 在.net中生成图片的方法

    经过中午近两个小时的努力,终于可以实现了:echart 图表 在.net中生成图片 以下源代码: 前台页面: <!DOCTYPE html><html><head> ...

  4. 在同一页面中显示多个echart图表

    整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表,废话不说直接上代码. 在同一个echart对象中绘制多个图表 <!DOCTYPE html> <html lan ...

  5. 用React 中的useState改变值不重新渲染的问题

    不渲染 const [lists,setLists] =useState([]); ..... const arr = lists; arr.splice(index,1) //根据删除index下标 ...

  6. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  7. 切换tab页时,tab页中的echart变形问题

    本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...

  8. ng2 中使用echart

    1.首先创建echarts指令 //echart.directive.ts important { Directive,ElementRef,Input,Ouput,Onchanges,OnInit, ...

  9. 如何在vue中使用echart

    1.安装echarts依赖   npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.protot ...

随机推荐

  1. mysql调优最大连接数

    一.mysql调优 1.1 报错: Mysql: error 1040: Too many connections 1.2 原因: 1.访问量过高,MySQL服务器抗不住,这个时候就要考虑增加从服务器 ...

  2. Android: Android Studio签名打包的两种方式(zz)

    注:给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行.签名就代表着自己的身份(即keystore),多个app可以使用同一个签名. 如果不知道签名是啥意思, ...

  3. Compiler Error: Function call with parameters that may be unsafe

    如下的代码: #include <stdio.h> #include <string> #include <algorithm> #include <cass ...

  4. Android Chromium WebView学习启动篇

    Android从4.4起提供基于Chromium实现的WebView.此前WebView基于WebKit实现.WebKit提供网页解析.布局和绘制以及JS执行等基础功能.Chromium在WebKit ...

  5. docker-mysql-cron-backup不能执行任务

    https://github.com/shiningrise/docker-mysql-cron-backup CRON_TIME=“0 18 * * * ?” 改为 CRON_TIME=0 18 * ...

  6. Windows中读写ini文件

    .ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储格式,来配置应用软件以实现不同用户的要求.配置文件有很多种如ini配置文件,XML ...

  7. Linux 修改时区

    CentOS 7修改方式如下: # lsb_release -a  --查看系统版本-CentOS Linux release 7.6 # timedatectl     --查看当前系统时区# ls ...

  8. string与stringBuffer区别

    string 的 “+” 操作就是根据 StringBuilder (或 StringBuffer )类及其 append 方法实现的. String 不可变其实就是说一个 String 对象创建之后 ...

  9. 关于VC预定义常量_WIN32,WIN32,_WIN64

    VC2012 下写 Windows 程序时,有时需要判断编译环境.在之前的文章<判断程序是否运行在 Windows x64 系统下.>里说过如何在运行期间判断系统环境,但在编译时如何判断? ...

  10. “5W1H”带你来学习JavaScript

    上次的设计模式讲课,从中学习到了非常多.不仅是技术上,更重要的是怎样来学习.我们学习的技术.科技的更新速度超过我们的想象,对于我们这个有生命年限的个体,怎样可以在有生之年可以让自己立足于科技的不败浪潮 ...