首先说明一点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. Exchange - Add Owner of Distribution Group

    User Interface: Open Exchange Management Console. Expand Microsoft Exchange On-Premises, then right ...

  2. mysql sql执行慢 分析过程

    摘自: https://blog.csdn.net/zhuzaijava/article/details/77935200 为了验证select 1 与 select 1 from tableName ...

  3. linux平台下Tomcat的安装与优化

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样 ...

  4. Catch a Memory Access Violation in C++

    From:  https://stackoverflow.com/questions/16612444/catch-a-memory-access-violation-in-c In C++, is ...

  5. linux 压缩当前文件夹下所有文件

    linux zip压缩.压缩当前文件夹下所有文件,压缩为a.zip.命令行的方法是怎样. zip  -r fileName.zip  文件夹名 tar tar命令可以用来压缩打包单文件.多个文件.单个 ...

  6. [oracle] Oracle存储过程里操作BLOB的字节数据的办法,例如写入32位整数

    作者: zyl910 一.缘由 BLOB是指二进制大对象,也就是英文Binary Large Object的缩写. 在很多时候,我们是通过其他编程语言(如Java)访问BLOB的字节数据,进行字节级的 ...

  7. [C#] 解决Silverlight反射安全关键(SecuritySafeCritical)时报“System.MethodAccessException: 安全透明方法 XXX 无法使用反射访问”的问题

    作者: zyl910 一.缘由 在Silverlight中使用反射动态访问时,经常遇到"System.MethodAccessException: 安全透明方法 XXX 无法使用反射访问-- ...

  8. k8s应用首页临时改成升级维护页面

    在本地虚拟机 产生一个nginx配置文件 [root@centos-01 dockerfile]# cat weifeng_maintain.conf server { listen 443; ser ...

  9. 带你Python入门,踏进人工智能领域

    1.Python能做什么? 不知大家 没有看<中国好声音>呢?有位选择就是利用AI改编了一首周杰伦的歌<止战之殇>. Python适合做人工智能AI吗? 很明确的告诉你,可以! ...

  10. Vue2的独立构建与运行时构建的差别

    其实这个问题在你使用vue-cli构建项目的时候是不会出现的,因为你在创建项目的构建过程中已经让你勾选了,然后会写入webpack.config.js中. 这就在这,会让你选择Vue的构建方式. 如果 ...