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 ...
随机推荐
- spring rest 容易被忽视的后端服务 chunked 性能问题
spring boot 容易被忽视的后端服务 chunked 性能问题 标签(空格分隔): springboot springmvc chunked 作者:王清培(Plen wang) 沪江Java资 ...
- python3 图片文字识别
最近用到了图片文字识别这个功能,从网上搜查了一下,决定利用百度的文字识别接口.通过测试发现文字识别率还可以.下面就测试过程简要说明一下 1.注册用户 链接:https://login.bce.baid ...
- 《闲聊 ASP.NET Core》系列直播清单
[闲聊 ASP.NET Core]第一期:项目与应用结构 [闲聊 ASP.NET Core]第二期:Web Host 初始化与生命周期事件 [闲聊ASP.NET Core]第三期:应用程序配置 [闲聊 ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- Winscp使用sudo user登录
为了安全期间, 一般设置了禁止root用户ssh登录.使用普通用户登录后再sudo获取操作权限. 可为了文件传文件使用winscp,如何使用sudo登录以获取权限传文件呢 先在服务端设置sudo帐号权 ...
- RabbitMQ 特性
1RabbitMQ 特点 与 SpringAMQP 完美整合.API 丰富. 集群模式丰富,表达式配置,HA 模式,镜像队列模型. 保证数据不丢失的前提做到高可靠性.可用性.
- 【小工具】根据定义的白名单字段进行Bean的拷贝
背景 Bean的拷贝一直有一些类可以使用,比如Apache的org.apache.commons.beanutils.BeanUtils或者Spring的org.springframework.bea ...
- Android CPU类型及预定义的宏
[时间:2019-02] [状态:Open] [关键词:android,cpu, armeabi, armeabi-v7a, arm64-v8a, 32位,64位,c/c++] 本文主要总结下前段时间 ...
- JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法
1 var date = new Date('2016-11-11 11:11:11'); 2 document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间 ...
- 【iCore4 双核心板_ARM】例程二十七:LWIP_NETIO实验——以太网测速
实验现象: 核心代码: int main(void) { system_clock.initialize(); led.initialize(); adc.initialize(); delay.in ...