Merge branch 'master-v32-lushangqing' into 'master'
电子税务局 业务量环形图样式更改, See merge request !70
Showing
2 changed files
with
73 additions
and
13 deletions
@@ -13,13 +13,13 @@ | @@ -13,13 +13,13 @@ | ||
13 | } | 13 | } |
14 | .busniess-circle-left { | 14 | .busniess-circle-left { |
15 | position: absolute; | 15 | position: absolute; |
16 | - left: 19%; | ||
17 | - top: 59%; | 16 | + left: 18%; |
17 | + top: 38%; | ||
18 | } | 18 | } |
19 | .busniess-circle-right { | 19 | .busniess-circle-right { |
20 | position: absolute; | 20 | position: absolute; |
21 | - left: 63%; | ||
22 | - top: 59%; | 21 | + left: 62%; |
22 | + top: 38%; | ||
23 | } | 23 | } |
24 | .busniess-circle-text { | 24 | .busniess-circle-text { |
25 | text-align: center; | 25 | text-align: center; |
@@ -57,13 +57,13 @@ export default { | @@ -57,13 +57,13 @@ export default { | ||
57 | // this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons') | 57 | // this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons') |
58 | this.chartInstance = echarts.init(document.getElementById('volume_ref')) | 58 | this.chartInstance = echarts.init(document.getElementById('volume_ref')) |
59 | const initOption = { | 59 | const initOption = { |
60 | - legend: { | 60 | + /*legend: { |
61 | top: '20%', | 61 | top: '20%', |
62 | - left: 'center', | ||
63 | textStyle: { | 62 | textStyle: { |
64 | color: '#ffffff' | 63 | color: '#ffffff' |
65 | } | 64 | } |
66 | - } | 65 | + |
66 | + }*/ | ||
67 | } | 67 | } |
68 | this.chartInstance.setOption(initOption) | 68 | this.chartInstance.setOption(initOption) |
69 | }, | 69 | }, |
@@ -128,8 +128,8 @@ export default { | @@ -128,8 +128,8 @@ export default { | ||
128 | }, | 128 | }, |
129 | updateChart () { | 129 | updateChart () { |
130 | const centerArr = [ | 130 | const centerArr = [ |
131 | - ['22%', '65%'], | ||
132 | - ['66%', '65%'] | 131 | + ['22%', '43%'], |
132 | + ['66%', '43%'] | ||
133 | ] | 133 | ] |
134 | 134 | ||
135 | 135 | ||
@@ -162,7 +162,7 @@ export default { | @@ -162,7 +162,7 @@ export default { | ||
162 | 162 | ||
163 | return { | 163 | return { |
164 | type: 'pie', | 164 | type: 'pie', |
165 | - radius: ['20%', '50%'], | 165 | + radius: ['28%', '42%'], |
166 | center: centerArr[index], | 166 | center: centerArr[index], |
167 | color:colorData, | 167 | color:colorData, |
168 | // minAngle: 15,//最小角度 | 168 | // minAngle: 15,//最小角度 |
@@ -171,20 +171,80 @@ export default { | @@ -171,20 +171,80 @@ export default { | ||
171 | borderRadius: 2, | 171 | borderRadius: 2, |
172 | borderWidth: 2 | 172 | borderWidth: 2 |
173 | }, | 173 | }, |
174 | + top:0, | ||
174 | left:0, | 175 | left:0, |
175 | right:0, | 176 | right:0, |
176 | label: { | 177 | label: { |
177 | // position: 'outer', | 178 | // position: 'outer', |
178 | // alignTo: 'labelLine', | 179 | // alignTo: 'labelLine', |
180 | + show:false, | ||
179 | formatter: '{c}个', | 181 | formatter: '{c}个', |
180 | // padding:[10,-20,5,10], | 182 | // padding:[10,-20,5,10], |
181 | - position: 'inside', | 183 | + position: 'center', |
182 | color:'#ffffff' | 184 | color:'#ffffff' |
183 | }, | 185 | }, |
186 | + labelLine: { | ||
187 | + show: false | ||
188 | + }, | ||
184 | data: dataArr | 189 | data: dataArr |
185 | } | 190 | } |
186 | }) | 191 | }) |
187 | const dataOption = { | 192 | const dataOption = { |
193 | + legend:[ | ||
194 | + { | ||
195 | + left: '8%', | ||
196 | + bottom:'5%', | ||
197 | + itemHeight:12, | ||
198 | + itemWidth:12, | ||
199 | + itemGap:20, | ||
200 | + icon:'circle', | ||
201 | + orient: "vertical", | ||
202 | + textStyle: { | ||
203 | + color: '#ffffff', | ||
204 | + fontSize:12, | ||
205 | + }, | ||
206 | + | ||
207 | + formatter:function(name){ | ||
208 | + let data=dataOption.series[0].data; | ||
209 | + let tarValue=0; | ||
210 | + data.map((item,index)=>{ | ||
211 | + if(item.name==name){ | ||
212 | + tarValue=item.value | ||
213 | + } | ||
214 | + }) | ||
215 | + let valStr=tarValue.toString() | ||
216 | + let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; | ||
217 | + let valData=valStr.replace(reg,"$1,"); | ||
218 | + return name+' '+' '+valData+' 个'; | ||
219 | + } | ||
220 | + }, | ||
221 | + { | ||
222 | + left: '53%', | ||
223 | + bottom:'5%', | ||
224 | + itemHeight:12, | ||
225 | + itemWidth:12, | ||
226 | + itemGap:20, | ||
227 | + icon:'circle', | ||
228 | + orient: "vertical", | ||
229 | + textStyle: { | ||
230 | + color: '#ffffff', | ||
231 | + fontSize:12, | ||
232 | + }, | ||
233 | + formatter:function(name){ | ||
234 | + let data=dataOption.series[0].data; | ||
235 | + let tarValue=0; | ||
236 | + data.map((item,index)=>{ | ||
237 | + if(item.name==name){ | ||
238 | + tarValue=item.value | ||
239 | + } | ||
240 | + }) | ||
241 | + let valStr=tarValue.toString() | ||
242 | + let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; | ||
243 | + let valData=valStr.replace(reg,"$1,"); | ||
244 | + return name+' '+' '+valData+' 个'; | ||
245 | + } | ||
246 | + } | ||
247 | + ], | ||
188 | tooltip: { | 248 | tooltip: { |
189 | trigger: 'item', | 249 | trigger: 'item', |
190 | backgroundColor:'rgba(50,50,50,0.7)', | 250 | backgroundColor:'rgba(50,50,50,0.7)', |
@@ -240,14 +300,14 @@ export default { | @@ -240,14 +300,14 @@ export default { | ||
240 | // } | 300 | // } |
241 | // } | 301 | // } |
242 | // }, | 302 | // }, |
243 | - legend: { | 303 | + /*legend: { |
244 | itemWidth: this.titleFontSize * 1.5, | 304 | itemWidth: this.titleFontSize * 1.5, |
245 | itemHeight: this.titleFontSize / 4, | 305 | itemHeight: this.titleFontSize / 4, |
246 | itemGap: this.titleFontSize * 2.5, | 306 | itemGap: this.titleFontSize * 2.5, |
247 | textStyle: { | 307 | textStyle: { |
248 | fontSize: this.titleFontSize / 1.3 | 308 | fontSize: this.titleFontSize / 1.3 |
249 | } | 309 | } |
250 | - } | 310 | + }*/ |
251 | } | 311 | } |
252 | this.chartInstance.setOption(adapterOption) | 312 | this.chartInstance.setOption(adapterOption) |
253 | this.chartInstance.resize() | 313 | this.chartInstance.resize() |
-
Please register or login to post a comment