layout_chartyear.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <div class="layui-row layui-col-space16">
  2. <div class="layui-col-md12">
  3. <div class="layui-card">
  4. <div id="chartYear" style="width: 100%;height:240px;"></div>
  5. </div>
  6. </div>
  7. </div>
  8. <script>
  9. var myChart;
  10. function layoutChartYear() {
  11. myChart = echarts.init(document.getElementById('chartYear'));
  12. $.ajax({
  13. url: "/home/api/get_view_data",
  14. type: 'get',
  15. data: {},
  16. success: function (e) {
  17. if (e.code == 0) {
  18. let archiveCalendar= e.data.data_three;
  19. is_log=1;
  20. //console.log(archiveCalendar);
  21. let option = {
  22. title: {
  23. top: '12px',
  24. text: '近一年员工活跃度',
  25. left: '8px',
  26. textStyle: {
  27. fontSize: '18',
  28. color: '#333',
  29. }
  30. },
  31. tooltip: {
  32. padding: 6,
  33. formatter: function (obj) {
  34. var value = obj.value;
  35. return '<div style="font-size: 12px;">' + value[0] + '员工活跃度:' + value[1] + '</div>';
  36. }
  37. },
  38. visualMap: {
  39. min: 0,
  40. max: 300,
  41. show: false,
  42. inRange: {
  43. color: ['#fafafa', '#1AAD19']
  44. }
  45. },
  46. calendar: {
  47. top: 75,
  48. left: 52,
  49. right: 20,
  50. range: getRange(),
  51. cellSize: ['auto', 21],
  52. splitLine: {
  53. lineStyle: {
  54. color: '#aaa',
  55. type: 'dashed'
  56. }
  57. },
  58. itemStyle: {
  59. borderWidth: 0.5
  60. },
  61. yearLabel: { show: false },
  62. monthLabel: {
  63. nameMap: 'cn',
  64. fontSize: 12
  65. },
  66. dayLabel: {
  67. show: true,
  68. formatter: '{start} 1st',
  69. fontWeight: 'lighter',
  70. nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  71. fontSize: 12
  72. }
  73. },
  74. series: [{
  75. type: 'heatmap',
  76. coordinateSystem: 'calendar',
  77. calendarIndex: 0,
  78. data: getDay(archiveCalendar)
  79. }]
  80. };
  81. myChart.setOption(option);
  82. }
  83. }
  84. })
  85. }
  86. </script>