react-echarts--创一个新的组件来放置这段代码,并导入就能使用了,式一个函数式组件===
import React,{Component} from 'react'
import {Card} from 'antd'
//按需导入
import echarts from 'echarts/lib/echarts'//下包
//导入折线图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
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'//下包
class Home extends Component {
getOption = ()=>{
let option = {
title: {
text: '在线听课人数',
x: 'center'
},
tooltip:{
trigger: 'axis'
},
xAxis: {
boundaryGap: false,
data: ['6-21','6-22','6-23','6-24','6-25','6-26','6-27']
},
yAxis: {
type: 'value' //数值轴,适用于连续数据
},
series : [
{
name:'订单量',
type:'line',
data:[8000, 7500, 5500, 6000, 6500, 7800, 8200],
areaStyle: {}
}
]
}
return option;
}
render() {
return (
<Card.Grid style={{width: '900px',height:' 300px',marginTop:'150px'}}>
<ReactEcharts option={this.getOption()}/>
</Card.Grid>
)
}
}
export default Home;