echarts圆环百分比图示

最新推荐文章于 2024-05-16 09:46:47 发布

wl_

最新推荐文章于 2024-05-16 09:46:47 发布

阅读量3.3w

点赞数 7

分类专栏：可视化文章标签： echarts pie 百分比进度

本文链接：https://blog.csdn.net/wanglei1991gao/article/details/72461858

版权

可视化专栏收录该内容

19 篇文章 3 订阅

订阅专栏

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

二、代码
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>

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);
};

wl_

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
6
评论
echarts圆环百分比图示

一、效果图二、代码 html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="pieDiagram" class="floatLeft" style="height:400px;wid
复制链接

扫一扫