echarts圆环百分比图示

最新推荐文章于 2024-08-13 18:13:57 发布

maizi19900512

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量1.3w

点赞数 3

分类专栏： echarts

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、效果图
这里写图片描述

二、代码
html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="pieDiagram" class="floatLeft" style="height:400px;width:400px;"></div>
        <script src="js/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="js/echarts/echarts.min.js" type="text/javascript"></script>
        <script src="js/PercentPie.js"></script>
        <script type="text/javascript">
            var option1 = {
                value:20,//百分比,必填
                name:'及格率',//必填
                title:'学习成绩',
                backgroundColor:null,
                color:['#38a8da','#d4effa'],
                fontSize:16,
                domEle:document.getElementById("pieDiagram")//必填
            },percentPie1 = new PercentPie(option1);
            percentPie1.init();
        </script>
    </body>
</html>
   
   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

PercentPie.js

function PercentPie(option){
    this.backgroundColor = option.backgroundColor||'#fff';
    this.color           = option.color||['#38a8da','#d4effa'];
    this.fontSize        = option.fontSize||12;
    this.domEle          = option.domEle;
    this.value           = option.value;
    this.name            = option.name;
    this.title           = option.title;
}

PercentPie.prototype.init = function(){
    var _that = this;
    var option = {
        backgroundColor:_that.backgroundColor,
        color:_that.color,
        title: {
            text: _that.title,
            top:'3%',
            left:'1%',
            textStyle:{
                color: '#333',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 16,
            }
        },
        series: [{
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontSize: _that.fontSize,
                        fontWeight: 'bold'
                    },
                    formatter:'{b}\n{c}%'
                }
            },
            data: [{
                    value: _that.value,
                    name: _that.name,
                    label:{
                        normal:{
                            show:true
                        }
                    }
                 },
                {
                    value: 100-_that.value,
                    name: ''
                }
            ]
        }]
    };

    echarts.init(_that.domEle).setOption(option);
};
   
   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