<template>
    <div class="pscChartBox">
        <div id="pscChart" style="width:100%;height:400px"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            notebookList:[
                {projectName:"张江双创", count:9},
                {projectName:"张江双创二期", count:10},
                {projectName:"徐汇教育局", count:12},
                {projectName:"徐汇二期", count:3},
                {projectName:"深圳艺校三期", count:6},
                {projectName:"深圳艺校四期", count:0},
            ]
        }
    },
    components: { },
    mounted:function(){
        this.initPscChart();
    },
    methods:{
        initPscChart:function() {
            let myChart = echarts.init(document.getElementById('pscChart'));
            let gaugeData = [
                
                 {
                    value: 20,
                    name: '张江双创',
                    title: {
                    offsetCenter: ['0%', '-60%']
                    },
                    detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '-45%']
                    }
                },
                {
                    value: 40,
                    name: '徐汇教育局',
                    title: {
                    offsetCenter: ['0%', '-15%']
                    },
                    detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '0%']
                    }
                },
                {
                    value: 60,
                    name: '山鹰',
                    title: {
                    offsetCenter: ['0%', '30%']
                    },
                    detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '45%']
                    }
                }
            ];

            let option = {
                series: [
                    {
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                        borderWidth: 1,
                        borderColor: '#464646'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 20
                        }
                    },
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 50
                    },
                    data: gaugeData,
                    title: {
                        fontSize: 14
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 14,
                        color: 'auto',
                        borderColor: 'auto',
                        borderRadius: 20,
                        borderWidth: 1,
                        formatter: function(value) {
                        if (value == 20 ) return "核对需求"
                        else if (value == 40) return "设计中"
                        else if (value == 60) return "开发中"
                        }
                    },
                    center:["50%","50%"],
                    radius: "95%"
                    }
                ]
            };

            myChart.setOption(option);

        }
    }    
}
</script>

<style>
.pscChartBox {
    width: 100%;
    height: 400px;
}
</style>