1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 8 <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" /> 9 <link rel="stylesheet" type="text/css" href="css/bootstrap-switch.css" /> 10 <link rel="stylesheet" href="css/index.css" /> 11 <script src="js/jquery.min.js"></script> 12 <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 13 <script src="js/bootstrap-datetimepicker.min.js"></script> 14 <script src="js/bootstrap-switch.min.js"></script> 15 <script src="js/bootstrap-datetimepicker.zh-CN.js"></script> 16 <script src="js/echarts.min.js"></script> 17 </head> 18 19 <body> 20 <div class="perfor_container"> 21 <div class="perfor_bg"> 22 <img class="title_img" src="images/title@2x.png" style=" 354px;" /> 23 <div class="perfor_content"> 24 <div class="perfor_nav"> 25 <ul class="areaSelect"> 26 27 <li class="didian"><img src="images/didian@2x.png" /><span>全网<span class="Xarrows">﹤</span></span> 28 </li> 29 <div class="area"> 30 <!--二级导航--> 31 <ul class="areaAll hide1"> 32 <li class="areaSelected" data-id="1">业务数据</li> 33 <li data-id="2">分组</li> 34 </ul> 35 36 <!--三级导航--> 37 <div class="areaThird"> 38 <ul class="areaRegion innerbox hide1"> 39 <li data-id="1" class="innerbox">华南</li> 40 <li data-id="2" class="innerbox">华北</li> 41 <li data-id="3" class="innerbox">华东</li> 42 <li data-id="4" class="innerbox">中西</li> 43 </ul> 44 <ul class="areaGrouping innerbox hide1"> 45 <li>分组一</li> 46 <li>分组一</li> 47 <li>分组一</li> 48 <li>分组一</li> 49 <li>分组一</li> 50 <li>分组一</li> 51 <li>分组一</li> 52 <li>分组一</li> 53 <li>分组一</li> 54 <li>分组一</li> 55 </ul> 56 </div> 57 <!--四级导航--> 58 <div class="areaFourthly"> 59 <ul class="huanan innerbox hide1"> 60 <li>金华区01</li> 61 <li>台州区</li> 62 <li>皖南区</li> 63 <li>金华区</li> 64 <li>台州区</li> 65 <li>皖南区</li> 66 <li>金华区</li> 67 <li>台州区</li> 68 <li>皖南区</li> 69 <li>金华区</li> 70 <li>台州区</li> 71 <li>皖南区</li> 72 <li>金华区</li> 73 <li>台州区</li> 74 <li>皖南区</li> 75 <li>金华区</li> 76 <li>台州区</li> 77 <li>皖南区</li> 78 <li>金华区</li> 79 <li>台州区</li> 80 <li>皖南区</li> 81 <li>金华区</li> 82 <li>台州区</li> 83 <li>皖南区</li> 84 </ul> 85 <ul class="huabei innerbox hide1"> 86 <li>海南区01</li> 87 <li>潮汕区</li> 88 <li>赣南区</li> 89 <li>赣北区</li> 90 <li>海南区</li> 91 <li>潮汕区</li> 92 <li>赣南区</li> 93 <li>赣北区</li> 94 <li>海南区</li> 95 <li>潮汕区</li> 96 <li>赣南区</li> 97 <li>赣北区</li> 98 <li>海南区</li> 99 <li>潮汕区</li> 100 <li>赣南区</li> 101 <li>赣北区</li> 102 <li>海南区</li> 103 <li>潮汕区</li> 104 <li>赣南区</li> 105 <li>赣北区</li> 106 </ul> 107 <ul class="huadong innerbox hide1"> 108 <li>山西区01</li> 109 <li>冀州区</li> 110 <li>黑龙江区</li> 111 <li>济南区</li> 112 <li>海南区</li> 113 <li>潮汕区</li> 114 <li>赣南区</li> 115 <li>赣北区</li> 116 <li>海南区</li> 117 <li>潮汕区</li> 118 <li>赣南区</li> 119 <li>赣北区</li> 120 <li>海南区</li> 121 <li>潮汕区</li> 122 <li>赣南区</li> 123 <li>赣北区</li> 124 </ul> 125 <ul class="zhongxi innerbox hide1"> 126 <li>湘南区01</li> 127 <li>豫北区</li> 128 <li>陕西区</li> 129 <li>宁夏区</li> 130 <li>海南区</li> 131 <li>潮汕区</li> 132 <li>赣南区</li> 133 <li>赣北区</li> 134 <li>海南区</li> 135 <li>潮汕区</li> 136 <li>赣南区</li> 137 <li>赣北区</li> 138 <li>海南区</li> 139 <li>潮汕区</li> 140 <li>赣南区</li> 141 <li>赣北区</li> 142 </ul> 143 </div> 144 145 </div> 146 </ul> 147 <div class="dateSelect"> 148 <!--<img src="images/shijian@2x.png" />--><input size="16" type="text" id="datetimeStart" readonly class="form_datetime" value=""></div> 149 <div id="bNav" class="bNav"> 150 <ul class="perforNav"> 151 <li class="navSelected">重货产品：</li> 152 <li>陆运零担</li> 153 <li>物流普运</li> 154 <li>重货包裹</li> 155 <li>小票零担</li> 156 <li>重货快运</li> 157 <li>重货专运</li> 158 <li>专线普运</li> 159 </ul> 160 </div> 161 </div> 162 <div class="dataChart"> 163 <ul class="column1 chart_ul"> 164 <li class="chart_li"> 165 <p>今日情況</p> 166 <div class="todaySur"> 167 <div> 168 <h3>今日收入</h3> 169 <h1><span>2560</span><span>万</span></h1> 170 <p><span>年度峰值：3560万</span> <span>3月5日</span></p> 171 </div> 172 <div> 173 <h3>今日运单总重量</h3> 174 <h1><span>2560</span><span>T</span></h1> 175 <p><span>年度峰值：3560T</span> <span>3月5日</span></p> 176 </div> 177 </div> 178 </li> 179 <li class="chart_li"> 180 <p>日收入趋势（万）</p> 181 <div id="echarts01"></div> 182 </li> 183 <li class="chart_li"> 184 <p class="dayNumber"><span class="daySelected">日均完成量</span><span>平均重量</span></p> 185 <div id="echarts02"></div> 186 </li> 187 </ul> 188 <ul class="column2 chart_ul"> 189 <li style="height: 360px;" class="chart_li"> 190 <div> 191 <p style="float: left;">业务数据和排名</p> 192 <ul class="yearSwitch" data-id="1"> 193 <li class="year">年</li> 194 <li class="month">月</li> 195 <li class="mask"></li> 196 </ul> 197 <!--<input name="status" type="checkbox" data-size="small">--> 198 </div> 199 <div class="business"> 200 <div class="businessDetail"> 201 <div><canvas id="canvas" width="230" height="150"></div> 202 <ul class="business_detail"> 203 <li> 204 <span> 205 <p>月累计货量</p> 206 <h2>187562</h2> 207 </span> 208 <span> 209 <p>月累计收入</p> 210 <h2>61434</h2> 211 </span> 212 </li> 213 <li> 214 <span> 215 <p>日均货量</p> 216 <h2>5917</h2> 217 </span> 218 <span> 219 <p>差值</p> 220 <h2>5917</h2> 221 </span> 222 </li> 223 </ul> 224 </div> 225 <div class="business-rank"> 226 <div class="selectRank"><span class="selectedRank">前10</span><span>后10</span></div> 227 <ul class="businessRank"> 228 <li><span>排名</span><span>区域</span><span>完成比</span></li> 229 <ul> 230 <li><span>1</span><span>常州区</span><span>124.5%</span></li> 231 <li><span>2</span><span>常州区</span><span>124.5%</span></li> 232 <li><span>3</span><span>常州区</span><span>124.5%</span></li> 233 <li><span>4</span><span>常州区</span><span>124.5%</span></li> 234 <li><span>5</span><span>常州区</span><span>124.5%</span></li> 235 <li><span>6</span><span>常州区</span><span>124.5%</span></li> 236 <li><span>7</span><span>常州区</span><span>124.5%</span></li> 237 <li><span>8</span><span>常州区</span><span>124.5%</span></li> 238 <li><span>9</span><span>常州区</span><span>124.5%</span></li> 239 <li><span>10</span><span>常州区</span><span>124.5%</span></li> 240 </ul> 241 </ul> 242 </div> 243 </div> 244 </li> 245 <li class="chart_li"> 246 <div class="monthlyIncome"> 247 <span class="selectIncome" data-id="1">月度收入</span> 248 <span data-id="2">月度单价</span> 249 <span data-id="3">月度投保率</span> 250 <span data-id="4">月度待营比</span> 251 </div> 252 <div id="echarts03"></div> 253 </li> 254 </ul> 255 <ul class="column3 chart_ul"> 256 <li class="chart_li"> 257 <p>月度趋势</p> 258 <div id="echarts04"></div> 259 </li> 260 <li class="chart_li"> 261 <p>月度公斤段占比（货量）</p> 262 <div id="echarts05"></div> 263 </li> 264 </ul> 265 </div> 266 267 </div> 268 269 </div> 270 271 </div> 272 273 <script type="text/javascript">$(document).ready(function() { 274 //添加角落的边框 275 $(".dataChart .chart_ul .chart_li").append('<div class="angle"><div class="angleSZ"></div><div class="angleSY"></div><div class="angleXZ"></div><div class="angleXY"></div></div>') 276 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 function eCharts(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 var tyleChart3; 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 function chart1() { 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, //默认为0 371 end: 60 - 1500 / 31, //默认为100 372 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, //是否显示数据阴影 默认auto 399 showDetail: false, //即拖拽时候是否显示详细数值信息 默认true 400 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 1.5, 434 }, 435 }, 436 /*axisLabel: { 437 interval: 0 438 },*/ 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 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 function chart2() { 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:40 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 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 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 function chart3() { 590 if(tyleChart3 == 1) { 591 var formatter01 = '{b0}<br />{a}：{c}', 592 formatter02 = '{value}'; 593 } else { 594 var formatter01 = '{b0}<br />{a}：{c}%', 595 formatter02 = '{value} %'; 596 } 597 598 //图表三 599 option = { 600 tooltip: { 601 trigger: 'axis', 602 textStyle: { 603 color: '#999' 604 }, 605 formatter: formatter01 606 }, 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 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: formatter02 645 }, 646 axisLine: { 647 lineStyle: { 648 color: "#414B71", 649 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 function chart4() { 684 //图表四 685 option = { 686 tooltip: { 687 trigger: 'axis', 688 textStyle: { 689 color: '#999' 690 }, 691 formatter: '{b}<br />{a0}：{c0}%<br />{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 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 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 function chart5() { 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}<br />{a0}：{c0}%<br />{a1}：{c1}%<br />{a2}：{c2}%<br />{a3}：{c3}%' 812 }, 813 legend: { 814 itemWidth: 10, 815 itemHeight: 10, 816 data: ['T>500', '100<T≤500', '20<T≤100', 'T≤20', ], 817 selectedMode: false, 818 textStyle: { 819 color: '#B3B3B3' 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 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 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<T≤500', 885 type: 'bar', 886 stack: '广告', 887 data: data5.data02, 888 barWidth: 8, 889 itemStyle: { 890 normal: { 891 color: "#1FA985" 892 } 893 }, 894 }, 895 { 896 name: '20<T≤100', 897 type: 'bar', 898 stack: '广告', 899 data: data5.data03, 900 barWidth: 8, 901 itemStyle: { 902 normal: { 903 color: "#DAC37F" 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 function toCanvas(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 function circle(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 function state() { 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 function sector(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 function sector2(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 function loading() { 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 < percent3) { 1140 if(process / percent > 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 < percent2) { 1152 if(process2 / percent > 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 = function getDpr() { 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 function getNowFormatDate() { 1188 var date = new Date(); 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 return currentdate; 1201 } 1202 1203 })</script> 1204 </body> 1205 1206 </html>