| | |
| | | }, |
| | | } |
| | | }, |
| | | mounted(){ |
| | | // this.initLeaderStatiChart(""); |
| | | this.initLeaderTimelyChart("leaderTimely"); |
| | | this.initTesterStatiChart("testerStati"); |
| | | this.initTesterTimelyChart("testerTimely"); |
| | | }, |
| | | mounted(){}, |
| | | methods: { |
| | | async queryData(){ |
| | | let date = this.formInline.date; |
| | |
| | | series: [ |
| | | { |
| | | name: '已完成', |
| | | barWidth: '20%', |
| | | barWidth: '30%', |
| | | type: 'bar', |
| | | stack: 'one', |
| | | emphasis: emphasisStyle, |
| | |
| | | option && myChart.setOption(option); |
| | | }, |
| | | initTesterStatiChart(id,executeMater){ |
| | | console.log("qqq----",executeMater); |
| | | var chartDom = document.getElementById(id); |
| | | var myChart = echarts.init(chartDom); |
| | | window.addEventListener('resize', function() { |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | |
| | | let max = 0; |
| | | let xAxisData = []; |
| | | let data1 = []; |
| | | let data2 = []; |
| | | // for(let i=0;i<executeMater.length;i++){ |
| | | // xAxisData.push(executeMater[i].name); |
| | | // data1.push(executeMater[i].finsh); |
| | | // data2.push(executeMater[i].unfinsh); |
| | | // } |
| | | for(let i=0;i<executeMater.length;i++){ |
| | | xAxisData.push(executeMater[i].name); |
| | | data1.push(executeMater[i].finsh); |
| | | data2.push(executeMater[i].unfinsh); |
| | | let sum = executeMater[i].finsh + executeMater[i].unfinsh; |
| | | if(sum > max){ |
| | | max = sum; |
| | | } |
| | | } |
| | | var emphasisStyle = { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | |
| | | }, |
| | | yAxis: { |
| | | min: 0, |
| | | max: 60, |
| | | interval: 10, |
| | | max: max, |
| | | interval: 1, |
| | | }, |
| | | grid: { |
| | | bottom: 100 |
| | |
| | | name: '数据1', |
| | | type: 'bar', |
| | | stack: 'one', |
| | | barWidth: '30%', |
| | | emphasis: emphasisStyle, |
| | | data: data1, |
| | | itemStyle:{ |
| | |
| | | name: '数据2', |
| | | type: 'bar', |
| | | stack: 'one', |
| | | barWidth: '30%', |
| | | emphasis: emphasisStyle, |
| | | data: data2, |
| | | itemStyle:{ |
| | |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | let xAxisData = []; |
| | | let data1 = []; |
| | | let data2 = []; |
| | | let yAxisData1 = 0; |
| | | for(let i=0;i<dutyTimely.length;i++){ |
| | | xAxisData.push(dutyTimely[i].name); |
| | | data1.push(dutyTimely[i].total); |
| | | data2.push(dutyTimely[i].timely); |
| | | if(dutyTimely[i].total > yAxisData1){ |
| | | yAxisData1 = dutyTimely[i].total; |
| | | } |
| | | } |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | { |
| | | name: '姓名', |
| | | type: 'category', |
| | | data: ['沐秋',], |
| | | data: xAxisData, |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | itemStyle: { |
| | | top: '20px' |
| | | } |
| | | } |
| | | ], |
| | | yAxis: [ |
| | |
| | | type: 'value', |
| | | name: '数量', |
| | | min: 0, |
| | | max: 10, |
| | | max: yAxisData1, |
| | | interval: 1, |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | |
| | | { |
| | | name: '样品数', |
| | | type: 'bar', |
| | | barWidth: '20%', |
| | | barWidth: '30%', |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value; |
| | | } |
| | | }, |
| | | data: [4.0], |
| | | data: data1, |
| | | itemStyle: { |
| | | color: '#9fceff' |
| | | } |
| | |
| | | { |
| | | name: '完成及时率', |
| | | type: 'line', |
| | | yAxisIndex: 1, |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + ' %'; |
| | | } |
| | | }, |
| | | data: [7.5], |
| | | data: [{value:20},{value:40}], |
| | | itemStyle: { |
| | | color: '#d2eec5' |
| | | } |
| | | }, |
| | | ] |
| | | }; |
| | | |
| | | option && myChart.setOption(option); |
| | | }, |
| | | initTesterTimelyChart(id,executeTimely){ |
| | |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | let xAxisData = []; |
| | | let data1 = []; |
| | | let data2 = []; |
| | | let yAxisData1 = 0; |
| | | for(let i=0;i<executeTimely.length;i++){ |
| | | xAxisData.push(executeTimely[i].name); |
| | | data1.push(executeTimely[i].total); |
| | | data2.push(executeTimely[i].timely); |
| | | if(executeTimely[i].total > yAxisData1){ |
| | | yAxisData1 = executeTimely[i].total; |
| | | } |
| | | } |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: ["","",""], |
| | | data: xAxisData, |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | |
| | | type: 'value', |
| | | name: '', |
| | | min: 0, |
| | | max: 50, |
| | | interval: 5, |
| | | max: yAxisData1, |
| | | interval: 1, |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | | } |
| | |
| | | { |
| | | name: '项目数', |
| | | type: 'bar', |
| | | barWidth: '30%', |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value ; |
| | | } |
| | | }, |
| | | data: [2.0, 4.9, 7.0], |
| | | data: data1, |
| | | itemStyle: { |
| | | color: '#5087ec' |
| | | } |
| | |
| | | return value + ' %'; |
| | | } |
| | | }, |
| | | data: [2.0, 2.2, 3.3], |
| | | data: data2, |
| | | itemStyle: { |
| | | color: '#68bbc4' |
| | | } |