首先说明一点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. update使用inner join

    一.update 基础语法 UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 上面是我们常见的更新表的方式,其实我们还可以去另外一张表的数据来更新当前的表数据,如现在就有这 ...

  2. SpringBoot之整合Redis分析和实现-基于Spring Boot2.0.2版本

    背景介绍 公司最近的新项目在进行技术框架升级,基于的Spring Boot的版本是2.0.2,整合Redis数据库.网上基于2.X版本的整个Redis少之又少,中间踩了不少坑,特此把整合过程记录,以供 ...

  3. 单片机 MCU 中 stack 使用的探讨

    stack 的使用,是单片机开发中影响最大,但是最少被讨论的问题.而提及这个问题的地方,都是对这个问题含糊其辞. 今天花了点时间,使用最笨的办法,直接阅读汇编代码,来对这个问题就行探究,这里做一下记录 ...

  4. 画图必备numpy函数

    给定一堆数字,需要统计这些数字中每个数字的个数. 如果这些数字是整数,那自然可以精确统计出来. 如果这些数字是浮点数,如果精确统计会发现几乎每个数字都只出现了一次.所以浮点数就要通过区间的方式进行统计 ...

  5. 构建自己的 Smart Life 私有云(一)-> 破解涂鸦智能插座

    博客搬迁至https://blog.wangjiegulu.com RSS订阅:https://blog.wangjiegulu.com/feed.xml 原文链接:https://blog.wang ...

  6. atitit 如何才能保持基业长青,建立万年企业v2 q66.docx

    1. 价值观 1 2. 分权 民主化 扁平化管理 1 3. 剥离经济部门,,降低经济的重要性 .超越利润的追求 1 4. 构建愿景 1 5. 强大的团队文化 企业文化 宗教文化 .教派般的文化 1 1 ...

  7. [Linux 性能调优] 网卡中断与CPU的绑定问题

    在Linux的网络调优方面,如果你发现网络流量上不去,那么有一个方面需要去查一下:网卡处理网络请求的中断是否被绑定到单个CPU(或者说跟处理其它中断的是同一个CPU). 先说一下背景 网卡与操作系统的 ...

  8. Ubuntu apt 使用代理

    . . . . . 由于一台 Ubuntu 主机无法直接连接外网,但同内网的另一台 Windows 主机可以连接外网,于是在 Win 主机上搭建了代理服务,使 Ubuntu 主机通过代理更新系统. 记 ...

  9. C++ 如何决定字面常量类型

    C++ 是如何决定字面常量的类型的? #include <iostream> #include <cmath> int main() { using namespace std ...

  10. 关于Unity中摇杆的操作

    之前在解决摇杆控制角色的时候使用的是RPG游戏中主角的运动方式,有八个方向,最近找到一个新的方法,可以比较流畅地控制角色各个方向的移动 步骤 1.Easy Touch插件,角色控制器组件 2.在控制角 ...