React框架中使用Echarts

React 专栏收录该内容
19 篇文章 0 订阅

React框架中怎么使用Echarts插件

1.要使用该插件肯定要先下载该插件:

npm  install  echarts  --save

2.下载完之后就可以项目中使用了,但是在React框架中使用,必须还要下载一个echarts-for-react 库:

npm  install  echarts-for-react  --save

3.下载完上述两个插件之后就可以在React项目中使用到Echarts插件了
项目中使用如下:

import React, {Component} from 'react';    //引入React核心库与组件模块
import ReactEcharts from 'echarts-for-react';  //引入echarts-for-react插件 用于在React框架中渲染echarts,该插件会自动将Echarts实例绑定到一个DOM节点上。

...省略一些不重要的代码

render(){
	const option={...echarts表格的一些配置}
	
	return(
		<ReactEcharts
			option={option}
			style={{...设置在页面中的宽高}}
		>
		</ReactEcharts>
	)
}
//最后导出
export     default   组件名;  

这就完成了,使用呢和使用普通组件没有什么区别。(注意上述配置为必须)

  • 0
    点赞
  • 5
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

皮的狠

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值