- 我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts。
- 我们要想在react项目中高效使用echarts,建议大家安装
echarts-for-react
,它是一个简单的 echarts(v3.0)的 react 封装。在我们实际项目中使用非常简单。- 如果是在react项目中使用图表,大家也可以使用bizcharts绘制图表,因为它是完全为react开发的,所以使用起来更容易上手。BizCharts 是一个基于 G2 封装的 React 图表库,具有 G2、React 的全部优点,可以让用户以组件的形式组合出无数种图表;并且集成了大量的统计工具,支持多种坐标系绘制,交互定制,动画定制以及图形定制等等。相信 BizCharts 定能成为您的数据可视化项目的强力助手。
BizCharts链接
0. echarts-for-react链接
1. 安装echarts-for-react
npm install --save echarts-for-react
2. 使用Echarts
import ReactECharts from 'echarts-for-react';
// render echarts option.
....
<ReactECharts option={this.getOption()} />
3. 实际代码演示
我们一般在实际项目中将图表都抽成一个组件,我们都知道,React有两种组件,一种是函数式组件,另一种是类组件,两种写法几乎都一样,现在笔者分别使用这两种对Echarts做简单的演示:
3.1 类组件式
import React, {Component} from 'react';
import ReactECharts from 'echarts-for-react';
// 在此组件中绘制一个简单的柱状图
export default class Bar extends Component{
// 返回柱状图的配置对象
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
render() {
return(
<div>
<ReactECharts option={this.option} />
</div>
)
}
}
3.2 函数式组件式
import React from 'react';
import ReactECharts from 'echarts-for-react';
// 在此组件中绘制一个简单的折线图
const Line = () => {
// 返回折线图的配置对象
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
return (
<div>
<ReactECharts option={option} />
</div>
);
};
export default Line;
效果展示:
上图为笔者项目中一张图,饼图和仪表盘图代码如下:
import React from 'react';
import ReactECharts from 'echarts-for-react';
// 在此组件中绘制一个简单饼图
const Pie = () => {
// 返回饼图的配置对象
let option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
};
return (
<div>
<ReactECharts option={option} />
</div>
);
};
export default Pie;
import React from 'react';
import ReactECharts from 'echarts-for-react';
// 在此组件中绘制一个仪表盘图
const Gauge = () => {
// 返回仪表盘的配置对象
let option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [{
name: 'Pressure',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [{
value: 50,
name: 'SCORE'
}]
}]
};
return (
<div>
<ReactECharts option={option} />
</div>
);
};
export default Gauge;
4. 彩蛋——Echarts图表社区
如果Echarts官网中的图表实例无法满足自己的需求,给大家推荐一个Echarts图表社区 https://www.makeapie.com/explore.html
,这个社区中有非常多无论是效果还是样式都非常不错的图表,供大家学习使用。