现在已经是：
代码：
<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中的盒子效果