位置: 编程技术 - 正文

在React 组件中使用Echarts的示例代码(react组件写法)

编辑:rootadmin

推荐整理分享在React 组件中使用Echarts的示例代码(react组件写法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react常用组件及作用,react组件写法,react组件constructor,react的组件,react组件中必不可少的一个函数,react的组件,react组件中必不可少的一个函数,react组件调用方法,内容如对您有帮助,希望把文章链接给更多的朋友!

在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化,第一反应当然是Echarts了。平时用js加载Echarts组件很方便,但是在React中就要费下神了。各种连蒙带猜实现了。edmo里的

这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法。

我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件导入到我们的html或者是jsp等文件里面,但是在react项目中,我们可以直接使用node.js的npm命令安装:

Echarts的例子就是Echarts文档上介绍的最简单的应用。

这是调用Echarts组件的地方,给里面传了2个属性(data-开头是H5定义的规范)

在React 组件中使用Echarts的示例代码(react组件写法)

上面是完整的demo Echarts组件的代码,主要是利用了React根据不同状态(3种状态)提供的处理函数(一共有5种)。

1、componentWillMount:在插入真实DOM之前发起Action,向后端请求数据。

2、onChangeStore:在数据变更的时候更新数据,并在getInitialState中加入监听Store中数据变化的监听器。

3、componentDidUpdate:在数据被重新渲染之后,触发showChart()方法绘制canvas。

4、showChart:配置Echarts,具体配置信息可以参考Echarts文档

5、如果组件生命周期结束,那么要加上如下代码:

否则会报错: Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

最后附上效果图:

     

标签: react组件写法

本文链接地址:https://www.jiuchutong.com/biancheng/369752.html 转载请保留说明!

上一篇:es6在react中的应用代码解析(es6 commonjs)

下一篇:thinkjs 文件上传功能实例代码(js的上传文件)

  • 单位的车辆车船税怎么交
  • 增值税留抵税额账务处理
  • 留抵税额是什么意思啊
  • 本年已交税费怎么算
  • 弱电系统多少钱
  • 企业缴纳的社保可以税前扣除吗
  • 其他权益投资公允价值变动怎么计量
  • 专用发票二维码压线
  • 小规模能开劳务费吗
  • 火车票丢失可以抵扣进项税额
  • 出口收入没有及时申报怎么处罚
  • 房地产成本核算会计分录
  • 返利红字发票怎么做账
  • 贸易公司买进卖出
  • 丢失增值税专用发票
  • 机票上的exemptcny这个是什么意思?
  • 在外地的分公司可以独立核算开发票吗
  • 外购机器设备
  • 研发支出采用什么明细账
  • 固定资产质保金计入什么科目
  • 跨年销项税红字发票会计处理?
  • 贴现利息由谁承担
  • 出口退税新政策对出口贸易的影响
  • 绿宝树的养殖方法和注意事项视频
  • 无偿赠送产品如何处理
  • php面向对象优点,缺点
  • 其他应收款贷方负数说明什么
  • 对公账户存款利息要交增值税吗
  • php json
  • 出口退税会计分录怎么做没退到税全部减免抵
  • 以前年度损益调整借贷方向
  • 分期收款销售账务处理及税务处理
  • 职工福利费包括奖金吗
  • php对接mysql
  • 交易性金融资产的入账价值
  • yii框架教程
  • 盘点时发现存货怎么处理
  • 工资计提发放会计科目
  • 平价转让股权怎么交企业所得税
  • 税控设备抵减增值税必须当月抵减吗
  • 母子公司转让不动产 契税
  • wordpress如何删除导入的主题
  • 飞书slogan
  • springcloud分布式微服务组件
  • 织梦怎么安装
  • mongodb bi
  • 什么叫做印花??
  • 补贴,津贴是否合理
  • 房屋租赁违约金比例
  • 小额 无发票
  • 主营业务收入转入什么科目
  • 盘亏的固定资产是资产吗
  • 汇算清缴工资调减怎么做账
  • 通行费电子发票抵扣填写到附表二的第几栏次
  • 工程结算与开票的关系
  • 购买的垃圾袋计入什么科目
  • 银行日记账如何制做
  • 仓库货架应该计入什么科目
  • 如何学会计做账视频
  • 企业预付账款怎么做账
  • sql server中触发器的作用是什么?
  • window怎么升级系统
  • win7如何查看电脑
  • 清华同方bios通用密码(thtfpc)
  • xp系统管理员账户
  • 求windows7用户账户
  • ubuntu 14.04.6
  • windows xp怎么设置桌面
  • linux中的
  • win8安装应用商店
  • linux源于
  • cocos2dx用什么ide
  • javascript RegExp 使用说明
  • linux中shell脚本编写
  • jQuery中Nicescroll滚动条插件的用法
  • js中dom的用法
  • 企业购车需要交消费税吗
  • 宁德市蕉城区地图全图最新
  • 买了发票但是税控机里显示没有发票怎么办?
  • 怎样打印护士资格证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设