首页 > 代码库 > Echarts环形进度使用 【1 简单的使用示例】
Echarts环形进度使用 【1 简单的使用示例】
使用中说明几点属性:
hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互
下面会在总结一篇,采用实际开发中的一个示例(稍微复杂点)
根据不同任务状态渲染加载不同环颜色及圈内显示不同文字的实现方式//
//
这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等
function RenderNut(res, UserType) { 2 3 //数据处理 4 var donum = parseFloat(res.TaskProgress); //已完成百分比 5 var data = http://www.mamicode.com/donum + ‘%‘; 6 var rest = 100 - donum; 7 // 基于准备好的dom,初始化echarts图表 8 //此处因为任务有多条-需要对应渲染不同任务的数据统计/所以一次绑定 9 var myChart = echarts.init(document.getElementById(‘rate‘ + res.TaskBatchID)); 10 11 var option = { 12 series: [{ 13 name: ‘访问来源‘, 14 type: ‘pie‘, 15 radius: [‘60%‘, ‘75%‘],//这里是控制环形内半径和外半径 16 avoidLabelOverlap: false, 17 hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互 18 label: { 19 normal: { 20 show: true, 21 position: ‘center‘, 22 textStyle: { 23 fontSize: ‘16‘, 24 fontWeight: ‘bold‘ 25 } 26 } 27 }, 28 data: [{ 29 value: data, 30 name: data 31 }, 32 33 { 34 value: rest, 35 name: ‘‘ 36 } 37 ] 38 }], 39 color: [‘#339900‘, ‘#C9C9C9‘] 40 }; 41 // 为echarts对象加载数据 42 myChart.setOption(option); 43 }
Echarts环形进度使用 【1 简单的使用示例】
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。