| | |
| | | <div class="flex-box"> |
| | | <div> |
| | | <div class="dimension">违规率</div> |
| | | <div class="dimension-val">{{slide.ratio}}</div> |
| | | <div class="dimension-val">{{slide.ratio}}%</div> |
| | | </div> |
| | | <div style="margin-left: 60px;"> |
| | | <Pie :options="optOfPie(slide)" :pieW="70" :pieH="70"></Pie> |
| | |
| | | observeParents: true, |
| | | }, |
| | | slides: [ |
| | | { id: 'jlfgs', name: '机量分公司', ratio: 82, }, |
| | | { id: 'ztyj', name: '中铁一局', ratio: 78, }, |
| | | { id: 'ztsj', name: '中铁三局', ratio: 45 }, |
| | | { id: 'ztsij', name: '中铁四局', ratio: 30 }, |
| | | { id: 'jtjw', name: '京铁机务', ratio: 30 }, |
| | | { id: 'ztwj', name: '中铁五局', ratio: 30 }, |
| | | { id: 'jgjw', name: '京高机务', ratio: 30 }, |
| | | { id: 'jlfgs', name: '机量分公司', ratio: 1.5, }, |
| | | { id: 'ztyj', name: '中铁一局', ratio: 1.6, }, |
| | | { id: 'ztsj', name: '中铁三局', ratio: 1.2 }, |
| | | { id: 'ztsij', name: '中铁四局', ratio: 1.3 }, |
| | | { id: 'jtjw', name: '京铁机务', ratio: 0.2 }, |
| | | { id: 'ztwj', name: '中铁五局', ratio: 1.2 }, |
| | | { id: 'jgjw', name: '京高机务', ratio: 0.7 }, |
| | | ], |
| | | actSlide: '' |
| | | } |
| | |
| | | type: 'pie', |
| | | color: ['#18bfff', '#e9f6fb'], |
| | | radius: ['60%', '90%'], |
| | | //center: ['40%','60%'], |
| | | tooltip: { |
| | | show: false |
| | | }, |
| | |
| | | show: false, |
| | | position: 'center' |
| | | }, |
| | | // emphasis: { |
| | | // label: { |
| | | // show: true, |
| | | // fontSize: '30', |
| | | // fontWeight: 'bold' |
| | | // } |
| | | // }, |
| | | hoverAnimation: false, |
| | | labelLine: { |
| | | show: false |
| | |
| | | }, |
| | | checkSlide (slide) { |
| | | this.actSlide = slide.id; |
| | | this.$emit('checkTab',slide) |
| | | } |
| | | } |
| | | } |