react 中echarts-for-react使用自适应div

最新推荐文章于 2022-11-23 09:51:13 发布

weixin_30340353

最新推荐文章于 2022-11-23 09:51:13 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whlBooK/p/11174199.html

版权

import * as React from 'react'
import ReactEcharts from 'echarts-for-react'

export interface IProps {

}
interface IState {
   
}

class CapitalBudget extends React.Component<IProps, IState> {
  
    constructor(props: IProps) {
        super(props)
       
    }

    getOption () {
        return {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    formatter: '{value} 年'
                },
                axisTick: {
                    alignWithLabel: true
                },
                data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 万'
                },
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        }
    }
    render() {
    
        return (
           
            <React.Fragment>  
                <ReactEcharts
                    option={this.getOption()}
                    
                    style={{width: '100%', height: '238px'}}
                />
            </React.Fragment> 
        )
    }
}

export default CapitalBudget

转载于:https://www.cnblogs.com/whlBooK/p/11174199.html