xhj/vue_mdc_xhj.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,153 @@
			<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>
			</template>

			<script>
			import * as echarts from 'echarts'
			export default {
			name: 'conparativeAnalysisPie',
			props:{ dataList:''},
			data(){
			return{
			closeRate:0,
			openRate:0,
			usedRate:0,
			waitRate:0,
			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 pieCompChartOption1 = {
			title: {
			x: 'center',
			subtext: 'å¼æºæç'
			},
			tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
			orient: 'vertical',
			x: 'left',
			y: 'bottom',
			data: ['å¼æºç', 'å³æºç']
			},
			calculable: true,
			series: [{
			name: 'å¼æºæç',
			type: 'pie',
			radius: '70%',
			center: ['55%', '55%'],
			itemStyle: {
			normal: {
			color: function (params) {
			var colorList = ['#4169E1', '#A8A8A8'];
			return colorList[params.dataIndex]
			},
			label: {
			show: true,
			position: 'top',
			formatter: '{b}\n{c}'
			}
			}
			},
			data: [{value: 0, name: 'å¼æºç'},
			{value: 0, name: 'å³æºç'}]
			}]
			};
			let pieCompChartOption2 = {
			title: {
			x: 'center',
			subtext: 'è¿è¡æç'
			},
			tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
			orient: 'vertical',
			x: 'left',
			y: 'bottom',
			data: ['å å·¥ç', 'å¾æºç', 'å³æºç']
			},
			calculable: true,
			series: [{
			name: 'è¿è¡æç',
			type: 'pie',
			radius: '70%',
			center: ['55%', '55%'],
			itemStyle: {
			normal: {
			color: function (params) {
			var colorList = ['#00ee00', '#FCCE10', '#A8A8A8'];
			return colorList[params.dataIndex]
			},
			label: {
			show: true,
			position: 'top',
			formatter: '{b}\n{c}'
			}
			}
			},
			data: [{value: 0, name: 'å å·¥ç'},
			{value: 0, name: 'å¾æºç'},
			{value: 0, name: 'å³æºç'}]
			}]
			};
			if(this.RateList != null){
			this.closeRate =[]
			this.openRate =[]
			this.usedRate = []
			this.waitRate = []
			if(this.RateList.length>0){
			this.closeRate=this.RateList[0].closeRate
			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);
			}else{
			pieCompChart1.setOption(pieCompChartOption1);
			pieCompChart2.setOption(pieCompChartOption2);
			}

			}else{
			pieCompChart1.setOption(pieCompChartOption1);
			pieCompChart2.setOption(pieCompChartOption2);
			}

			pieCompChart1.setOption(pieCompChartOption1);
			pieCompChart2.setOption(pieCompChartOption2);
			window.addEventListener('resize', function() {
			pieCompChart1.resize()
			pieCompChart2.resize()
			})
			}
			}
			}
			</script>

			<style scoped>

			</style>