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 ...
随机推荐
- APB协议
https://wenku.baidu.com/view/2663f629ef06eff9aef8941ea76e58fafab04592.html https://www.cnblogs.com/l ...
- Android: Avoid passing null as the view root
在做一个应用时把Android SDK从4.4换成6.0,使用LayoutInflater的inflate方法时出现以下情 LayoutInflater.inflate(int resource, V ...
- 解决TextView drawableRight左侧图片大小不可控的问题
通过代码来修改图片的大小: Drawable rightDrawable= context.getResources().getDrawable(R.drawable.more); rightDraw ...
- 【PMP】易混淆知识点
一.混淆概念 德尔菲技术 德尔菲技术是组织专家达成一致意见的一种方法.项目专家匿名参与其中.组织者使用调查问卷就重要的项目议题征询意见,然后对专家的答卷进行归纳,并把结果反馈给专家做进一步评论.这个过 ...
- 哪些 Python 库让你相见恨晚?【转】
原文链接:https://www.zhihu.com/question/24590883/answer/92420471 原文链接:Python 资源大全 ---------------- 这又是一个 ...
- 爬取 Caused by SSLError(SSLError("bad handshake: Error
在爬虫中遇到如下报错: Traceback (most recent call last): File "C:/Users/xuchunlin/PycharmProjects/A9_25/h ...
- Atitit 酷奇的押金危机 遇到资金链断裂作为创始人应该怎么办
Atitit 酷奇的押金危机 遇到资金链断裂作为创始人应该怎么办 遇到对方确实经营不善,资产已经还不了用户的押金怎么办?? 1. 一些重要原则 1 1.1. 二次分配原则 公平原则 1 1.2. ...
- linux下以‘-’开头的文件名
linux下以‘-’开头的文件名,cp.mv.rm.ls等对他都是无效的: [root@ha131 ~]# ll -plat.py ls:无效选项 -- . 请尝试执行"ls --help& ...
- Sword libcurl回调函数相关知识
libcurl响应回调函数说明 libcurl在默认情况下,回调里面会将数据分段的返回,不会一下子将发送端的数据全部塞到回调函数里面, 经过源码分析回调函数和curl_easy_perform是在 ...
- github控件地址
地址: https://github.com/wasabeef/awesome-android-ui http://www.jcodecraeer.com/plus/list.php?tid=31 h ...