react单车项目，echart图的使用

妖狐艹你老母 2022-04-17 00:20 271阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

import React from 'react'
    import { Card } from 'antd'
    import ReactEcharts from 'echarts-for-react';
    import echartTheme from '../echartTheme'
    // import echarts from 'echarts'
    // 引入 ECharts 主模块
    import echarts from 'echarts/lib/echarts'
    // 引入饼图和折线图
    import 'echarts/lib/chart/bar'
    // 引入提示框和标题组件
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/markPoint';
    export default class Bar extends React.Component {
        state={}
        //注入主题色
            componentWillMount(){
                echarts.registerTheme('Imooc',echartTheme);
            }
        
            getOption(){
                let option = {
                    title: {
                        text: '用户骑行订单'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    xAxis: {
                        data: [
                            '周一',
                            '周二',
                            '周三',
                            '周四',
                            '周五',
                            '周六',
                            '周日'
                        ]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '订单量',
                            type: 'bar',
                            data: [
                                1000,
                                2000,
                                1500,
                                3000,
                                2000,
                                1200,
                                800
                            ]
                        }
                    ]
                }
                return option;
            }
        
            getOption2(){
                let option = {
                    title: {
                        text: '用户骑行订单'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend:{
                        data:['OFO','摩拜','小蓝']
                    },
                    xAxis: {
                        data: [
                            '周一',
                            '周二',
                            '周三',
                            '周四',
                            '周五',
                            '周六',
                            '周日'
                        ]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'OFO',
                            type: 'bar',
                            data: [
                                2000,
                                3000,
                                5500,
                                7000,
                                8000,
                                12000,
                                20000
                            ]
                        },
                        {
                            name: '摩拜',
                            type: 'bar',
                            data: [
                                1500,
                                3000,
                                4500,
                                6000,
                                8000,
                                10000,
                                15000
                            ]
                        },
                        {
                            name: '小蓝',
                            type: 'bar',
                            data: [
                                1000,
                                2000,
                                2500,
                                4000,
                                6000,
                                7000,
                                8000
                            ]
                        },
                    ]
                }
                return option;
            }
        
            render(){
                return (
                    <div>
                    {/* //使用主题 */}
                        <Card title="柱形图表之一">
                            <ReactEcharts option={this.getOption()} theme="Imooc" notMerge={true} lazyUpdate={true} style={
       { height: 500 }} />
                        </Card>
                        <Card title="柱形图表之二" style={
       {marginTop:10}}>
                            <ReactEcharts option={this.getOption2()} theme="Imooc" notMerge={true} lazyUpdate={true} style={
       { height: 500 }} />
                        </Card>
                    </div> 
                );
            }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220417/9f110fa7cd0c4794a93ad001f675060e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220417/3159c9056c714053967de32d1783689e.png