echarts仿支付宝芝麻信用分环形图

效果图

配置

// 支付宝芝麻信用环形图const options = {graphic: [ //为环形图中间添加文字{type: "text",left: "center",top: "48%",style: {text: '得分',textAlign: "center",fill: "#999999",fontSize: 16,},},{type: "text",left: "center",top: "52%",style: {text: "60",textAlign: "center",fill: "#000",fontSize: 28,},},],series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],center: ['50%', '50%'],// adjust the start anglestartAngle: 220,silent: true,label: {show: true,position: 'inside',formatter(param) {// correct the percentagereturn param.name + ' (' + param.percent * 2 + '%)';}},data: [{value: 60,name: 'Search Engine',itemStyle: {color: '#FFE2DC',},label: {show: false}},{value: 40,name: 'Search Engine',itemStyle: {color: '#f1f1f1',},label: {show: false}},{value: 2,name: 'Search Engine',itemStyle: {color: '#fff',},label: {show: false}},{// make an record to fill the bottom 50%value: 36,name: 'A',itemStyle: {// stop the chart from rendering this piececolor: '#f1f1f1',borderColor: '#fff',borderCap: 'square',decal: {symbol: 'none'}},label: {show: true,fontSize: 32,position: 'inside',formatter(param) {// correct the percentagereturn param.name;}}},{value: 2,name: 'Search Engine',itemStyle: {color: '#fff',},label: {show: false}},]},]
};

通过上边配置

data中前2条value总和100，第一条value实际进度，第二条value为剩余进度

echarts仿支付宝芝麻信用分环形图相关推荐

支付宝 android ui,Android 仿支付宝芝麻信用分仪表盘效果 CreditSesameRingView
软件介绍自定义View之仿支付宝芝麻信用分仪表盘效果,喜欢的话,请给个star,谢谢. 使用添加项目依赖Add it in your root build.gradle at the end of ...
Android 仿芝麻信用进度条,自定义View仿支付宝芝麻信用分仪表盘效果
image 前言灵感来自几天前看到一位作者的仿芝麻信用自定义View的文章很不错,所以我换了一种方式来进行实现,写了旧版和新版芝麻信用分仪表盘的效果. 截图这是我做的效果,还是有点差距的,嘿嘿. ...
android 自定义中文加盘,Android自定义View仿支付宝芝麻信用分仪表盘
先看下iOS的芝麻信用分截图这是我做的效果,还是有点差距的支付宝9.9版本芝麻信用分的实现首先初始化各种画笔,默认的size,padding,小圆点. (因为实在找不到原版芝麻信用的带点模糊效果 ...
自定义View仿支付宝芝麻信用分仪表盘效果
前言灵感来自几天前看到一位作者的仿芝麻信用自定义View的文章很不错,所以我换了一种方式来进行实现,写了旧版和新版芝麻信用分仪表盘的效果. Github地址: https://github.com/ ...
自定义xy组 android,Android自定义view之仿支付宝芝麻信用仪表盘示例
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码接着在构造方法里初始化自定义属性和画笔: private void initAttr(At ...
iOS仿支付宝芝麻信用仪表盘效果
概述自定义View之高仿支付宝芝麻信用分数仪表盘动画效果详细代码下载:http://www.demodashi.com/demo/10654.html 仿支付宝芝麻信用仪表盘效果一.主要思路 ...
Android自定义view之仿支付宝芝麻信用仪表盘 ---by ccy
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding=&qu ...
[置顶] Android自定义控件芝麻信用分雷达图
[置顶] Android自定义控件芝麻信用分雷达图标签: android自定义雷达芝麻信用 2016-10-23 20:11 3548人阅读评论(24) 收藏举报分类: 自定义控 ...
为什么你的支付宝芝麻信用分就是不涨？
支付宝芝麻信用分越来越重要,应用场景越来越多,免押租物.信用购.办理证件手续.信用金融等. 芝麻信用分的高低,有时能直接影响你能否享受某些特权,还是比较重要的. 有的同学比较疑惑,为什么一直在守约,但 ...

echarts仿支付宝芝麻信用分环形图

效果图

配置

echarts仿支付宝芝麻信用分环形图相关推荐

最新文章

热门文章