开箱即用==react-echarts

190 阅读1分钟

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;