Echarts環形進度使用2 -接上一篇中記錄Echarts進度環使用【不一樣狀態不一樣進度環顏色及圈內文字】

接上一篇中記錄Echarts進度環使用

此到處理不一樣狀態下不一樣進度環顏色及圈內文字等的相關處理,採用實際案例源碼說明

-----------------偶是華麗麗分割線---------------------------------------------------

 形如實現這樣-等等的效果 示例如圖：

 

業務上此處拿一個有期限任務實例舉例說明

業務簡要說明：

【任務按時間 可分爲 未開始--進行中--已結束 3大狀態//其中已開始任務中任務狀態又須要根據完成狀況（提交與否）顯示對應圈內文字】

 

核心地方如圖已標出

接下來咱們能夠自定義這兩處加入業務判斷處理，從而實現不一樣狀態下 展現不一樣 環形顏色文字等顏色等

//

///接下來貼出 簡單實例的相關demo

 

說明：代碼中部分業務數據未給出；

主要說明下實現方式

  1 //渲染環形進度條
  2 function RenderNut(startnum, listlength) {
  3     // 路徑配置
  4     require.config({
  5         paths: {
  6             echarts: '../../Common/echarts/build/dist'
  7         }
  8     });
  9 
 10     // 使用
 11     require(
 12         [
 13         'echarts',
 14             'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
 15             ],
 16             function (ec) {
 17 
 18             //
 19             var labelTop0 = {//做答中，顏色爲green
 20                 normal: {
 21                     color: 'green',
 22                     label: {
 23                         show: true,//標籤是否顯示
 24                         position: 'center',//餅圖可選爲：'outer'（外部） | 'inner'（內部）/餅圖可選爲：'outer'（外部） | 'inner'（內部）
 25                         formatter: '{b}',//餅圖、雷達圖、儀表盤、漏斗圖: a（系列名稱），b（數據項名稱），c（數值）, d（餅圖：百分比 | 雷達圖：指標名稱）
 26                         textStyle: {
 27                             baseline: 'bottom',
 28                             color: 'green'
 29                         }
 30                     },
 31                     labelLine: {
 32                         show: false
 33                     }
 34                 }
 35             };
 36             var labelTop1 = {//已提交，顏色爲#fb8800
 37                 normal: {
 38                     color: '#fb8800',
 39                     label: {
 40                         show: true,
 41                         position: 'center',
 42                         formatter: '{b}',
 43                         textStyle: {
 44                             baseline: 'bottom',
 45                             color: '#fb8800'
 46                         }
 47                     },
 48                     labelLine: {
 49                         show: false
 50                     }
 51                 }
 52             };
 53             var labelTop2 = {//未開始/已結束狀態下，顏色爲gray
 54                 normal: {
 55                     color: 'gray',
 56                     label: {
 57                         show: true,//標籤是否顯示
 58                         position: 'center',
 59                         formatter: '{b}',
 60                         textStyle: {
 61                             baseline: 'bottom',
 62                             color: 'Gray'
 63                         }
 64                     },
 65                     labelLine: {
 66                         show: false
 67                     }
 68                 }
 69             };
 70             //---------------------------------------------------
 71             var labelFromatter0 = { //XXX狀態下，顏色爲綠色
 72                 normal: {
 73                     label: {
 74                         //函數中會讀取 option中 data中數據進行計算
 75                         formatter: function (params) {
 76                             return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
 77                         },
 78                         textStyle: {
 79                             baseline: 'top',
 80                             color: 'green'
 81                         }
 82                     }
 83                 }
 84             };
 85             var labelFromatter1 = {//XX狀態下，顏色爲#fb8800
 86                 normal: {
 87                     label: {
 88                         formatter: function (params) {
 89                             return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
 90                         },
 91                         textStyle: {
 92                             baseline: 'top',
 93                             color: '#FB8800'
 94                         }
 95                     }
 96                 }
 97             };
 98             var labelFromatter2 = {//XX狀態下，顏色爲gray
 99                 normal: {
100                     label: {
101                         formatter: function (params) {
102                             return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
103                         },
104                         textStyle: {
105                             baseline: 'top',
106                             color: 'Gray'
107                         }
108                     }
109                 }
110             };
111             var labelBottom = {
112                 normal: {
113                     color: '#ccc',
114                     label: {
115                         show: true,
116                         position: 'center'
117                     },
118                     labelLine: {
119                         show: false
120                     }
121                 },
122                 emphasis: {
123                     color: 'rgba(0,0,0,0)'
124                 }
125             };
126             // 基於準備好的dom，初始化echarts圖表
127             // for (var i = startnum; i < listlength; i++) {
128             // 能夠是一個或者多個--根據實際應用動態綁定ID
129             var myChart = ec.init(document.getElementById("Html中給定的Dom節點ID");
130 
131                 // 從接口讀出的 任務屬性數據
132                 // 任務期限【開始時間 startTime //結束時間 endTime // 服務器當前時間: TimeNow】
133                 // 任務完成狀態【提交標誌 submitFlag】此處submitFlag 1爲已提交（具體業務按實際處理）
134                 // 此處測試須要 可給的假數據 
135                 
136                 var numarr = new Array();//用於存放 進度環展現數據【numarr[0]分子表明已完成XX//numarr[1]分母 表明總數】
137 
138                 //根據按做業期限分類處理
139                 if (Math.round((new Date(startTime || '').getTime()) / 1000) - Math.round((new Date(TimeNow).getTime()) / 1000) > 0) {
140                     //未開始做業,顏色變爲灰色
141                     numarr[0] = 0;
142                     numarr[1] = totalnum;
143                     showname = "未開始";
144                     labelTop = labelTop2;
145                     labelFromatter = labelFromatter2;
146                 }
147                 else if (Math.round((new Date(endTime || '').getTime()) / 1000) - Math.round((new Date(TimeNow).getTime()) / 1000) <= 0) {
148                     //已結束做業顯示進度環/灰色
149                         if (submitFlag == 1) {//已提交
150                             numarr[0] = donum;
151                             numarr[1] = totalnum;
152                             showname = "已提交";
153                         }
154                         else {
155                             numarr[0] = donum;
156                             numarr[1] = totalnum;
157                             showname = "已做答";
158                         }
159                     }
160                     labelTop = labelTop2;
161                     labelFromatter = labelFromatter2;
162                 }
163                 else {
164                     //期限內根據提交狀態
165                         if (submitFlag == 1) {//已提交
166                             numarr[0] = donum;
167                             numarr[1] = totalnum;
168                             showname = "已提交";
169                             labelTop = labelTop1;
170                             labelFromatter = labelFromatter1;
171                         }
172                         else {
173                             numarr[0] = donum;
174                             numarr[1] = totalnum;
175                             showname = "已做答";
176                             labelFromatter = labelFromatter0;
177                             labelTop = labelTop0;
178                         }
179                   
180                 }
181                 var option = {
182                     tooltip: {
183                         show: false
184                     },
185                     series: [
186                     {
187                         "center": ['50%', '50%'],
188                         "type": "pie",
189                         "radius": [40, 45],
190                         "itemStyle": labelFromatter,
191                             "clockWise": true,//是否順時針
192                             "selectedMode": null,//選中模式，默認關閉，可選single，multiple
193                             "data": [
194                             {
195                                 name: showname, value: parseInt(numarr[0]), itemStyle: labelTop
196                             },
197                             { name: '未做答', value: parseInt(numarr[1]) - parseInt(numarr[0]), itemStyle: labelBottom }
198                             ]
199                         }
200                         ]
201                     };
202                 // 爲echarts對象加載數據 
203                 myChart.setOption(option);
204             // }
205         }
206         );
207 }