【百度echarts】实现圆环进度条-代码示例

最新推荐文章于 2024-03-21 11:11:04 发布

小魏的马仔

最新推荐文章于 2024-03-21 11:11:04 发布

阅读量1.3w

点赞数

分类专栏： web开发文章标签： echarts 进度条

本文链接：https://blog.csdn.net/xuexiiphone/article/details/55099707

版权

web开发专栏收录该内容

48 篇文章 1 订阅

订阅专栏

效果图

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/echarts.js"></script>
    <title>圆环进度条</title>
</head>
<body>
<div id="pie" style="width: 1366px;height:450px;">
</body>
<script type="text/javascript">
        //柱状图
        var asd =document.getElementById('pie');
        var pieChart = echarts.init(asd);
        var labelTop = {//上层样式
            normal : {
                color :'#0099cc',
                label : {
                    show : true,
                    position : 'center',
                    formatter : '{b}',
                    textStyle: {
                        baseline : 'bottom',
                        fontSize:26
                    }
                },
                labelLine : {
                    show : false
                }
            }
        };
        var labelFromatter = {//环内样式
            normal : {//默认样式
                label : {//标签
                    formatter : function (a,b,c){return 100 - c + '%'},
                    // labelLine.length：30,  //线长，从外边缘起计算，可为负值
                    textStyle: {//标签文本样式
                        color:'black',
                        align :'center',
                        baseline : 'top'//垂直对其方式
                    }
                }
            },
        };
        var labelBottom = {//底层样式
            normal : {
                color: '#99ccff',
                label : {
                    show : true,
                    position : 'center',
                    fontSize:22
                },
                labelLine : {
                    show : false
                }
            },
            emphasis: {//悬浮式样式
                color: 'rgba( 0,0,0,0)'
            }
        };
        var radius = [80,122];// 半径[内半径，外半径]

        var pieChartOption = {
            title : {
                text: 'echarts实现圆环进度条',
                subtext: '易唐云网智能科技',
                x:'center',
                //正标题样式
                textStyle: {
                    fontSize:44,
                    fontFamily:'Arial',
                    fontWeight:100,
                    //color:'#1a4eb0',
                },
                //副标题样式
                subtextStyle: {
                    fontSize:28,
                    fontFamily:'Arial',
                    color:"#1a4eb0",
                },
            },
            animation:false,
            tooltip : {         // 提示框. Can be overwrited by series or data
                trigger: 'axis',
                //show: true,   //default true
                showDelay: 0,
                hideDelay: 50,
                transitionDuration:0,
                borderRadius : 8,
                borderWidth: 2,
                padding: 10,    // [5, 10, 15, 20]
            },
            series : [
                {
                    type : 'pie',
                    center : ['50%', '70%'],//圆心坐标（div中的%比例）
                    radius : radius,//半径
                    x: '0%', // for funnel
                    itemStyle : labelTop,//graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏
                    data : [
                        {name:'达成率', value:79,itemStyle : labelTop},
                        {name:'79%', value:21, itemStyle : labelBottom}
                    ]
                }
            ]
        };
        pieChart.setOption(pieChartOption);
</script>
</html>

小魏的马仔

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【百度echarts】实现圆环进度条-代码示例

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="js/echarts.js"></script> <title>圆环进度条</title></head><body><div id="pie" style="width: 1366px;height:450px
复制链接

扫一扫