最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】ReactJS中添加AdminLTE中的盒子效果

AdminLTE crifan 725浏览 0评论

现在已经是:

代码:

              <section className="col-lg-6 connectedSortable ui-sortable">
                <div className=’box col-lg-12′>
                  {/* <div className={style.prospect_object}>有望监控:本月新增有望客户目标完成进度</div> */}
                  {/* <div className="prospect_object">有望监控:本月新增有望客户目标完成进度</div> */}
                  {/* <ReactEcharts
                    option={this.getProspectOption()}
                    style={{height: ‘350px’, width: ‘100%’}}
                    className=’react_for_echarts’ /> */}
                  <ReactEcharts
                    option={this.getProspectOption()}
                    className=’process_pie’
                  />
                  <div className="month_target">
                    月目标
                    <p className="month_target_num">400</p>
                    人
                  </div>
                </div>
              </section>

效果:

需要去实现:

https://adminlte.io/themes/AdminLTE/pages/charts/chartjs.html

【总结】

然后用代码:

import React, { Component } from ‘react’;
import adminlteReactjs from ‘adminlte-reactjs’;
import ReactEcharts from ‘echarts-for-react’;
// import style from ‘./app.css’;
import ‘./app.css’;
// import ‘./app.less’;
import HeaderBar from ‘components/header-bar/header-bar’;
import NavigationMenu from ‘components/navigation-menu/navigation-menu’;
const ValueColor = {
  RED : ‘rgb(245, 105, 84)’,
  GRAY : ‘rgb(210, 214, 222)’,
  GREEN : ‘rgb(0, 166, 90)’,
  YELLOW : ‘rgb(243, 156, 18)’,
  LIGHT_BLUE : ‘rgb(0, 192, 239)’,
  DARK_BLUE : ‘rgb(60, 141, 188)’
};
export default class App extends Component {
  getProspectOption() {
    const option = {
      // title: {
      //   text: ‘有望监控:本月新增有望客户目标完成进度’,
      //   // text: ”,
      //   // text: ‘有望客户’,
      //   // subtext: ‘完成进度’,
      //   // textAlign: ‘left’,
      //   // textAlign: ‘center’,
      //   // textAlign: ‘right’,
      //   // textBaseline: ‘middle’,
      //   // padding: 1,
      //   // left: 10,
      //   textStyle: {
      //     color: ‘red’
      //   }
      // },
      tooltip: {
        trigger: ‘item’,
        //formatter: ‘{a} <br/>{b}: {c}<br/>百分比:{d}%’
        formatter: ‘{a} <br/>{b}: {c} ({d}%)’
      },
      // legend: {
      //   orient: ‘vertical’,
      //   x: ‘left’,
      //   data:[‘差值’, ‘DCC’,’电话’,’进店’,’外拓’,’二级网点’]
      // },
      series: [
        {
          name:’有望完成进度’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘0%’, ‘20%’],
          // labelLine :{show:true},
          label: {
            normal: {
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              // formatter: ‘{a}’,
              formatter: ‘{c}’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }
            },
            emphasis:{
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{c}’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }              
            }
          },
          itemStyle: {
            normal: {
              color: ‘#ECF0F5’             
            }
          },
          data:[
            {
              value: ‘43%’,
              name:’有望完成进度’,
              // selected:true
              tooltip: {
                trigger: ‘item’,
                formatter: ‘{a} <br/>{c} ({d}%)’
              },
            }
          ]
        },
        {
          name:’客户来源’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘20%’, ‘50%’],
          
