Echarts环形进度使用 1【简单的使用示例】

使用中说明几点属性：  
hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互
//
这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等

function RenderNut(res, UserType) {
 2 
 3     //数据处理
 4     var donum = parseFloat(res.TaskProgress); //已完成百分比
 5     var data = 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 }

后面文章中会在总结一篇,采用实际开发中的一个示例（稍微复杂点）

根据不同任务状态渲染加载不同环颜色及圈内显示不同文字的实现方式//

 

转载于:https://www.cnblogs.com/Hizy/p/6692493.html