接上一篇中记录Echarts进度环使用【不同状态不同进度环颜色及圈内文字】--采用单实例业务进行说明

接上一篇中记录Echarts进度环使用

此处处理不同状态下不同进度环颜色及圈内文字等的相关处理,采用实际案例源码说明

-----------------偶是华丽丽分割线---------------------------------------------------

形如实现这样-等等的效果 示例如图：

业务上此处拿一个有期限任务实例举例说明

业务简要说明：

【任务按时间 可分为 未开始--进行中--已结束 3大状态//其中已开始任务中任务状态又需要根据完成情况（提交与否）显示对应圈内文字】

核心地方如图已标出

接下来我们可以自定义这两处加入业务判断处理，从而实现不同状态下 展示不同 环形颜色文字等颜色等

//

///接下来贴出 简单实例的相关demo

说明：代码中部分业务数据未给出；

主要说明下实现方式

 //渲染环形进度条
 function RenderNut(startnum, listlength) {
     // 路径配置
     require.config({
         paths: {
             echarts: '../../Common/echarts/build/dist'
         }
     });

     // 使用
     require(
         [
         'echarts',
             'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
             ],
             function (ec) {

             //
             var labelTop0 = {//作答中，颜色为green
                 normal: {
                     color: 'green',
                     label: {
                         show: true,//标签是否显示
                         position: 'center',//饼图可选为：'outer'（外部） | 'inner'（内部）/饼图可选为：'outer'（外部） | 'inner'（内部）
                         formatter: '{b}',//饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）
                         textStyle: {
                             baseline: 'bottom',
                             color: 'green'
                         }
                     },
                     labelLine: {
                         show: false
                     }
                 }
             };
             var labelTop1 = {//已提交，颜色为#fb8800
                 normal: {
                     color: '#fb8800',
                     label: {
                         show: true,
                         position: 'center',
                         formatter: '{b}',
                         textStyle: {
                             baseline: 'bottom',
                             color: '#fb8800'
                         }
                     },
                     labelLine: {
                         show: false
                     }
                 }
             };
             var labelTop2 = {//未开始/已结束状态下，颜色为gray
                 normal: {
                     color: 'gray',
                     label: {
                         show: true,//标签是否显示
                         position: 'center',
                         formatter: '{b}',
                         textStyle: {
                             baseline: 'bottom',
                             color: 'Gray'
                         }
                     },
                     labelLine: {
                         show: false
                     }
                 }
             };
             //---------------------------------------------------
             var labelFromatter0 = { //XXX状态下，颜色为绿色
                 normal: {
                     label: {
                         //函数中会读取 option中 data中数据进行计算
                         formatter: function (params) {
                             return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
                         },
                         textStyle: {
                             baseline: 'top',
                             color: 'green'
                         }
                     }
                 }
             };
             var labelFromatter1 = {//XX状态下，颜色为#fb8800
                 normal: {
                     label: {
                         formatter: function (params) {
                             return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
                         },
                         textStyle: {
                             baseline: 'top',
                             color: '#FB8800'
                         }
                     }
                 }
             };
             var labelFromatter2 = {//XX状态下，颜色为gray
                 normal: {
                     label: {
                         formatter: function (params) {
                             return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
                         },
                         textStyle: {
                             baseline: 'top',
                             color: 'Gray'
                         }
                     }
                 }
             };
             var labelBottom = {
                 normal: {
                     color: '#ccc',
                     label: {
                         show: true,
                         position: 'center'
                     },
                     labelLine: {
                         show: false
                     }
                 },
                 emphasis: {
                     color: 'rgba(0,0,0,0)'
                 }
             };
             // 基于准备好的dom，初始化echarts图表
             // for (var i = startnum; i < listlength; i++) {
             // 可以是一个或者多个--根据实际应用动态绑定ID
             var myChart = ec.init(document.getElementById("Html中给定的Dom节点ID");

                 // 从接口读出的 任务属性数据
                 // 任务期限【开始时间 startTime //结束时间 endTime // 服务器当前时间: TimeNow】
                 // 任务完成状态【提交标志 submitFlag】此处submitFlag 1为已提交（具体业务按实际处理）
                 // 此处测试需要 可给的假数据 

                 var numarr = new Array();//用于存放 进度环展示数据【numarr[0]分子代表已完成XX//numarr[1]分母 代表总数】

                 //根据按作业期限分类处理
                 if (Math.round((new Date(startTime || '').getTime()) / 1000) - Math.round((new Date(TimeNow).getTime()) / 1000) > 0) {
                     //未开始作业,颜色变为灰色
                     numarr[0] = 0;
                     numarr[1] = totalnum;
                     showname = "未开始";
                     labelTop = labelTop2;
                     labelFromatter = labelFromatter2;
                 }
                 else if (Math.round((new Date(endTime || '').getTime()) / 1000) - Math.round((new Date(TimeNow).getTime()) / 1000) <= 0) {
                     //已结束作业显示进度环/灰色
                         if (submitFlag == 1) {//已提交
                             numarr[0] = donum;
                             numarr[1] = totalnum;
                             showname = "已提交";
                         }
                         else {
                             numarr[0] = donum;
                             numarr[1] = totalnum;
                             showname = "已作答";
                         }
                     }
                     labelTop = labelTop2;
                     labelFromatter = labelFromatter2;
                 }
                 else {
                     //期限内根据提交状态
                         if (submitFlag == 1) {//已提交
                             numarr[0] = donum;
                             numarr[1] = totalnum;
                             showname = "已提交";
                             labelTop = labelTop1;
                             labelFromatter = labelFromatter1;
                         }
                         else {
                             numarr[0] = donum;
                             numarr[1] = totalnum;
                             showname = "已作答";
                             labelFromatter = labelFromatter0;
                             labelTop = labelTop0;
                         }

                 }
                 var option = {
                     tooltip: {
                         show: false
                     },
                     series: [
                     {
                         "center": ['50%', '50%'],
                         "type": "pie",
                         "radius": [40, 45],
                         "itemStyle": labelFromatter,
                             "clockWise": true,//是否顺时针
                             "selectedMode": null,//选中模式，默认关闭，可选single，multiple
                             "data": [
                             {
                                 name: showname, value: parseInt(numarr[0]), itemStyle: labelTop
                             },
                             { name: '未作答', value: parseInt(numarr[1]) - parseInt(numarr[0]), itemStyle: labelBottom }
                             ]
                         }
                         ]
                     };
                 // 为echarts对象加载数据
                 myChart.setOption(option);
             // }
         }
         );
 }