首先说明一点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. vue 父子组件的方法调用

    $emit 子组件触发父组件的方法: <!-- 子组件 --> <template> <div id="child"> <button @ ...

  2. OpenCV3 for python3 学习笔记3-----用OpenCV3处理图像2

    3.5.Canny边缘检测 OpenCV提供了Canny边缘检测函数来识别边缘.它有5个步骤:使用高斯滤波器对图像进行去噪.计算梯度.在边缘上使用最大抑制(NMS).在检测到的边缘上使用双阀值去除 假 ...

  3. Asp.net的HttpContext.Current.Items详解

    之前asp.net只是在使用Session来进行用户会话时的信息存储,甚至很少留意Session完整的类调用是HttpContext.Current.Sessoin.... 好吧,我还是处于只会固定写 ...

  4. Linux下清理内存和Cache方法

    暂时目前的环境处理方法比较简单: 在root用户下添加计划任务: */10 * * * * sync;echo 3 > /proc/sys/vm/drop_caches; 每十分钟执行一次,先将 ...

  5. 移动端禁止页面拖动 h5禁止拖动页面

    PC上css控制滚动仅css("overflow","hidden")已足够. 但是,如果在Mobile上还是可以拖动的!所以需要监听touchmove事件. ...

  6. Python的数据库mongoDB的入门操作

    Python代码: import pymongo # 获取本地端口,激活mongo客户端 client = pymongo.MongoClient('localhost',27017) # 创建一个数 ...

  7. 中文分词工具thulac4j发布

    1. 介绍 thulac4j是THULAC的Java 8工程化实现,具有分词速度快.准.强的特点:支持 自定义词典 繁体转简体 停用词过滤 若想在项目中使用thulac4j,可添加依赖: <de ...

  8. 抽奖 mark

    https://blog.csdn.net/Oversdownload/article/details/77454006?utm_source=blogxgwz5

  9. webpack的配置文件

    1.路径 __dirname是一个全局变量,在项目html和js中没有单独定义,直接写就可以得到项目的根目录的路径 module.exports={ // __dirname是nodejs里的一个全局 ...

  10. Docker指令

    将showdoc容器下的/var/www 拷贝到主机 /home/bonker/showdocTsp1.214下 docker cp showdoc:/var/www /home/bonker/sho ...