$(document).ready(function () {
    // 选项卡 鼠标点击
    $(".TAB_CLICK li").click(function () {
        var tab = $(this).parent(".TAB_CLICK");
        var con = tab.attr("id");
        var on = tab.find("li").index(this);
        $(this).addClass('on').siblings(tab.find("li")).removeClass('on');
        $(con).eq(on).show().siblings(con).hide();
    });
    $('.TAB_CLICK').each(function (index, el) {
        if ($(this).find('li.on').length) {
            $(this).find("li.on").trigger('click');
        } else {
            $(this).find("li").filter(':first').trigger('click');
        }
    });
    function initLineEchart(id, Data) {
        var echart = null
        var dom = document.getElementById(id);
        echart = echarts.init(dom);
        var option = {
            //你的代码
            title: [
                {
                    subtext: (Data / 100 * 100).toFixed(0) + '%',
                    subtextStyle: {
                        color: '#021d46',
                        fontSize: '16px',
                        fontWeight: '600',
                        margin: 0,
                        padding: 0
                    },
                    itemGap: 3,
                    top: "center",
                    left: 'center'
                }
            ],
            series: {
                name: '',
                type: 'pie',
                radius: ['75%', '100%'],
                center: ['50%', '50%'],
                silent: true,
                clockwise: true,
                startAngle: 90,
                label: {
                    show: false,
                },
                data: [
                    {
                        value: Data,
                        itemStyle: {
                            normal: {
                                color: '#2bb669'
                            }
                        }
                    },
                    {
                        value: 100 - Data,
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            // 圆环底色
                            normal: {
                                color: 'rgba(43, 182, 105, .1)'
                            }
                        }
                    }
                ]
            },
        };
        if (option && typeof option === "object") {
            echart.setOption(option, true);
        }
    }

    function initLineEchart2(id, Data) {
        var echart = null;
        var dom = document.getElementById(id);
        echart = echarts.init(dom);
        var option = {
            tooltip: {
                trigger: 'item',
                backgroundColor: '#fff',
                borderWidth: 1, 
                borderColor: '#ddd', 
                textStyle: {
                    color: '#333', 
                    fontSize: 14
                },
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                bottom: 10,
                left: "center",
                icon: "roundRect",
                itemWidth: 16,
                itemHeight: 16,
                textStyle: {
                    fontSize: 16,
                    color: '#353d61',
                    fontWeight: '600',
                },
            },
            series: {
                name: '',
                type: 'pie',
                radius: ['47%', '67%'],
                center: ['50%', '50%'],
                silent: true,
                clockwise: false,
                startAngle: 90,
                itemStyle: {
                    borderWidth: 4, 
                    borderColor: '#fff', 
                    borderType: 'solid'
                },
                label: {
                    show: false,
                },
                data: Data
            },
        };
        
        if (option && typeof option === "object") {
            echart.setOption(option, true);
        }
    }
    var piedata = 75;
    var piedata2 = [
        { value: 87, name: "已建档案 87%", itemStyle: { color: "#00a051" } },
        { value: 13, name: "未建档案 17%", itemStyle: { color: "#fe8b4c" } },
     ];
    initLineEchart('pieChartl1', piedata)
    initLineEchart2('pieChartl2', piedata2)

});