| | |
| | | } |
| | | }, |
| | | lineColors: ['#91A0FC'], |
| | | barColors: ['#13ce66', '#F56C6C'], // 合格绿 / 不合格红 |
| | | barColors: ['#9fe080', '#ff994d'], // 合格绿 / 不合格红 |
| | | barColors2: ['#A4EEDA'], |
| | | pieTooltip: { |
| | | trigger: 'item' |
| | |
| | | }, |
| | | rawPieSeries: [ |
| | | { |
| | | name: 'Access From', |
| | | name: '', |
| | | type: 'pie', |
| | | radius: '70%', |
| | | center: ['50%', '50%'], |
| | |
| | | borderWidth: 2 |
| | | }, |
| | | label: { |
| | | alignTo: 'edge', |
| | | alignTo: 'labelLine', |
| | | formatter: '{name|{b}}\n{time|{c}}', |
| | | edgeDistance: 10, |
| | | lineHeight: 15, |
| | |
| | | length2: 40 |
| | | }, |
| | | data: [ |
| | | { value: 0, name: '不合格数量', itemStyle: { color: '#F56C6C' } }, |
| | | { value: 0, name: '合格数量', itemStyle: { color: '#67C23A' } } |
| | | { value: 0, name: '不合格数量', itemStyle: {color: '#ff994d'} }, |
| | | { value: 0, name: '合格数量', itemStyle: { color: '#9fe080' } } |
| | | ] |
| | | } |
| | | ], |
| | | conductorPieSeries: [ |
| | | { |
| | | name: 'Access From', |
| | | name: '', |
| | | type: 'pie', |
| | | radius: '70%', |
| | | center: ['50%', '50%'], |
| | |
| | | borderWidth: 2 |
| | | }, |
| | | label: { |
| | | alignTo: 'edge', |
| | | alignTo: 'labelLine', |
| | | formatter: '{name|{b}}\n{time|{c}}', |
| | | edgeDistance: 10, |
| | | lineHeight: 15, |
| | |
| | | length2: 40, |
| | | }, |
| | | data: [ |
| | | { value: 0, name: '不合格数量', itemStyle: { color: '#F56C6C' } }, |
| | | { value: 0, name: '合格数量', itemStyle: { color: '#67C23A' } }, |
| | | { value: 0, name: '不合格数量', itemStyle: { color: '#ff994d' } }, |
| | | { value: 0, name: '合格数量', itemStyle: { color: '#9fe080' } }, |
| | | ] |
| | | } |
| | | ], |
| | | dlanPieSeries: [ |
| | | { |
| | | name: 'Access From', |
| | | name: '', |
| | | type: 'pie', |
| | | radius: '70%', |
| | | center: ['50%', '50%'], |
| | |
| | | borderWidth: 2 |
| | | }, |
| | | label: { |
| | | alignTo: 'edge', |
| | | alignTo: 'labelLine', |
| | | formatter: '{name|{b}}\n{time|{c}}', |
| | | edgeDistance: 10, |
| | | lineHeight: 15, |
| | |
| | | length2: 40, |
| | | }, |
| | | data: [ |
| | | { value: 0, name: '不合格数量', itemStyle: { color: '#F56C6C' } }, |
| | | { value: 0, name: '合格数量', itemStyle: { color: '#67C23A' } }, |
| | | { value: 0, name: '不合格数量', itemStyle: { color: '#ff994d' } }, |
| | | { value: 0, name: '合格数量', itemStyle: { color: '#9fe080' } }, |
| | | ] |
| | | } |
| | | ], |
| | |
| | | // 方法集合 |
| | | methods: { |
| | | // 获取合格率图表数据 |
| | | |
| | | setBarChartTitle() { |
| | | this.echartsOptions.title.text = `${this.inspectionTitle}合格率趋势`; |
| | | }, |
| | | |
| | | getBar() { |
| | | const types = this.currentMaterialProp.split(','); |
| | | const requests = types.map(t => { |
| | |
| | | } |
| | | }); |
| | | |
| | | const sortedDates = Object.keys(dateMap).sort(); |
| | | const weekOrderMap = { |
| | | "星期一": 0, |
| | | "星期二": 1, |
| | | "星期三": 2, |
| | | "星期四": 3, |
| | | "星期五": 4, |
| | | "星期六": 5, |
| | | "星期日": 6 |
| | | }; |
| | | const yearOrderMap = { |
| | | "1月": 0, |
| | | "2月": 1, |
| | | "3月": 2, |
| | | "4月": 3, |
| | | "5月": 4, |
| | | "6月": 5, |
| | | "7月": 6, |
| | | "8月": 7, |
| | | "9月": 8, |
| | | "10月": 9, |
| | | "11月": 10, |
| | | "12月": 11 |
| | | }; |
| | | const sortedDates = Object.keys(dateMap).sort((a, b) => { |
| | | if(a.includes("星期") && b.includes("星期")) { |
| | | return weekOrderMap[a] - weekOrderMap[b]; |
| | | } else if(a.includes("月") && b.includes("月")) { |
| | | return yearOrderMap[a] - yearOrderMap[b]; |
| | | } else { |
| | | return new Date(a) - new Date(b); |
| | | } |
| | | }); |
| | | let qualifiedData = []; |
| | | let unQualifiedData = []; |
| | | let lineData = []; |
| | | let xAxis = []; |
| | | |
| | | console.log(sortedDates) |
| | | sortedDates.forEach(date => { |
| | | const { qualified, unQualified } = dateMap[date]; |
| | | const total = qualified + unQualified; |
| | |
| | | this.echartsSeries[1].data = unQualifiedData; |
| | | this.echartsSeries[2].data = lineData; |
| | | this.xAxis[0].data = xAxis; |
| | | console.log(xAxis) |
| | | }); |
| | | }, |
| | | |