react+echarts实现环形图

  1 import React,{ Component } from ‘react‘;
  2 import axios from ‘axios‘;
  3 import echarts from ‘echarts/lib/echarts‘;
  4 import ‘echarts/lib/chart/pie‘;
  5 import ‘echarts/lib/component/tooltip‘;
  6 import ‘echarts/lib/component/title‘;
  7 
  8 class ProjectBar extends Component {
  9     constructor(props) {
 10         super(props);
 11         this.state = {
 12             alldata: {}, 13             yeardata: {}
 14         };
 15         this.refreshDate = this.refreshDate.bind(this);
 16         this.initData = this.initData.bind(this);
 17     }
 18     async componentWillMount() {
 19         const res = await axios.post(‘*******‘);
 20         if (res.data.success === ‘success‘) {
 21             this.setState({
 22                 alldata: res.data.detailMsg.data.all, 23                 yeardata: res.data.detailMsg.data.year
 24                 // totalcontract: res.data.detailMsg.data.totalcontract,
 25                 // hsytotalcontract: res.data.detailMsg.data.hsytotalcontract
 26             });
 27             this.initData(this.state.yeardata,‘year‘);
 28         }
 29     }
 30     refreshDate(type) {
 31         return () => {
 32             if (type === ‘all‘) {
 33                 document.getElementById(‘all1‘).style.backgroundColor = ‘#F6E1E0‘;
 34                 document.getElementById(‘year1‘).style.backgroundColor = ‘#FFFFFF‘;
 35                 document.getElementById(‘all1‘).style.color = ‘#C13837‘;
 36                 document.getElementById(‘year1‘).style.color = ‘#595959‘;
 37                 this.initData(this.state.alldata,type);
 38             } else {
 39                 document.getElementById(‘year1‘).style.backgroundColor = ‘#F6E1E0‘;
 40                 document.getElementById(‘all1‘).style.backgroundColor = ‘#FFFFFF‘;
 41                 document.getElementById(‘all1‘).style.color = ‘#595959‘;
 42                 document.getElementById(‘year1‘).style.color = ‘#C13837‘;
 43                 this.initData(this.state.yeardata,type);
 44             }
 45         };
 46     }
 47     initData(data,type) {
 48         console.log(this);
 49         const yallnumname = `公有云项目数${data.yallnum}`;
 50         const yactnumname = `公有云激活数${data.yactnum}`;
 51         const yusenumname = `公有云上线数${data.yusenum}`;
 52         const sallnumname = `私有云项目数${data.sallnum}`;
 53         const sactnumname = `私有云激活数${data.sactnum}`;
 54         let legenddata = [yallnumname,yactnumname,sallnumname,sactnumname];
 55         if (type === ‘all‘) {
 56             legenddata = [yallnumname,yusenumname,sactnumname];
 57         }
 58         const allnum = data.yallnum + data.sallnum;
 59         const ProjectBarChart = echarts.init(document.getElementById(‘ProjectBar‘));
 60         // 绘制图表
 61         ProjectBarChart.setOption({
 62             title: {
 63                 text: ‘U8 cloud 项目‘, 64                 x: ‘center‘, 65                 y: ‘10px‘, 66                 itemGap: 20, 67                 textStyle: {
 68                     color: ‘#333333‘, 69                     fontFamily: ‘微软雅黑‘, 70                     fontSize: 20
 71                 }
 72             }, 73             tooltip: {
 74                 show: true, 75                 formatter: ‘{b}‘
 76             }, 77             legend: {
 78                 orient: ‘vertical‘, 79                 // icon: ‘rect‘,
 80                 // ‘circle‘,‘rect‘,‘roundRect‘,‘triangle‘,‘diamond‘,‘pin‘,‘arrow‘
 81                 x: ‘65%‘, 82                 y: ‘45%‘, 83                 itemWidth: 10, 84                 itemHeight: 7, 85                 itemGap: 16, 86                 textStyle: {
 87                     fontSize: 12
 88                 }, 89                 data: legenddata
 90             }, 91             series: [
 92                 {
 93                     name: ‘公有云项目数‘, 94                     type: ‘pie‘, 95                     clockWise: true,// 顺时针
 96                     radius: [‘45%‘,‘60%‘], 97                     center: [‘35%‘,‘55%‘], 98                     itemStyle: {
 99                         normal: {
100                             label: { show: false },101                             labelLine: { show: false }
102                         }
103                     },104                     data: [
105                         {
106                             value: data.yallnum,107                             name: yallnumname,108                             itemStyle: {
109                                 normal: {
110                                     color: ‘#2991E6‘,111                                     label: { show: false },112                                     labelLine: { show: false }
113                                 },114                                 emphasis: {
115                                     color: ‘#2991E6‘
116                                 }
117                             }
118                         },119                         {
120                             value: data.sallnum,121                             name: sallnumname,122                             itemStyle: {
123                                 normal: {
124                                     color: ‘#28BB63‘,125                                     label: { show: false },126                                     labelLine: { show: false }
127                                 },128                                 emphasis: {
129                                     color: ‘#28BB63‘
130                                 }
131                             }
132                         },133                     ]
134                 },135                 {
136                     name: ‘激活数‘,137                     type: ‘pie‘,138                     clockWise: true,139                     radius: [‘30%‘,‘45%‘],140                     center: [‘35%‘,141                     itemStyle: {
142                         normal: {
143                             label: { show: false },144                             labelLine: { show: false }
145                         }
146                     },147                     data: [
148                         {
149                             value: data.yactnum,150                             name: yactnumname,151                             itemStyle: {
152                                 normal: {
153                                     color: ‘#82C0FB‘,154                                     label: { show: false },155                                     labelLine: { show: false }
156                                 },157                                 emphasis: {
158                                     color: ‘#82C0FB‘
159                                 }
160                             }
161                         },162                         {
163                             value: allnum - data.yactnum - data.sactnum,164                             name: ‘‘,165                             itemStyle: {
166                                 normal: {
167                                     color: ‘rgba(0,0)‘,168                                     label: { show: false },169                                     labelLine: { show: false }
170                                 },171                                 emphasis: {
172                                     color: ‘rgba(0,0)‘
173                                 }
174                             }
175                         },176                         {
177                             value: data.sactnum,178                             name: sactnumname,179                             itemStyle: {
180                                 normal: {
181                                     color: ‘#6BD094‘,182                                     label: { show: false },183                                     labelLine: { show: false }
184                                 },185                                 emphasis: {
186                                     color: ‘#6BD094‘
187                                 }
188                             }
189                         }
190                     ]
191                 },192                 {
193                     name: ‘上线数‘,194                     type: ‘pie‘,195                     clockWise: true,196                     radius: [‘15%‘,‘30%‘],197                     center: [‘35%‘,198                     itemStyle: {
199                         normal: {
200                             label: { show: false },201                             labelLine: { show: false }
202                         }
203                     },204                     data: [
205                         {
206                             value: data.yusenum,207                             name: yusenumname,208                             itemStyle: {
209                                 normal: {
210                                     color: ‘#B7DBFB‘,211                                     label: { show: false },212                                     labelLine: { show: false }
213                                 },214                                 emphasis: {
215                                     color: ‘#B7DBFB‘
216                                 }
217                             }
218                         },219                         {
220                             value: allnum - data.yusenum,221                             name: ‘‘,222                             itemStyle: {
223                                 normal: {
224                                     color: ‘rgba(0,225                                     label: { show: false },226                                     labelLine: { show: false }
227                                 },228                                 emphasis: {
229                                     color: ‘rgba(0,0)‘
230                                 }
231                             }
232                         }
233                     ]
234                 }
235             ]
236         });
237     }
238     render() {
239         return (
240         <div style={{ position: ‘relative‘,width: ‘100%‘ }}>
241             <div style={{ zIndex: ‘1‘,width: ‘100px‘,height: ‘25px‘,float: ‘right‘,left: ‘66%‘,top: ‘110px‘,position: ‘absolute‘,fontSize: ‘14px‘,fontFamily: ‘微软雅黑‘ }}>
242                 <button id="all1" style={{ float: ‘left‘,width: ‘50px‘,borderRadius: ‘5px 0px 0px 5px‘,border: ‘1px solid #C9504F‘,borderRight: ‘none‘,outline: ‘none‘,backgroundColor: ‘#FFFFFF‘ }} onClick={this.refreshDate(‘all‘)}>累计</button>
243                 <button id="year1" style={{ float: ‘left‘,borderRadius: ‘0px 5px 5px 0px‘,backgroundColor: ‘#F6E1E0‘,color: ‘#C13837‘ }} onClick={this.refreshDate(‘year‘)} >本年</button>
244             </div>
245             <div id="ProjectBar" style={{ width: ‘100%‘,height: ‘350px‘,position: ‘absolute‘ }} />
246         </div>
247         );
248     }
249 }
250 
251 export default ProjectBar;