Echarts环形进度使用2 接上一篇中记录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);
            // }
        }
        );
}