data.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. $(function() {
  2. var dom = document.getElementById("container4");
  3. var myChart = echarts.init(dom);
  4. var app = {};
  5. option = null;
  6. // Generate data
  7. var category = [];
  8. var dottedBase = +new Date();
  9. dottedBase-=3600 * 24 * 1000*20;
  10. var lineData = [];
  11. var barData = [];
  12. for (var i = 0; i < 20; i++) {
  13. var date = new Date(dottedBase += 3600 * 24 * 1000);
  14. category.push([
  15. date.getFullYear(),
  16. date.getMonth() + 1,
  17. date.getDate()
  18. ].join('-'));
  19. var b = vm.msgCnt[i].msg;
  20. var d = vm.msgCnt[i].alm;
  21. barData.push(b)
  22. lineData.push(d + b);
  23. }
  24. // option
  25. option = {
  26. tooltip: {
  27. trigger: 'axis',
  28. axisPointer: {
  29. type: 'shadow'
  30. }
  31. },
  32. legend: {
  33. data: ['处理数', '报警数'],
  34. textStyle: {
  35. color: '#ccc'
  36. }
  37. },
  38. xAxis: {
  39. data: category,
  40. axisLine: {
  41. lineStyle: {
  42. color: '#ccc'
  43. }
  44. }
  45. },
  46. yAxis: {
  47. splitLine: {show: false},
  48. axisLine: {
  49. lineStyle: {
  50. color: '#ccc'
  51. }
  52. }
  53. },
  54. series: [{
  55. name: 'line',
  56. type: 'line',
  57. smooth: true,
  58. showAllSymbol: true,
  59. symbol: 'emptyCircle',
  60. symbolSize: 15,
  61. data: lineData
  62. }, {
  63. name: '报警数',
  64. type: 'bar',
  65. barWidth: 10,
  66. itemStyle: {
  67. normal: {
  68. barBorderRadius: 5,
  69. color: new echarts.graphic.LinearGradient(
  70. 0, 0, 0, 1,
  71. [
  72. {offset: 0, color: '#14c8d4'},
  73. {offset: 1, color: '#43eec6'}
  74. ]
  75. )
  76. }
  77. },
  78. data: barData
  79. }, {
  80. name: '处理数',
  81. type: 'bar',
  82. barGap: '-100%',
  83. barWidth: 10,
  84. itemStyle: {
  85. normal: {
  86. color: new echarts.graphic.LinearGradient(
  87. 0, 0, 0, 1,
  88. [
  89. {offset: 0, color: 'rgba(20,200,212,0.5)'},
  90. {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
  91. {offset: 1, color: 'rgba(20,200,212,0)'}
  92. ]
  93. )
  94. }
  95. },
  96. z: -12,
  97. data: lineData
  98. }, {
  99. name: 'dotted',
  100. type: 'pictorialBar',
  101. symbol: 'rect',
  102. itemStyle: {
  103. normal: {
  104. color: '#0f375f'
  105. }
  106. },
  107. symbolRepeat: true,
  108. symbolSize: [12, 4],
  109. symbolMargin: 1,
  110. z: -10,
  111. data: lineData
  112. }]
  113. };;
  114. if (option && typeof option === "object") {
  115. myChart.setOption(option, true);
  116. }
  117. })