import {Card} from 'antd'; import echartTheme from './../themeLight' //If the file is not loaded on demand, the file is too large //import echarts from 'echarts' //The following is loaded on demand import echarts from 'echarts/lib/echarts' //Import line chart import 'echarts/lib/chart/line'; //The line chart is line, the pie chart is changed to pie, and the column chart is changed to 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 { componentWillMount(){ //The theme settings should be set in willmounted ('Imooc',echartTheme); } getOption =()=> { let option = { title:{ text:'User riding order', x:'center' }, tooltip:{ trigger:'axis', }, xAxis:{ data:['Monday','Tuesday','Thursday','Friday','Saturday'] }, yAxis:{ type:'value' }, series:[ { name:'OFO order quantity', type:'line', //This section needs to define the type type. The column chart is bar and the pie chart is pie data:[1000,2000,1500,3000,2000,1200,800] } ] } return option } render(){ return( <div> <Card title="one of the line charts"> <ReactEcharts option={()} theme="Imooc" style={{height:'400px'}}/> </Card> </div> ) } }
