| | |
| | | <template> |
| | | <div class="comparative_pie" style="width: 100%;height: 600px;display: flex;overflow: scroll"> |
| | | <div id="compAnalPie1" style="flex: 1;"></div> |
| | | <div id="compAnalPie2" style="flex: 1;"></div> |
| | | <div style="display: flex;height: 100%;overflow: auto"> |
| | | <div id="compAnalPie1" style="width:50%;height:600px"></div> |
| | | <div id="compAnalPie2" style="width:50%;height:600px"></div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import * as echarts from 'echarts' |
| | | export default { |
| | | name: 'conparativeAnalysisPie', |
| | | name: 'comparativeAnalysisPie', |
| | | props:{ dataList:''}, |
| | | data(){ |
| | | return{ |
| | |
| | | RateList:[] |
| | | } |
| | | }, |
| | | created(){ |
| | | |
| | | }, |
| | | watch:{ |
| | | dataList(val){ |
| | | this.RateList = val |
| | | console.log(val) |
| | | this.drawTu() |
| | | }, |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.drawTu() |
| | | }, |
| | | methods:{ |
| | | drawTu(){ |
| | | let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'),'macarons'); |
| | | let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'),'macarons'); |
| | | let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'), 'macarons') |
| | | let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'), 'macarons') |
| | | let pieCompChartOption1 = { |
| | | title: { |
| | | x: 'center', |
| | |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: "{a} <br/>{b} : {c} ({d}%)" |
| | | formatter: '{a} <br/>{b} : {c} ({d}%)' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (params) { |
| | | var colorList = ['#4169E1', '#A8A8A8']; |
| | | var colorList = ['#4169E1', '#A8A8A8'] |
| | | return colorList[params.dataIndex] |
| | | }, |
| | | label: { |
| | |
| | | data: [{value: 0, name: '开机率'}, |
| | | {value: 0, name: '关机率'}] |
| | | }] |
| | | }; |
| | | } |
| | | let pieCompChartOption2 = { |
| | | title: { |
| | | x: 'center', |
| | |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: "{a} <br/>{b} : {c} ({d}%)" |
| | | formatter: '{a} <br/>{b} : {c} ({d}%)' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (params) { |
| | | var colorList = ['#00ee00', '#FCCE10', '#A8A8A8']; |
| | | var colorList = ['#00ee00', '#FCCE10', '#A8A8A8'] |
| | | return colorList[params.dataIndex] |
| | | }, |
| | | label: { |
| | |
| | | {value: 0, name: '待机率'}, |
| | | {value: 0, name: '关机率'}] |
| | | }] |
| | | }; |
| | | } |
| | | if(this.RateList != null){ |
| | | this.closeRate =[] |
| | | this.openRate =[] |
| | |
| | | this.openRate=this.RateList[0].openRate |
| | | this.usedRate=this.RateList[0].processRate |
| | | this.waitRate=this.RateList[0].waitRate |
| | | pieCompChartOption1.series[0].data = [{value:(this.openRate * 100).toFixed(2), name:'开机率'},{value:(this.closeRate * 100).toFixed(2), name:'关机率'}]; |
| | | pieCompChartOption2.series[0].data = [{value:(this.usedRate * 100).toFixed(2), name:'加工率'},{value:(this.waitRate * 100).toFixed(2), name:'待机率'},{value:(this.closeRate * 100).toFixed(2), name:'关机率'}]; |
| | | pieCompChart1.setOption(pieCompChartOption1); |
| | | pieCompChart2.setOption(pieCompChartOption2); |
| | | pieCompChartOption1.series[0].data = [{ |
| | | value: (this.openRate * 100).toFixed(2), |
| | | name: '开机率' |
| | | }, { value: (this.closeRate * 100).toFixed(2), name: '关机率' }] |
| | | pieCompChartOption2.series[0].data = [{ |
| | | value: (this.usedRate * 100).toFixed(2), |
| | | name: '加工率' |
| | | }, { value: (this.waitRate * 100).toFixed(2), name: '待机率' }, { |
| | | value: (this.closeRate * 100).toFixed(2), |
| | | name: '关机率' |
| | | }] |
| | | pieCompChart1.setOption(pieCompChartOption1) |
| | | pieCompChart2.setOption(pieCompChartOption2) |
| | | }else{ |
| | | pieCompChart1.setOption(pieCompChartOption1); |
| | | pieCompChart2.setOption(pieCompChartOption2); |
| | | pieCompChart1.setOption(pieCompChartOption1) |
| | | pieCompChart2.setOption(pieCompChartOption2) |
| | | } |
| | | |
| | | }else{ |
| | | pieCompChart1.setOption(pieCompChartOption1); |
| | | pieCompChart2.setOption(pieCompChartOption2); |
| | | pieCompChart1.setOption(pieCompChartOption1) |
| | | pieCompChart2.setOption(pieCompChartOption2) |
| | | } |
| | | |
| | | pieCompChart1.setOption(pieCompChartOption1); |
| | | pieCompChart2.setOption(pieCompChartOption2); |
| | | pieCompChart1.setOption(pieCompChartOption1) |
| | | pieCompChart2.setOption(pieCompChartOption2) |
| | | window.addEventListener('resize', function() { |
| | | pieCompChart1.resize() |
| | | pieCompChart2.resize() |
| | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |