屏幕快照 2019-02-20 下午6.02.46.png
参考npm文档：https://www.npmjs.com/package/echarts-for-react
由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装
第一步：npm安装echarts-for-react
npm install --save echarts-for-react
npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts'
第二步：引入模块和组件
import echarts from 'echarts'
import echarts from 'echarts/lib/echarts'
<ReactEcharts option={this.getOption()} />
第三步：参考echarts官网实例添加option参数
参考官网：https://echarts.baidu.com/examples/
getOption =()=> {
let option = {
title:{
text:'用户骑行订单'
},
tooltip:{ //展示数据
trigger:'axis'
},
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value'
},
series:[
{
name:'订单量',
type:'bar',
data:[1000,2000,1500,3000,2000,1200,800]
}
]
}
return option;
}
注意：由于引入echarts文件太大，所以一般按需引入，完整项目代码如下：
import React from 'react';
import {Card} from 'antd';
import echartTheme from './../themeLight'
//不是按需加载的话文件太大
//import echarts from 'echarts'
//下面是按需加载
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line'; //折线图是line,饼图改为pie,柱形图改为bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
export default class Line extends React.Component{
componentWillMount(){
//主题的设置要在willmounted中设置
echarts.registerTheme('Imooc',echartTheme);
}
getOption =()=> {
let option = {
title:{
text:'用户骑行订单',
x:'center'
},
tooltip:{
trigger:'axis',
},
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value'
},
series:[
{
name:'OFO订单量',
type:'line', //这块要定义type类型，柱形图是bar,饼图是pie
data:[1000,2000,1500,3000,2000,1200,800]
}
]
}
return option
}
render(){
return(
<div>
<Card title="折线图表之一">
<ReactEcharts option={this.getOption()} theme="Imooc" style={{height:'400px'}}/>
</Card>
</div>
)
}
}
