Ehcarts图表如果Echarts官网中的图表实例无法满足自己的需求,给大家推荐一个Echarts图表社区 https://www.makeapie.com/explore.html
,这个社区中有非常多无论是效果还是样式都非常不错的图表,供大家学习使用。社区
1.安装插件
npm install --save echarts-for-react
2.使用Echarts
import ReactECharts from 'echarts-for-react';
// render echarts option.
....
<ReactECharts option={this.getOption()} />
3.实际代码演示
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;