Echarts图表饼图中间带文字解决某个值过小导致扇区太小影响交互

最新推荐文章于 2024-08-16 18:21:02 发布

郭浩326

最新推荐文章于 2024-08-16 18:21:02 发布

阅读量9.4k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/guohao326/article/details/74942311

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        .chart{
            border: 1px solid #f56868;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="chart"></div>
</body>
<script>
    $(function () {
        var people={
            num:10,
            num2:3,
            num3:7,
        };
        /*第一种 javascript 选择器
         *document.getElementsByClassName("chart")[0]
         * 必须加  [0]  标
         */
        /*第二种 jQuery 选择器
         *$(".chart")[0]
         * 必须加  [0]  标
         */

//        var echarts_1 = echarts.init($(".chart")[0]);
        var echarts_1 = echarts.init(document.getElementsByClassName("chart")[0]);

        echarts_1.setOption(option = {
            title: {
//                text: people.num2+'%',
                /*原始方法未进行判断
                * 
                * 推荐下面进行三目运算判断，
                * 在people.num的值为0的时候，
                * 饼图中间数据不会显示NAN
                **/
                text: people.num==0 ? '0%': Math.ceil(people.num2*100/people.num)+'%',
                // subtext: '12月',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 15
                }
            },
            backgroundColor: "#fff",
            color:["#1bb856","#dddddd"],
            tooltip: {
                trigger: 'item',
                formatter: function(params, ticket, callback) {
                    var res = params.seriesName;
                    res += '<br/>' + params.name + ' : ' + params.value + '人' + '';
                    return res;
                }
            },
            selectedOffset:5,
            /* 可以需要的时候放开*/
//             legend: {
//                 orient: 'vertical',
//                 right: '0%',
//                 bottom: '0%',
//                 data: ['已完成', '未完成'],
//                 itemWidth: 30,
//                 itemHeight: 10
//             },
            series: [{
                name: '总人数'+ ' : '+ people.num + '人',
                type: 'pie',
//                minAngle:40,  /*最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互*/
                selectedMode: 'single',
                radius: ['65%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: "{b}{c}人"

                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [{
                    value: people.num2,
                    name: '已完成'
                }, {
                    value: people.num3,
                    name: '未完成'
                }],
                labelLine: {
                    normal: {
                        show: true,
                        length:5,
                        length2:10
                    }
                }

            }]
        });
    })
</script>
</html>