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, yactnumname, yusenumname, sallnumname, 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%', '55%'], 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,0,0)', 168 label: { show: false }, 169 labelLine: { show: false } 170 }, 171 emphasis: { 172 color: 'rgba(0,0,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%', '55%'], 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,0,0,0)', 225 label: { show: false }, 226 labelLine: { show: false } 227 }, 228 emphasis: { 229 color: 'rgba(0,0,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', height: '25px', 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', width: '50px', height: '25px', borderRadius: '0px 5px 5px 0px', border: '1px solid #C9504F', outline: 'none', 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;
react+echarts实现环形图
猜你喜欢
转载自www.cnblogs.com/zanderblogs/p/9083840.html
今日推荐
周排行