| | |
| | | }, |
| | | watch:{ |
| | | produceCompletionData(val){ |
| | | let xData=[],yData1=[],yData2=[]; |
| | | let xData=[],yData1=[],yData2=[],yData3=[]; |
| | | val.forEach(item => { |
| | | xData.push(item.month) |
| | | yData1.push(item.planCompletionNum) |
| | | yData2.push(item.planCompletionRate) |
| | | yData1.push(item.completionNum) //实际 |
| | | yData2.push(item.planCompletionRate) //planCompletionRate |
| | | yData3.push(item.planCompletionNum) //计划 |
| | | }); |
| | | this.$set(this.option.xAxis,'data',xData) |
| | | this.$set(this.option.series[0],'data',yData1) |
| | | this.$set(this.option.series[1],'data',yData2) |
| | | this.$set(this.option.series[2],'data',yData3) |
| | | this.$nextTick(() => { |
| | | this.myChart.setOption(this.option); |
| | | }); |
| | | |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | tooltip: { |
| | | trigger: "axis", |
| | | formatter: |
| | | '{b0}月<br /><a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br /><a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%', |
| | | '{b0}月<br />' + |
| | | '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br />' + |
| | | '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />'+ |
| | | '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // 添加生产计划数提示 |
| | | backgroundColor: "rgba(0,0,0,0.7)", |
| | | |
| | | textStyle: { |
| | | color: "#fff", |
| | | }, |
| | |
| | | yAxis: [ |
| | | { |
| | | type: "value", |
| | | // name: "报警次数", |
| | | position:'left', |
| | | axisLine: { |
| | | show: true, |
| | |
| | | width:3 |
| | | } |
| | | }, |
| | | { |
| | | name: "生产计划数", // 添加生产计划数 |
| | | type: "line", |
| | | data: [], // 根据需要填充此数组 |
| | | showSymbol: false, |
| | | yAxisIndex: 0, // 与相应的 y 轴关联 |
| | | color: 'rgba(255,205,86,0.85)', // 自定义颜色 |
| | | lineStyle: { |
| | | width: 3 |
| | | } |
| | | } |
| | | ], |
| | | // animation: true, |
| | | // dataZoom: [ |
| | |
| | | }, |
| | | watch: { |
| | | produceStatisData(val) { |
| | | this.$set(this.option.series[1], "data", [ |
| | | { value: val.currentMonthProduceNum }, |
| | | { value: val.currentMonthPlanNum - val.currentMonthProduceNum }, |
| | | ]); |
| | | // 当前班组实际生产数量 currentShiftProduceNum |
| | | // 当前班组计划生产数量 currentShiftPlanNum |
| | | var num1 = val.currentShiftProduceNum; //实际生产数量 |
| | | var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量 |
| | | if(val.currentShiftPlanNum == 0){ //分母为0 显示0% |
| | | num1 = 0 |
| | | num2 = 10 |
| | | } |
| | | this.$set(this.option.series[0], "data", [ |
| | | |
| | | // { value: 1 }, //实际生产数量 1/ (9+1) = 10% |
| | | // { value: 9 }, |
| | | |
| | | { value: val.currentShiftProduceNum }, |
| | | { value: val.currentShiftPlanNum - val.currentShiftProduceNum }, |
| | | { value: num1 }, //实际生产数量 |
| | | { value: num2 }, |
| | | ]); |
| | | var num3 = val.currentMonthProduceNum; |
| | | var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; |
| | | if(val.currentMonthPlanNum == 0 ){ //分母为0 显示0% |
| | | num3 = 0 |
| | | num4 = 10 |
| | | } |
| | | this.$set(this.option.series[1], "data", [ |
| | | { value: num3 }, |
| | | { value: num4 }, |
| | | ]); |
| | | |
| | | this.myChart.setOption(this.option); |
| | | this.hignLightPie(); |
| | | }, |