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

朱雀 2022-12-03 09:50 130阅读 0赞

#### 一、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>
            )
        }
    }

#### 运行结果： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/703ef88d9481457fac37ba5657f1fb59.png