jquery插件easyPieChart简单饼状图的应用、饼状图更新颜色，带有动画效果

阿晏_

已于 2023-12-07 16:24:34 修改

阅读量983

点赞数

分类专栏： JavaScript 文章标签：前端 jquery

于 2020-10-15 17:33:57 首次发布

本文链接：https://blog.csdn.net/qq_32886245/article/details/109101303

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

jquery.easypiechart.js插件，用来统计新的访问、跳出率、服务器负载、使用的RAM等，带有HTML5的动画效果。

下面是简单版的效果图。
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单饼状图</title>
    <style>
        .easypie-chart-wrapper {
            display: flex;
        }

        .easypie-chart {
            display: inline-block;
            position: relative;
            padding: 0 6px;
            text-align: center;
        }

        .easypie-chart canvas {
            max-width: 100%;
        }

        .easypie-chart .text {
            position: absolute;
            width: 100%;
            top: 47px;
            left: 0;
        }

        .easypie-chart .text p {
            font-size: 24px;
            font-family: DINAlternate-Bold;
            margin: 10px;
        }

        .easypie-chart .text span {
            color: #999999;
        }

    </style>
</head>
<body class="easypie-chart-wrapper">

<div data-easypiechart class="easypie-chart easypie-chart-lg" data-percent="20">
	<!-- 饼状图描述可以放在所绑定渲染的div里 -->
    <div class="text">
        <p>20%</p>
        <span>完成率</span>
    </div>
</div>
<div data-easypiechart class="easypie-chart easypie-chart-lg" data-percent="60">
    <div class="text">
        <p>60%</p>
        <span>完成率</span>
    </div>
</div>
<div data-easypiechart class="easypie-chart easypie-chart-lg" data-percent="90">
    <div class="text">
        <p>90%</p>
        <span>完成率</span>
    </div>
</div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="jquery.easypiechart.js"></script>
<script type="text/javascript">

    function initPie() {
        var options = {
            animate: {
                duration: 800,
                enabled: true
            },
            barColor: "lightgray",
            trackColor: "lightgray",
            scaleColor: false,
            lineWidth: 15,
            lineCap: 'round',
            size: 160
        };
        $('[data-easypiechart]').each(function (item) {
            var percent = $(this).attr("data-percent");
            // 根据数值显示不同的颜色
            var color = "#24c5a4";
            if (percent < 80 && percent >= 60) {
                color = "#ff902b";
            } else if (percent < 60) {
                color = "#f05050";
            }
            options.barColor = color;
            $(this).easyPieChart(options);
        })
    }

    initPie();
    
</script>
</body>
</html>

更新饼状图的颜色

其实，一般情况下用上面的代码就可以实现了，但有时候可能会出现一些更新颜色的需求，那可以试试下面的代码。

// 更新颜色
$('#easypie1').data('easyPieChart').update(percent).options.barColor = color;

插件资源

应该是官方git地址：rendro/easy-pie-chart
本博客所用的：jquery.easypiechart.js

阿晏_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery插件easyPieChart简单饼状图的应用、饼状图更新颜色，带有动画效果

jquery.easypiechart.js插件，用来统计新的访问、跳出率、服务器负载、使用的RAM等，带有HTML5的动画效果。下面是简单版的效果图。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单饼状图</title> <style> .easypie-chart-wrapp
复制链接

扫一扫