React中使用echarts
2024-10-19 04:27:41
1.安装相关的依赖：
cnpm i react-for-echarts -S
cnpm i echarts -S
2.使用方法:
页面引入:
import ReactEcharts from 'echarts-for-react';
1).使用组件方式
class EchartsTest extends Component{
render(){
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
return(
<ReactEcharts option={option} style={{height:'200px',width:'100%'}}/>
)
}
}
2).echarts相关的配置项目
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
const EchartsTest =()=>(
<ReactEcharts
option={option}
style={{height:'220px',width:'100%'}}
></ReactEcharts>
);
最后导出
export default EchartsTest;
最新文章
- ffmpeg-20160815-bin.7z
- json数据类型
- 简单几何(直线与圆的交点) ZOJ Collision 3728
- raido 赋值第一次成功，然后就赋值不显示
- Android---App Widget(四)
- 【译】 AWK教程指南 1前言
- jsp页面 使用c 标签的 varStatus 属性和 index 解决一行显示多少个 然后进行自动换行
- Java IO流之【缓冲流和文件流复制文件对比】
- js中的回调函数
- unity中加载场景不销毁以及切换场景重复实例化
- vue 登录跳转
- Nginx 学习笔记（八）http和https跨域问题解决
- Web 单点登录（SSO） 实现模型
- Revit API修改保温层厚度
- java File类中的mkdir()和mkdirs()有什么区别
- 百度BAE使用ueditor 上传图片
- CSS 画一个心
- 【刷题】洛谷 P4716 【模板】最小树形图
- web.py url传参及获取
- 转：Numpy教程