| | |
| | | </div> |
| | | <div class="echarts-box border_right1"> |
| | | <div class="echarts-title">本班/本月产量统计</div> |
| | | |
| | | |
| | | <ProductionStatistics :produceStatisData="produceStatisData" /> |
| | | <div class="pie-label-left"> |
| | | <!-- 当前班组实际生产数量 --> |
| | | {{ produceStatisData.currentShiftProduceNum }} |
| | | <span v-if="produceStatisData.currentShiftPlanNum||produceStatisData.currentShiftPlanNum==0">/</span> |
| | | <!-- 当前班组计划生产数量 --> |
| | | {{ |
| | | produceStatisData.currentShiftPlanNum |
| | | }} |
| | |
| | | orient: "vertical", |
| | | top: "25%", |
| | | right: "5%", |
| | | // itemGap: 20, |
| | | itemGap: 2, //块之间的间距 |
| | | itemHeight: 5, |
| | | itemWidth: 5, // 设置图例项的宽度 |
| | | data: ["生产", "完成", "待机", "警告", "故障"], |
| | | textStyle: { |
| | | color: "#fff", |
| | |
| | | series: [ |
| | | { |
| | | type: "pie", |
| | | radius: ["25%", "40%"], |
| | | center: ["38%", "50%"], |
| | | // radius: ["20%", "30%"], |
| | | // center: ["33%", "50%"], |
| | | radius: ["20%", "30%"], |
| | | center: ["33%", "50%"], |
| | | avoidLabelOverlap: false, |
| | | // left: "-30%", |
| | | // top: "10%", |
| | |
| | | /* height:5.2rem; */ |
| | | transform: scaleY(2); |
| | | } |
| | | .box-container{ |
| | | position: relative; |
| | | /* border: 1px solid red; */ |
| | | } |
| | | </style> |
| | |
| | | this.option = { |
| | | legend: { |
| | | orient: "vertical", |
| | | bottom: '12%', |
| | | bottom: '10%', |
| | | right: '6%', |
| | | textStyle:{ |
| | | color:'#fff' |
| | | }, |
| | | itemWidth: 5, // 设置图例项的宽度 |
| | | data: [ |
| | | { |
| | | name: "实际", |
| | |
| | | }, |
| | | radar: { |
| | | center:['43%','55%'], |
| | | radius:'70%', |
| | | radius:'65%', |
| | | indicator: [ |
| | | { name: "人", max: 100, color: "#fff" }, |
| | | { name: "环", max: 100, color: "#fff" }, |
| | |
| | | { value: val.currentMonthProduceNum }, |
| | | { value: val.currentMonthPlanNum - val.currentMonthProduceNum }, |
| | | ]); |
| | | // 当前班组实际生产数量 currentShiftProduceNum |
| | | // 当前班组计划生产数量 currentShiftPlanNum |
| | | this.$set(this.option.series[0], "data", [ |
| | | |
| | | // { value: 1 }, //实际生产数量 1/ (9+1) = 10% |
| | | // { value: 9 }, |
| | | |
| | | { value: val.currentShiftProduceNum }, |
| | | { value: val.currentShiftPlanNum - val.currentShiftProduceNum }, |
| | | ]); |
| | |
| | | fontSize: 12, |
| | | }, |
| | | |
| | | emphasis: { |
| | | emphasis: { //饼图中间的字体大小 |
| | | scale: false, |
| | | label: { |
| | | show: true, |
| | | fontSize: 24, |
| | | fontSize: 14, |
| | | fontWeight: "normal", |
| | | }, |
| | | }, |
| | |
| | | scale: false, |
| | | label: { |
| | | show: true, |
| | | fontSize: 24, |
| | | fontSize: 14, //饼图中间的字体大小 |
| | | fontWeight: "normal", |
| | | }, |
| | | }, |
| | |
| | | <template> |
| | | <div class="box-container" style="height: 1.52rem" id="echarts3"></div> |
| | | <div class="box-container echarts3Box" style="height: 1.52rem" id="echarts3"></div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | data: [], |
| | | }, |
| | | grid: { |
| | | left: 13, |
| | | right: 13, |
| | | left: 33, |
| | | right: 33, |
| | | top: 20, |
| | | bottom:5, |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style> |
| | | |
| | | </style> |