1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
业务数据33
分组34
35
36
37
38
39
华南40
华北41
华东42
中西43
44
45
分组一46
分组一47
分组一48
分组一49
分组一50
分组一51
分组一52
分组一53
分组一54
分组一55
56
57
58
59
60
金华区0161
台州区62
皖南区63
金华区64
台州区65
皖南区66
金华区67
台州区68
皖南区69
金华区70
台州区71
皖南区72
金华区73
台州区74
皖南区75
金华区76
台州区77
皖南区78
金华区79
台州区80
皖南区81
金华区82
台州区83
皖南区84
85
86
海南区0187
潮汕区88
赣南区89
赣北区90
海南区91
潮汕区92
赣南区93
赣北区94
海南区95
潮汕区96
赣南区97
赣北区98
海南区99
潮汕区100
赣南区101
赣北区102
海南区103
潮汕区104
赣南区105
赣北区106
107
108
山西区01109
冀州区110
黑龙江区111
济南区112
海南区113
潮汕区114
赣南区115
赣北区116
海南区117
潮汕区118
赣南区119
赣北区120
海南区121
潮汕区122
赣南区123
赣北区124
125
126
湘南区01127
豫北区128
陕西区129
宁夏区130
海南区131
潮汕区132
赣南区133
赣北区134
海南区135
潮汕区136
赣南区137
赣北区138
海南区139
潮汕区140
赣南区141
赣北区142
143
144
145
146
147
148
149
161
162
163
164
165
今日情況
166
167
168
今日收入
169
2560万
170
年度峰值：3560万 3月5日
171
172
173
今日运单总重量
174
2560T
175
年度峰值：3560T 3月5日
176
177
178
179
180
日收入趋势(万)
181
182
183
184
日均完成量平均重量
185
186
187
188
189
190
191
业务数据和排名
192
193
年194
月195
196
197
198
199
200
201
202
203
204
205
月累计货量
206
187562
207
208
209
月累计收入
210
61434
211
212
213
214
215
日均货量
216
5917
217
218
219
差值
220
5917
221
222
223
224
225
226
227
228
排名 区域 完成比229
230
1 常州区 124.5%231
2 常州区 124.5%232
3 常州区 124.5%233
4 常州区 124.5%234
5 常州区 124.5%235
6 常州区 124.5%236
7 常州区 124.5%237
8 常州区 124.5%238
9 常州区 124.5%239
10 常州区 124.5%240
241
242
243
244
245
246
247 月度收入
248 月度单价
249 月度投保率
250 月度待营比
251
252
253
254
255
256
257
月度趋势
258
259
260
261
月度公斤段占比(货量)
262
263
264
265
266
267
268
269
270
271
272
273
275 $(".dataChart .chart_ul .chart_li").append('
277 $("#datetimeStart").val(getNowFormatDate());278 //图表所需要的数据
279
280 //图表一数据，为数值
281 var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 50, 100, 30, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130],282 //图表二数据，都为数值
283 data2 = [6000, 7000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000],284 //图表三数据，都为百分比
285 data3 = [12, 5, 1.2, 5, 1.2, 50, 1.2, 2, 100, 5, 3, 3],286 //图表四数据，都为百分比
287 data4 ={288 data01: [1, 2, 3, 20, 60, 3, 40, 6, 30],289 data02: [8, 9, 10, 8, 9, 10, 8, 9, 10]290 },291 //图表五的数据，均为百分比
292 data5 ={293 data01: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],294 data02: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],295 data03: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],296 data04: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]297 };298
299 eCharts(data1, data2, data3, data4, data5);300
301 functioneCharts(data1, data2, data3, data4, data5) {302 //echarts图表
303 //图标顺序从上到下，从左到右
304 var dom01 = document.getElementById("echarts01");305 var dom02 = document.getElementById("echarts02");306 var dom03 = document.getElementById("echarts03");307 var dom04 = document.getElementById("echarts04");308 var dom05 = document.getElementById("echarts05");309
310 var myChart01 =echarts.init(dom01);311 var myChart02 =echarts.init(dom02);312 var myChart03 =echarts.init(dom03);313 var myChart04 =echarts.init(dom04);314 var myChart05 =echarts.init(dom05);315
316 //图表自适应页面
317 window.addEventListener("resize", function() {318 myChart01.resize();319 myChart02.resize();320 myChart03.resize();321 myChart04.resize();322 myChart05.resize();323 });324
325 var app ={};326 option = null;327 vartyleChart3;328
329 chart1();330 chart2();331 chart3();332 chart4();333 chart5();334
335 //图表二导航点击
336 $(".dayNumber span").click(function() {337 $(".dayNumber span").removeClass("daySelected");338 $(this).addClass("daySelected");339 data2 = [6000, 5000, 5000, 5000, 5000, 5000, 5000, 1000, 5000, 3000, 4000, 2000],340 chart2();341 });342
343 //图表三导航点击
344 $(".monthlyIncome span").click(function() {345 var id = this.dataset.id;346 $(".monthlyIncome span").removeClass("selectIncome");347 $(this).addClass("selectIncome");348 data3 = [12, 5, 1.2, 5, 1.2, 20, 1.2, 2, 9, 5, 3, 5];349 if(id == 1 || id == 2) {350 data3 = [12, 5, 1.2, 5, 1.2, 50, 1.2, 2, 100, 5, 3, 3];351 tyleChart3 = 1;352 chart3();353 } else{354 tyleChart3 = 0;355 chart3();356 }357 });358
359 functionchart1() {360 //图表一
361 option ={362 //添加横线滚动条
363 dataZoom: {364 type: 'inside',365 start: 0, //默认为0
366 end: 100 - 1500 / 31, //默认为100
367 },368 //底部滚动条
369 /*dataZoom: {370 start: 0, //默认为0371 end: 60 - 1500 / 31, //默认为100372 type: 'slider',373 show: true,374 xAxisIndex: [0],375 handleSize: 0, //滑动条的 左右2个滑动条的大小376 height: 6, //组件高度377 left: 20, //左边的距离378 right: 20, //右边的距离379 bottom: 30, //右边的距离380 handleColor: '#CBBCDB', //h滑动图标的颜色381 handleStyle: {382 borderColor: "#CBBCDB",383 borderWidth: "1",384 shadowBlur: 2,385 background: "#CBBCDB",386 shadowColor: "#CBBCDB",387 },388 fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{389 //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变390 //给第一个设置0，第四个设置1，就是垂直渐变391 offset: 0,392 color: 'rgba(255,255,255,.4)'393 }, {394 offset: 1,395 color: 'rgba(255,255,255,.4)'396 }]),397 backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色398 showDataShadow: false, //是否显示数据阴影 默认auto399 showDetail: false, //即拖拽时候是否显示详细数值信息 默认true400 handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',401 filterMode: 'filter',402 },*/
403 grid: {404 x: 30,405 y: 10,406 x2: 30,407 y2: 70,408 top: 10,409 height: 150,410 borderWidth: 1
411 },412 tooltip: {413 trigger: 'axis',414 textStyle: {415 color: '#999'
416 }417 },418 //全局字体颜色
419 textStyle: {420 color: '#B3B3B3'
421 },422 itemStyle: {423 color: '#666'
424 },425 //X轴参数设置
426 xAxis: {427 type: 'category',428 boundaryGap: false,429 data: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],430 axisLine: {431 lineStyle: {432 color: "#414B71",433 width: 1.5,434 },435 },436 /*axisLabel: {437 interval: 0438 },*/
439 axisTick: {440 show: false,441 },442 },443 //Y轴参数设置
444 yAxis: [{445 type: 'value',446 //data: [0, 30, 60, 90, 120, 150, ],
447 axisLine: {448 lineStyle: {449 color: "#414B71",450 width: 1.5,451 },452 },453 axisLabel: {454 interval: 0
455 },456 axisTick: {457 show: false,458 },459 splitLine: {460 show: false,461 }462 }],463 //服务数据
464 series: [{465 name: '目标占比',466 type: 'line',467 smooth: true,468 stack: '总量',469 data: data1,470 itemStyle: {471 normal: {472 color: '#6FA9D9',473 lineStyle: {474 color: '#6FA9D9'
475 }476 }477 },478 },479
480 ]481 };482 //实例化图表
483 if(option && typeof option === "object") {484 myChart01.setOption(option, true);485 };486 //end
487 }488
489 functionchart2() {490 //图表二
491 //日均完成量
492 option ={493 textStyle: {494 color: '#B3B3B3'
495 },496 grid: {497 x: 60,498 y: 20,499 x2: 30,500 y2: 70,501 top: 20,502 height: 130,503 //rotate:40width: 300,
504 //left: 50,
505 borderWidth: 1
506 },507 tooltip: {508 trigger: 'axis',509 axisPointer: { //坐标轴指示器，坐标轴触发有效
510 type: 'shadow' //默认为直线，可选为：'line' | 'shadow'
511 },512
513 },514 xAxis: {515 type: 'category',516 axisLabel: {517 interval: 0,518 rotate: 40,519 showMaxLabel: true,520 textStyle: {521 color: '#B3B3B3',522 }523 },524 //露出的部分
525 axisTick: {526 show: false,527 },528 //横线
529 splitLine: {530 show: false,531 },532 axisLine: {533 show: true,534 lineStyle: {535 width: 1.5,536 color: "#414B71",537 },538
539 },540 //data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
541 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],542 },543 yAxis: {544 type: 'value',545 axisLabel: {546 interval: 0
547 },548 //露出的部分
549 axisTick: {550 show: false,551 },552 //横线
553 splitLine: {554 show: false,555 },556 axisLine: {557 lineStyle: {558 color: "#414B71",559 width: 1.5,560 },561 },562 },563 series: [{564 data: data2,565 type: 'bar',566 barWidth: 10,567 //顶部数字展示pzr
568 itemStyle: {569 //柱形图圆角，鼠标移上去效果
570 emphasis: {571 barBorderRadius: 40
572 },573
574 normal: {575 //柱形图圆角，初始化效果
576 barBorderRadius: 30,577 color: '#F0C476',578 }579 },580 }]581 };582
583 if(option && typeof option === "object") {584 myChart02.setOption(option, true);585 };586 //end
587 }588
589 functionchart3() {590 if(tyleChart3 == 1) {591 var formatter01 = '{b0}
{a}：{c}',592 formatter02 = '{value}';593 } else{594 var formatter01 = '{b0}
{a}：{c}%',595 formatter02 = '{value} %';596 }597
598 //图表三
599 option ={600 tooltip: {601 trigger: 'axis',602 textStyle: {603 color: '#999'
604 },605 formatter: formatter01606 },607 grid: {608 x: 50,609 y: 20,610 x2: 30,611 y2: 70,612 top: 20,613 height: 200,614 borderWidth: 1
615 },616 textStyle: {617 color: '#B3B3B3'
618 },619 itemStyle: {620 color: '#666'
621 },622 xAxis: {623 type: 'category',624 boundaryGap: false,625 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],626 axisLine: {627 lineStyle: {628 color: "#414B71",629 width: 1.5,630 },631 },632 axisLabel: {633 interval: 0
634 },635 axisTick: {636 show: false,637 },638 },639 yAxis: [{640 type: 'value',641 axisLabel: {642 show: true,643 interval: '0',644 formatter: formatter02645 },646 axisLine: {647 lineStyle: {648 color: "#414B71",649 width: 1.5,650 },651 },652 axisTick: {653 show: false,654 },655 splitLine: {656 show: false,657 }658 }],659 series: [{660 name: '目标占比',661 type: 'line',662 smooth: true,663 stack: '总量',664 data: data3,665 itemStyle: {666 normal: {667 color: '#F0C476',668 lineStyle: {669 color: '#F0C476'
670 },671 }672 },673 },674
675 ]676 };677 if(option && typeof option === "object") {678 myChart03.setOption(option, true);679 };680 //end
681 }682
683 functionchart4() {684 //图表四
685 option ={686 tooltip: {687 trigger: 'axis',688 textStyle: {689 color: '#999'
690 },691 formatter: '{b}
{a0}：{c0}%
{a1}：{c1}%'
692 },693 grid: {694 x: 50,695 y: 20,696 x2: 30,697 y2: 70,698 top: 30,699 height: 190,700 borderWidth: 1
701 },702 legend: {703 data: ['目标占比', '实际占比'],704 selectedMode: false,705 textStyle: {706 color: '#B3B3B3'
707 },708 top: -5,709 },710 textStyle: {711 color: '#B3B3B3'
712 },713 xAxis: {714 type: 'category',715 boundaryGap: false,716 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],717 axisLine: {718 lineStyle: {719 color: "#414B71",720 width: 1.5,721 },722 },723 axisLabel: {724 interval: 0,725 rotate: 40,726 },727 axisTick: {728 show: false,729 },730 },731 yAxis: [{732 type: 'value',733 axisLabel: {734 show: true,735 interval: '0',736 formatter: '{value} %'
737 },738 axisLine: {739 lineStyle: {740 color: "#414B71",741 width: 1.5,742 },743 },744 axisTick: {745 show: false,746 },747 splitLine: {748 show: false,749 }750 }],751 series: [{752 name: '目标占比',753 type: 'line',754 smooth: true,755 stack: '总量',756 data: data4.data01,757 itemStyle: {758 normal: {759 color: '#6FA9D9',760 lineStyle: {761 color: '#6FA9D9'
762 }763 }764 },765 },766 {767 name: '实际占比',768 type: 'line',769 smooth: true,770 stack: '总量2',771 data: data4.data02,772 itemStyle: {773 normal: {774 color: '#FAD567',775 lineStyle: {776 color: '#FAD567'
777 }778 }779 },780 },781
782 ]783 };784 if(option && typeof option === "object") {785 myChart04.setOption(option, true);786 };787 //end
788 }789
790 functionchart5() {791 //图表五
792 option ={793 textStyle: {794 color: '#B3B3B3'
795 },796 grid: {797 x: 60,798 y: 20,799 x2: 30,800 y2: 70,801 top: 40,802 height: 235,803 //bottom: 20,
804 borderWidth: 1
805 },806 tooltip: {807 trigger: 'axis',808 textStyle: {809 color: '#999'
810 },811 formatter: '{b}
{a0}：{c0}%
{a1}：{c1}%
{a2}：{c2}%
{a3}：{c3}%'
812 },813 legend: {814 itemWidth: 10,815 itemHeight: 10,816 data: ['T>500', '100
820 },821 },822 xAxis: [{823 type: 'category',824 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],825 //轴线颜色
826 axisLine: {827 lineStyle: {828 color: "#414B71",829 width: 1.5,830 },831 },832 axisLabel: {833 interval: 0,834 rotate: 40,835 },836 //露出的部分
837 axisTick: {838 show: false,839 },840 //横线
841 splitLine: {842 show: false,843 }844 },845
846 ],847 yAxis: [{848 type: 'value',849 //data: [25, 50, 75, 100],
850 axisLabel: {851 show: true,852 interval: '0',853 formatter: '{value} %'
854 },855 //轴线颜色
856 axisLine: {857 lineStyle: {858 color: "#414B71",859 width: 1.5,860 },861 },862 //露出的部分
863 axisTick: {864 show: false,865 },866 //横线
867 splitLine: {868 show: false,869 }870 }],871 series: [{872 name: 'T>500',873 type: 'bar',874 stack: '广告',875 data: data5.data01,876 barWidth: 8,877 itemStyle: {878 normal: {879 color: "#426BC5"
880 }881 },882 },883 {884 name: '100
892 }893 },894 },895 {896 name: '20
904 }905 },906 },907 {908 name: 'T≤20',909 type: 'bar',910 stack: '广告',911 data: data5.data04,912 barWidth: 8,913 itemStyle: {914 normal: {915 color: "#66A0D1"
916 }917 },918 }919 ]920 };921
922 if(option && typeof option === "object") {923 myChart05.setOption(option, true);924 };925 //-------------end---------------
926 }927
928 }929
930 //点击事件
931
932
933 //地区选择hover
934 $(".areaAll li").hover(function() {935 var id = this.dataset.id;936 $(".areaAll li").removeClass('areaSelected');937 $(this).addClass('areaSelected');938 $(".areaThird ul").hide();939 if(id == 1) {940 $(".areaRegion").show();941 } else if(id == 2) {942 $(".areaFourthly ul").hide();943 $(".areaGrouping").show();944 }945 });946
947 $(".areaRegion li").hover(function() {948 var id = this.dataset.id;949 $(".areaRegion li").removeClass('areaSelected');950 $(this).addClass('areaSelected');951 $(".areaFourthly ul").hide();952 if(id == 1) {953 $(".huanan").show();954 } else if(id == 2) {955 $(".huabei").show();956 } else if(id == 3) {957 $(".huadong").show();958 } else{959 $(".zhongxi").show();960 }961 });962
963 $(".area").hover(function() {964
965 }, function() {966 $(".areaAll,.areaThird ul,.areaFourthly ul").hide();967 })968
969 $(".areaThird li").hover(function() {970 $(".areaThird li").removeClass('areaSelected');971 $(this).addClass('areaSelected');972 });973
974 $(".areaFourthly li").hover(function() {975 $(".areaFourthly li").removeClass('areaSelected');976 $(this).addClass('areaSelected');977 });978 $(".didian").hover(function() {979 $(".areaAll").show();980 });981 //--------------end---------------
982
983
984
985 $(".areaThird li,.areaFourthly li").click(function() {986 $(".areaAll,.areaThird ul,.areaFourthly ul").hide();987 });988
989 //导航点击
990 $(".perforNav li").click(function() {991 $(".perforNav li").removeClass('navSelected');992 $(this).addClass('navSelected');993 });994
995 //排名选择
996 $(".selectRank span").click(function() {997 $(".selectRank span").removeClass("selectedRank");998 $(this).addClass("selectedRank");999 });1000
1001 //endDate : new Date(),
1002 //日期选择
1003 $("#datetimeStart").datetimepicker({1004 format: 'yyyy-mm-dd',1005 minView: 'month',1006 language: 'zh-CN',1007 autoclose: true,1008 todayHighlight: 1, //选中高亮
1009 initialDate: new Date(), //初始化的时间
1010 startDate: "2003-01-01", //只显示一年的日期365天
1011 endDate: "2020-02-14",1012 }).on("click", function() {1013 //$("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
1014 });1015
1016 $(".yearSwitch").click(function(){1017 var id = this.dataset.id;1018 if(id == 1){1019 //月
1020 $(".mask").css("left","20px")1021 this.dataset.id = 0;1022 }else{1023 //年
1024 $(".mask").css("left","0")1025 this.dataset.id = 1;1026 }1027
1028 })1029
1030 //--------------end---------------
1031
1032 //第一个参数为外圆的百分比，第二个参数为内圆的百分比
1033 toCanvas('canvas', 80, 89);1034 //环形进度条
1035 functiontoCanvas(id, progress, progress2) {1036 //canvas进度条
1037 var canvas =document.getElementById(id),1038 ctx = canvas.getContext("2d"),1039 percent =progress,1040 percent2 =progress2,1041 //最终百分比
1042 circleX = canvas.width / 3, //* 中心x坐标*/
1043 circleY = canvas.height / 2, //中心y坐标
1044 radius = 50, //圆环半径
1045 lineWidth = 6, //圆形线条的宽度
1046 fontSize = 10; //字体大小
1047
1048 //画圆
1049 functioncircle(cx, cy, r) {1050 ctx.beginPath();1051 ctx.lineWidth =lineWidth;1052 ctx.strokeStyle = '#eee';1053 ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);1054 ctx.stroke();1055 state();1056 }1057
1058 //进度条说明
1059 functionstate() {1060 ctx.beginPath();1061 ctx.arc(150, 40, 3, 0, 360, false);1062 ctx.fillStyle = "#1582CF"; //填充颜色,默认是黑色
1063 ctx.fill(); //画实心圆
1064
1065 ctx.beginPath();1066 ctx.arc(150, 60, 3, 0, 360, false);1067 ctx.fillStyle = "#0DBA4C"; //填充颜色,默认是黑色
1068 ctx.fill(); //画实心圆
1069
1070 ctx.beginPath();1071 ctx.arc(150, 80, 3, 0, 360, false);1072 ctx.fillStyle = "#DB0432"; //填充颜色,默认是黑色
1073 ctx.fill(); //画实心圆
1074 ctx.closePath();1075
1076 ctx.fillStyle = "#fff";1077 //ctx.fillWeight = "normal";
1078 ctx.font = "14px April";1079
1080 ctx.fillText("时间进度", 190, 40);1081
1082 ctx.fillText(">时间进度", 190, 60);1083
1084 ctx.fillText("<时间进度", 190, 80);1085
1086 }1087
1088 //画弧线
1089 functionsector(cx, cy, r, startAngle, endAngle, anti) {1090 ctx.beginPath();1091 ctx.lineWidth =lineWidth;1092 endAngle > 100 ? ctx.strokeStyle = "#DB0432" : ctx.strokeStyle = "#1582CF";1093 //圆弧两端的样式
1094 ctx.lineCap = 'round';1095 ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100));1096 ctx.stroke();1097 }1098
1099 //画弧线02
1100 functionsector2(cx, cy, r, startAngle, endAngle, anti) {1101 ctx.beginPath();1102 ctx.lineWidth =lineWidth;1103 endAngle > 100 ? ctx.strokeStyle = "#DB0432" : ctx.strokeStyle = "#0DBA4C";1104 //圆弧两端的样式
1105 ctx.lineCap = 'round';1106 ctx.arc(cx, cy, r * 3 / 4, Math.PI, Math.PI * (1 + endAngle / 100));1107 ctx.stroke();1108 }1109 //刷新
1110 functionloading() {1111 var percent3 =progress;1112 if(percent < percent2) percent =percent2;1113 if(process >=percent) clearInterval(circleLoading);1114 if(process2 >=percent) clearInterval(circleLoading);1115 //清除canvas内容
1116 ctx.clearRect(0, 0, circleX * 2, circleY * 2);1117
1118 //中间的字
1119 ctx.font = "20px April";1120
1121 ctx.textAlign = 'center';1122 ctx.textBaseline = 'middle';1123 ctx.fillStyle = '#0DBA4C';1124 ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY * 4 / 5);1125 ctx.fillStyle = '#fff';1126 ctx.font = "10px April";1127 ctx.fillText("月度完成比", circleX, circleY + 5);1128
1129 //圆形
1130 circle(circleX, circleY, radius);1131
1132 //圆弧
1133 sector(circleX, circleY, radius, Math.PI * 2 / 3, process);1134 sector2(circleX, circleY, radius, Math.PI * 2 / 3, process2);1135 //两端圆点
1136 //smallcircle1(50 + Math.cos(2 * Math.PI / 360 * 120) * 100, 150 + Math.sin(2 * Math.PI / 360 * 120) * 100, 5);
1137 //smallcircle2(50 + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * 100, 150 + Math.sin(2 * Math.PI / 360 * (120 + process * 3)) * 100, 5);
1138 //控制结束时动画的速度
1139 if(process 0.90) {1141 process += 0.30;1142 } else if(process / percent > 0.80) {1143 process += 0.55;1144 } else if(process / percent > 0.70) {1145 process += 0.75;1146 } else{1147 process += 1.0;1148 }1149 }1150
1151 if(process2 0.90) {1153 process2 += 0.30;1154 } else if(process2 / percent > 0.80) {1155 process2 += 0.55;1156 } else if(process2 / percent > 0.70) {1157 process2 += 0.75;1158 } else{1159 process2 += 1.0;1160 }1161 }1162
1163 }1164
1165 var process = 0.0;1166 var process2 = 0.0;1167
1168 var circleLoading = window.setInterval(function() {1169 loading();1170 }, 20);1171
1172 }1173
1174 //echarts不同屏幕字体大小调整
1175 var getDpr = functiongetDpr() {1176 var dpr =document.body.clientWidth;1177 if(dpr > 1226) {1178 return 12;1179 } else if(dpr == 2) {1180 return 24;1181 } else{1182 return 36;1183 }1184 };1185
1186 //获取当天日期
1187 functiongetNowFormatDate() {1188 var date = newDate();1189 var seperator1 = "-";1190 var year =date.getFullYear();1191 var month = date.getMonth() + 1;1192 var strDate =date.getDate();1193 if(month >= 1 && month <= 9) {1194 month = "0" +month;1195 }1196 if(strDate >= 0 && strDate <= 9) {1197 strDate = "0" +strDate;1198 }1199 var currentdate = year + seperator1 + month + seperator1 +strDate;1200 returncurrentdate;1201 }1202
1203 })
1204
1205
1206
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
