<template>
    <div class="DPcomputer8Box">

    </div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import 'echarts-liquidfill'; // 引入水球图的组件


export default {
    data(){
        return {
            DPcomputer8BoxTimer:null,

        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            
        },
        //矿石开采效率
        initLiquidEchart1(){
			echarts.init(document.getElementById('liquidEchart1')).dispose();
			setTimeout(() => {
				this.chartsLiquid = echarts.init(document.getElementById('liquidEchart1'));
				// 把配置和数据放这里
				this.chartsLiquid.setOption({
					series: [{
						type: 'liquidFill',
                        name: '比率\n' + this.exploitationEfficiencyData.rate1 * 100 + '%',
						radius: '70px',
						data: this.exploitationEfficiencyData.rate1,
						label: {
							normal: {
                                formatter: '{a}',
								color: '#05ADFB',
								insideColor: '#fff',
								textStyle: {
									fontSize: 18,
								}
							}
						},
						backgroundStyle: {
							color: '#012861',
							borderWidth: "1.5", // 内边框
							borderColor: "rgb(6, 190, 250)"
						},
						color: [{
							type: 'linear',
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 1,
								color: ["rgb(6, 190, 250)"], // 0% 处的颜色
							}, {
								offset: 0,
								color: ["rgb(6, 190, 250)"], // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}],
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderColor: '#012861',
								borderWidth: 5,
								shadowBlur: 5,
								shadowColor: 'rgb(6, 190, 250)'
							}, 
						}
					}]
				});
			}, 50)
		},
        initLiquidEchart2(){
			echarts.init(document.getElementById('liquidEchart2')).dispose();
			setTimeout(() => {
				this.chartsLiquid = echarts.init(document.getElementById('liquidEchart2'));
				// 把配置和数据放这里
				this.chartsLiquid.setOption({
					series: [{
						type: 'liquidFill',
                        name: '比率\n' + this.exploitationEfficiencyData.rate2 * 100 + '%',
						radius: '70px',
						data: this.exploitationEfficiencyData.rate2,
						label: {
							normal: {
                                formatter: '{a}',
								color: 'rgb(3, 254, 254)',
								insideColor: '#fff',
								textStyle: {
									fontSize: 18,
								}
							}
						},
						backgroundStyle: {
							color: '#012861',
							borderWidth: "1.5", // 内边框
							borderColor: "rgb(3, 254, 254)"
						},
						color: [{
							type: 'linear',
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 1,
								color: ["rgb(3, 254, 254)"], // 0% 处的颜色
							}, {
								offset: 0,
								color: ["rgb(3, 254, 254)"], // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}],
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderColor: '#012861',
								borderWidth: 5,
								shadowBlur: 5,
								shadowColor: 'rgb(3, 254, 254)'
							}, 
						}
					}]
				});
			}, 50)
		},
    },
    beforeDestroy(){
        if(this.DPcomputer8BoxTimer) {
			clearInterval(this.DPcomputer8BoxTimer);
            this.DPcomputer8BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer8Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
</style>