center2_d.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. function center2_d(datav,className){
  2. //各单位人员在位情况
  3. let myChartv = echarts.init(document.getElementById('center2_d'), 'vintage');
  4. // const datav = [80, 75, 82, 68, 73, 70,90,52,78,82];
  5. // const className = ['一队', '二队', '三队', '四队', '一连', '二连','后勤','保障部','医疗部','一大队',];
  6. const colorList9 = ['#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF','#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF', ];
  7. // const defaultData = [100, 100, 100, 100, 100, 100];
  8. let s = 3;
  9. let z = -1;
  10. function w(){
  11. if(s==datav.length-1){
  12. s=3;
  13. z=0
  14. }else{
  15. s+=1;
  16. z+=1;
  17. }
  18. const option4 = {
  19. dataZoom: [ //给x轴设置滚动条
  20. {
  21. type: 'slider',
  22. width:10,
  23. // handleHeight:'30%',
  24. show: true,
  25. yAxisIndex: [0],
  26. left: '95%',
  27. handleColor:'#68789c',
  28. startValue: z, //数据窗口范围的起始百分比
  29. endValue:s,
  30. },
  31. {
  32. type: 'inside',
  33. yAxisIndex: [0],
  34. startValue: z, //数据窗口范围的起始百分比
  35. endValue:s,
  36. }
  37. ],
  38. grid: {
  39. left: '5%',
  40. right: '8%',
  41. bottom: '5%',
  42. top: '10%',
  43. containLabel: true
  44. },
  45. tooltip: {
  46. trigger: 'axis',
  47. axisPointer: {
  48. type: 'none'
  49. },
  50. formatter: function (params) {
  51. return params[0].name + '<br/>' +
  52. "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
  53. // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
  54. params[0].seriesName + ' : ' + params[0].value
  55. }
  56. },
  57. xAxis: {
  58. position: 'top',
  59. show: true,
  60. type: 'value',
  61. splitLine: {
  62. show: false
  63. },
  64. axisLabel: {
  65. show: true,
  66. textStyle: {
  67. color: '#fff', //更改坐标轴文字颜色
  68. }
  69. },
  70. },
  71. yAxis: [{
  72. type: 'category',
  73. inverse: true,
  74. axisLabel: {
  75. show: true,
  76. textStyle: {
  77. color: '#fff'
  78. },
  79. },
  80. splitLine: {
  81. show: false
  82. },
  83. axisTick: {
  84. show: false
  85. },
  86. axisLine: {
  87. show: false
  88. },
  89. data: className
  90. }, {
  91. type: 'category',
  92. inverse: true,
  93. axisTick: 'none',
  94. axisLine: 'none',
  95. show: true,
  96. axisLabel: {
  97. textStyle: {
  98. color: '#ffffff',
  99. fontSize: '12'
  100. },
  101. formatter: function (datav) {
  102. console.log(datav);
  103. return datav + ' %';
  104. },
  105. },
  106. data: datav
  107. }],
  108. series: [{
  109. name: '完成率',
  110. type: 'bar',
  111. zlevel: 1,
  112. itemStyle: {
  113. normal: {
  114. barBorderRadius: 0,
  115. color: (params) => {
  116. return colorList9[params.dataIndex]
  117. }
  118. },
  119. },
  120. barWidth: 10,
  121. data: datav
  122. }, ]
  123. };
  124. myChartv.setOption(option4);
  125. }
  126. w(); //初始化实例后,首次设置数据
  127. setInterval(function () {
  128. // 每次向后滚动一个,最后一个从头开始。
  129. w();
  130. }, 5000);
  131. }