html5 canvas圆形资产分布图表代码



163 649 217



特效描述:html5 canvas 圆形资产分布图表,canvas绘制圆形数据分布图表,制作金融贷款行业的个人资产圆形图表代码。

代码结构

1. 引入JS

<script src="donut-chart.min.js"></script>

2. HTML代码

    <div>
        <p>环形图1</p>
        <canvas id="pie_1" width="750" height="600"></canvas>
    </div>
    <div>
        <p>环形图2</p>
        <canvas id="pie_2" width="750" height="600"></canvas>
    </div>
    <div>
        <p>计量图1</p>
        <canvas id="gauge_1" width="750" height="600"></canvas>
    </div>
    <div>
        <p>计量图2</p>
        <canvas id="gauge_2" width="750" height="600"></canvas>
    </div>
    <script>
        var option = {
            type: 'pie', // pie 环形图|| gauge 计量图
            title: {
                show: true,
                text: '总资产(元)',
                textStyle: {
                    fontSize: "20px",
                    lineHeight: "30px",
                    color: '#9f9f9f'
                },
                subtext: '360',
                subtextStyle: {
                    fontSize: "30px",
                    lineHeight: "35px",
                    color: '#e53344'
                },
                x: '10%',
                y: "10%",
            },
            tooltip: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'normal',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: 'white',
                backgroundColor: '#00000099',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "元}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'normal',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    }
                }
            },
            x: "50%",
            y: "50%",
            radius: "30%",
            lineWidth: "5%",
            data: [{
                name: "账户余额(元)",
                value: 110,
            }, {
                name: "散标待回(元)",
                value: 120,
            }, {
                name: "在途资金(元)",
                value: 130,
            }],
            label: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'bold',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: '#9f9f9f',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "元}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    }
                }
            },
            capType: "round",
            selectedStyle: {
                color: "white",
                borderWidth: 10
            },
            color: ["#fe7c00", "#e83227", "#32a676"],
            labelCoverTitle: false,
            backgroundArc: '#999'
        }
        var cir1 = new DonutChart('pie_1', option)
        cir1.init(function (result) {
            console.log(result)
        })
        var option2 = {
            type: 'pie', // pie 环形图|| gauge 计量图
            title: {
                show: true,
                text: '总资产(元)',
                textStyle: {
                    fontSize: "20px",
                    lineHeight: "30px",
                    color: '#9f9f9f'
                },
                subtext: '360',
                subtextStyle: {
                    fontSize: "30px",
                    lineHeight: "35px",
                    color: '#e53344'
                },
                x: '50%',
                y: "50%",
            },
            tooltip: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'normal',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: 'white',
                backgroundColor: '#00000099',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "元}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'normal',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    }
                }
            },
            x: "50%",
            y: "50%",
            radius: "30%",
            lineWidth: "5%",
            data: [{
                name: "账户余额(元)",
                value: 110,
            }, {
                name: "散标待回(元)",
                value: 120,
            }, {
                name: "在途资金(元)",
                value: 130,
            }],
            label: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'bold',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: '#9f9f9f',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "元}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    }
                }
            },
            capType: "round",
            selectedStyle: {
                color: "white",
                borderWidth: 10
            },
            color: ["#fe7c00", "#e83227", "#32a676"],
            labelCoverTitle: true,
            backgroundArc: '#999'
        }
        var cir2 = new DonutChart('pie_2', option2)
        cir2.init(function (result) {
            console.log(result)
        })
        var option3 = {
            type: 'gauge', // pie 环形图|| gauge 计量图
            title: {
                show: true,
                text: '考试时长(分钟)',
                textStyle: {
                    fontSize: "20px",
                    lineHeight: "30px",
                    color: '#9f9f9f'
                },
                subtext: '120',
                subtextStyle: {
                    fontSize: "30px",
                    lineHeight: "35px",
                    color: '#e53344'
                },
                x: '20%',
                y: "10%",
            },
            tooltip: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'normal',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: 'white',
                backgroundColor: '#00000099',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "分钟}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'normal',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    }
                }
            },
            x: "50%",
            y: "50%",
            radius: "30%",
            lineWidth: "5%",
            max: 120, // 映射总值
            data: [{
                name: "已用时长(分钟)",
                value: 85, // 映射计量值
            }],
            label: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'bold',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: '#9f9f9f',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "分钟}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    }
                }
            },
            capType: "round",
            selectedStyle: {
                color: "white",
                borderWidth: 10
            },
            color: ["#fe7c00", "#e83227", "#32a676"],
            labelCoverTitle: false,
            backgroundArc: '#999'
        }
        var cir3 = new DonutChart('gauge_1', option3)
        cir3.init(function (result) {
            console.log(result)
        })
        var option4 = {
            type: 'gauge', // pie 环形图|| gauge 计量图
            title: {
                show: true,
                text: '考试时长(分钟)',
                textStyle: {
                    fontSize: "20px",
                    lineHeight: "30px",
                    color: '#9f9f9f'
                },
                subtext: '120',
                subtextStyle: {
                    fontSize: "30px",
                    lineHeight: "35px",
                    color: '#e53344'
                },
                x: '50%',
                y: "50%",
            },
            tooltip: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'normal',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: 'white',
                backgroundColor: '#00000099',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "分钟}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'normal',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                        color: 'white',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    }
                }
            },
            x: "50%",
            y: "50%",
            radius: "30%",
            lineWidth: "5%",
            max: 120, // 映射总值
            data: [{
                name: "已用时长(分钟)",
                value: 85, // 映射计量值
            }],
            label: {
                show: true,
                fontStyle: "normal",
                fontVariant: "normal",
                fontWeight: 'bold',
                fontSize: "20px",
                lineHeight: "30px",
                fontFamily: 'Arial',
                color: '#9f9f9f',
                formatter: function (param) {
                    var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                        "分钟}"
                    return str
                },
                rich: {
                    a: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    },
                    b: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "30px",
                        lineHeight: "35px",
                        fontFamily: 'Arial',
                        color: '#e53344',
                    },
                    c: {
                        fontStyle: "normal",
                        fontVariant: "normal",
                        fontWeight: 'bold',
                        fontSize: "20px",
                        lineHeight: "30px",
                        fontFamily: 'Arial',
                    }
                }
            },
            capType: "round",
            selectedStyle: {
                color: "white",
                borderWidth: 10
            },
            color: ["#fe7c00", "#e83227", "#32a676"],
            labelCoverTitle: true,
            backgroundArc: '#999'
        }
        var cir4 = new DonutChart('gauge_2', option4)
        cir4.init(function (result) {
            console.log(result)
        })
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 右键菜单 二维码 文字提示框 地图 提示框/弹出层 计算器 layer 计时器 lightbox 桌面 跳转 Tooltip工具提示框 步骤 浮动提示框 键盘 html5弹窗动画 签到 分享 点赞 投票 雪花 打印 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 弹出层拖动 窗口提示框 滑动星星打分 其他更多

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到