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;
浙公网安备 33010602011771号