初识echarts（3）：柱状图示例

一、npm安装 echarts 、echarts-for-react：

npm install echarts --save
npm install --save echarts-for-react

二、引入模块（这里最好按需引入）：

//按需导入
import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
import 'echarts/lib/chart/bar';  //引入柱状图  折线图是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';

三、完整代码：

import React,{Component}from 'react'
import {Card} from 'antd';

//按需导入
import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
import 'echarts/lib/chart/bar';  //引入柱状图  折线图是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 Bar extends Component {

    getOption =()=> {
        let option = {
            color: ['#006699', '#4cabce', '#e5323e'],
            // title:{
            //     text:'用户骑行订单',
            //     x:'left'
            // },
            tooltip:{
                trigger:'axis',
            },
            legend: {
                data:['A','B','C'],
                right: 10
            },
            xAxis:{
                data:['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'A',
                    type:'bar',
                    barWidth: '15%',
                    data:[800, 1300, 2000, 2300, 1800, 1100, 500]
                },
                {
                    name:'B',
                    type:'bar',
                    barWidth: '15%',
                    data:[1000, 1800, 2200, 3100, 2200, 1500, 1000]
                },
                {
                    name:'C',
                    type:'bar',
                    barWidth: '15%',
                    data:[300, 800, 1200, 1800, 1300, 600, 200]
                }
            ]
        };
        return option
    };

    render(){

        return(

            <Card title="我是标题">
                <ReactEcharts option={this.getOption()}/>
            </Card>
        )
    }
}

运行结果：