          label: {
            normal: {
              position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{b}\r\n{c}’
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data:[
            // {value:113, name:’缺口’, selected:true},
            {
              value: 113,
              name:’缺口’,
              itemStyle: {
                normal: {
                  color: ValueColor.RED
                }
              }
            },
            {
              value: 87,
              name:’新增数’,
              itemStyle: {
                normal: {
                  color: ValueColor.GRAY
                }
              }
            }
          ]
        },
        {
          name:’客户来源’,
          type:’pie’,
          radius: [‘58%’, ‘70%’],
          label: {
            normal: {
              // position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{b} {c}’
            }
          },
          labelLine : {
            normal : {
              length : 10,
              length2 : 15
            }
          },
          data:[
            {
              value:113,
              name:’差值’,
              itemStyle: {
                normal: {
                  color: ValueColor.RED
                }
              }
            },
            {
              value:17,
              name:’DCC’,
              itemStyle: {
                normal: {
                  color: ValueColor.DARK_BLUE
                }
              }
            },
            {
              value:16,
              name:’电话’,
              itemStyle: {
                normal: {
                  color: ValueColor.GREEN
                }
              }
            },
            {
              value:30,
              name:’进店’,
              itemStyle: {
                normal: {
                  color: ValueColor.YELLOW
                }
              }
            },
            {
              value:23,
              name:’外拓’,
              itemStyle: {
                normal: {
                  color: ValueColor.LIGHT_BLUE
                }
              }
            },
            {
              value:1,
              name:’二级网点’,
              itemStyle: {
                normal: {
                  color: ValueColor.GRAY
                }
              }
            }
          ]
        }
      ]
    };
    return option;
  }
  getOrderOption() {
    const option = {
      // title: {
      //   text: ‘订单监控:本月新增订单目标完成进度’,
      //   textStyle: {
      //     color: ‘red’
      //   }
      // },
      tooltip: {
        trigger: ‘item’,
        formatter: ‘{a} <br/>{b}: {c} {d}%’
      },
      series: [
        {
          name:’订单完成进度’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘0%’, ‘20%’],
          // labelLine :{show:true},
          label: {
            normal: {
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{c}%’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }
            },
            emphasis:{
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{c}%’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }              
            }
          },
          itemStyle: {
            normal: {
              color: ‘#ECF0F5’             
            }
          },
          data:[
            {
              value: 60,
              name:’订单完成进度’
              // selected:true
            }
          ]
        },
        {
          name:’客户来源’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘20%’, ‘50%’],
          label: {
            normal: {
              position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              // formatter: ‘{b} {c}’
              formatter: ‘{b}\r\n{c}’
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data:[
            {
              value:20,
              name:’缺口’,
              itemStyle: {
                normal: {
                  color: ValueColor.RED
                }
              }
            },
            {
              value:30,
              name:’订单数’,
              itemStyle: {
                normal: {
                  color: ValueColor.GRAY
                }
              }
            }
          ]
        },
        {
          name:’客户来源’,
          type:’pie’,
          radius: [‘58%’, ‘70%’],
          label: {
            normal: {
              // position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{b} {c}’
            }
          },
          labelLine : {
            normal : {
              length : 10,
              length2 : 15
            }
          },
          data:[
            {
              value:20,
              name:’差值’,
              itemStyle: {
                normal: {
                  color: ValueColor.RED
                }
              }
            },
            {
              value:11,
              name:’DCC’,
              itemStyle: {
                normal: {
                  color: ValueColor.DARK_BLUE
                }
              }
            },
            {
              value:5,
              name:’电话’,
              itemStyle: {
                normal: {
                  color: ValueColor.GREEN
                }
              }
            },
            {
              value:8,
              name:’进店’,
              itemStyle: {
                normal: {
                  color: ValueColor.YELLOW
                }
              }
            },
            {
              value:5,
              name:’外拓’,
              itemStyle: {
                normal: {
                  color: ValueColor.LIGHT_BLUE
                }
              }
            },
            {
              value:1,
              name:’二级网点’,
              itemStyle: {
                normal: {
                  color: ValueColor.GRAY
                }
              }
            }
          ]
        }
      ]
    };
    return option;
  }
  getSalesVolumnOption() {
    const option = {
      // title: {
      //   text: ‘销量监控:本月销量目标完成进度’,
      //   textStyle: {
      //     color: ‘red’
      //   }
      // },
      tooltip: {
        trigger: ‘item’,
        //formatter: ‘{a} <br/>{b}: {c}<br/>百分比:{d}%’
        formatter: ‘{a} <br/>{b}: {c} ({d}%)’
      },
      series: [
        {
          name:’销量完成进度’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘0%’, ‘20%’],
          // labelLine :{show:true},
          label: {
            normal: {
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              // formatter: ‘{a}’,
              formatter: ‘{c}’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }
            },
            emphasis:{
              position: ‘center’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{c}’,
              textStyle: {
                color: ‘#000000’,
                fontSize: 24
              }              
            }
          },
          itemStyle: {
            normal: {
              color: ‘#ECF0F5’             
            }
          },
          data:[
            {
              value: ‘60%’,
              name:’销量完成进度’,
              // selected:true
              tooltip: {
                trigger: ‘item’,
                formatter: ‘{a}<br/>{c} ({d}%)’
              },
            }
          ]
        },
        {
          name:’客户来源’,
          type:’pie’,
          selectedMode: ‘single’,
          radius: [‘20%’, ‘50%’],
          
          label: {
            normal: {
              position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{b}\r\n{c}’
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data:[
            {
              value:10,
              name:’可交付’,
              itemStyle: {
                normal: {
                  color: ValueColor.GREEN
                }
              }
            },
            {
              value:12,
              name:’已交付’,
              itemStyle: {
                normal: {
                  color: ValueColor.GRAY
                }
              }
            }
          ]
        },
        {
          name:’客户来源’,
          type:’pie’,
          radius: [‘58%’, ‘70%’],
          label: {
            normal: {
              // position: ‘inner’,
              // formatter: ‘{a}/{b}/{c}/{d}%’
              formatter: ‘{b} {c}’
            }
          },
          labelLine : {
            normal : {
              length : 10,
              length2 : 15
            }
          },
          data:[
            {
              value:8,
              name:’DCC’,
              itemStyle: {
                normal: {
                  color: ValueColor.DARK_BLUE
                }
              }
            },
            {
              value:2,
              name:’电话’,
              itemStyle: {
                normal: {
                  color: ValueColor.GREEN
                }
              }
            },
            {
              value:1,
              name:’进店’,
              itemStyle: {
                normal: {
                  color: ValueColor.YELLOW
                }
              }
            },
            {
              value:1,
              name:’外拓’,
              itemStyle: {
                normal: {
                  color: ValueColor.LIGHT_BLUE
                }
              }
            },
            {
              value:8,
              name:’差值’,
              itemStyle: {
                normal: {
                  color: ValueColor.RED
                }
              }
            }
          ]
        }
      ]
    };
    return option;
  }
  render() {
    console.log(adminlteReactjs);
    // TODO: refer https://getbootstrap.com/docs/3.3/components/
    // add:
    // <h3>月目标<span class="label label-success">200</span></h3>
    // <h5>月目标<span className="label label-success">200</span></h5>
    
    return (
      <div className="wrapper">
        <HeaderBar />
        <NavigationMenu />
        <div className="content-wrapper">
          <section className="content-header">
            <h1>
              xxx
              <small>管理后台</small>
            </h1>
          </section>
          <section className="content">
            <div className="row">
              <div className="col-md-6">
                <div className="box box-primary">
                  <div className="box-header with-border">
                    <h3 className="box-title">有望监控:本月新增有望客户目标完成进度</h3>
                    <div className="box-tools pull-right">
                      <button type="button" className="btn btn-box-tool" data-widget="collapse"><i className="fa fa-minus"></i>
                      </button>
                      <button type="button" className="btn btn-box-tool" data-widget="remove"><i className="fa fa-times"></i></button>
                    </div>
                  </div>
                  <div className="box-body">
                    <div className="chart">
                      <ReactEcharts
                        option={this.getProspectOption()}
                        />
                    </div>
                    <p className="month_target">月目标<span className="label label-primary">200</span>人</p>
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="box box-success">
                  <div className="box-header with-border">
                    <h3 className="box-title">订单监控:本月新增订单目标完成进度</h3>
                    <div className="box-tools pull-right">
                      <button type="button" className="btn btn-box-tool" data-widget="collapse"><i className="fa fa-minus"></i>
                      </button>
                      <button type="button" className="btn btn-box-tool" data-widget="remove"><i className="fa fa-times"></i></button>
                    </div>
                  </div>
                  <div className="box-body">
                    <div className="chart">
                      <ReactEcharts
                        option={this.getOrderOption()}
                        />
                    </div>
                    <p className="month_target">月目标<span className="label label-primary">50</span>个</p>
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="box box-danger">
                  <div className="box-header with-border">
                    <h3 className="box-title">销量监控:本月销量目标完成进度</h3>
                    <div className="box-tools pull-right">
                      <button type="button" className="btn btn-box-tool" data-widget="collapse"><i className="fa fa-minus"></i>
                      </button>
                      <button type="button" className="btn btn-box-tool" data-widget="remove"><i className="fa fa-times"></i></button>
                    </div>
                  </div>
                  <div className="box-body">
                    <div className="chart">
                      <ReactEcharts
                        option={this.getSalesVolumnOption()}
                        className=’process_pie’
                        />
                    </div>
                    <p className="month_target">月目标<span className="label label-primary">20</span>个</p>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <footer className="main-footer">
            <div className="pull-right hidden-xs">
              <b>Version</b> 1.0.0
            </div>
            <strong>Copyright © 2017 <a href="http://www.skoda.com.cn">上汽大众斯柯达</a>版权所有.</strong>
          </footer>
        </div>
      </div>
    );
  }
}

就可以出来效果了:

转载请注明:在路上 » 【已解决】ReactJS中添加AdminLTE中的盒子效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
66 queries in 0.124 seconds, using 19.00MB memory