jiazx0107
2025-11-18 b0bf6e809ec4990ca8e3de95456c90860e49e2a5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
$(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)
 
});