echart2.0环形图-中间显示进度数据和标题

最新推荐文章于 2024-06-23 13:00:46 发布

低_调_哥

最新推荐文章于 2024-06-23 13:00:46 发布

阅读量1.3w

点赞数

分类专栏：前端-echart 前端

本文链接：https://blog.csdn.net/caiyongshengCSDN/article/details/79095257

版权

前端同时被 2 个专栏收录

76 篇文章 1 订阅

订阅专栏

前端-echart

8 篇文章 0 订阅

订阅专栏

1.html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="indexChart" class="chart-content" style="height: 200px;"></div>

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="echarts-2.2.7/build/dist/echarts.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

2.index.js

(function(){
    // 路径配置
    require.config({
        paths: {
            echarts: 'echarts-2.2.7/build/dist'
        }
    });

    require(
        [
            'echarts',
            'echarts/chart/pie'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var indexChart = ec.init(document.getElementById('indexChart'));

            //当前申请人员统计环形图
            var allValue = 158;
            //标示文字
            var labelTop = {
                normal : {
                    label : {
                        show : false,
                        position : 'center',
                        formatter : '{b}',
                        textStyle: {
                            baseline : 'bottom',  //垂直对齐方式
                            fontSize:12,
                            color:'#666',
                            align : 'center'  //水平对齐方式
                        }
                    },
                    color:'#de4751',
                    labelLine : {  //标示线
                        show : false
                    }
                }
            };
            //百分比设置
            var labelFromatter = {
                normal : {
                    label : {
                        formatter : function (params){
                            return 100 - params.value + '/' + allValue
                        },
                        textStyle: {
                            baseline : 'middle',  //垂直对齐方式
                            fontSize:27,
                            color:'#666',
                            align : 'center'   //水平对齐方式
                        }
                    }
                }
            };
            //数据位置
            var labelBottom = {
                normal : {
                    color: '#ccc',
                    label : {
                        show : true,
                        position : 'center'
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis: {
                    color: 'rgba(0,0,0,0)'
                }
            };
            //环形图
            option = {
                title: {
                    text: '待批人员/全部人员',
                    // subtext: '申请明细 >',
                    // sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh',
                    x: 'center',
                    y: '60',
                    itemGap: 50,
                    textStyle : {
                        color : '#666',
                        fontSize : 12,
                        fontWeight : 'normal'
                    },
                    subtextStyle : {
                        color : '#de4751',
                        fontSize : 12
                    }
                },
                series : [
                    {
                        type : 'pie',
                        center : ['50%', '50%'],
                        radius: ['78%', '85%'],
                        // x: '0%', // for funnel
                        itemStyle : labelFromatter,
                        data : [
                            {name:'other', value:30, itemStyle : labelBottom},
                            {name:'人员', value:70,itemStyle : labelTop}
                        ]
                    }
                ]
            };


            // 为echarts对象加载数据
            indexChart.setOption(option);


            // 自适应echarts
            setTimeout(function (){
                $(window).resize(function () {
                    indexChart.resize();
                });
            },200);
        }
    );
})();

附图;

低_调_哥

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
echart2.0环形图-中间显示进度数据和标题

1.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &l
复制链接

扫一扫

专栏目录