line3.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. layui.use(['echarts'], function() {
  2. let echarts = layui.echarts;
  3. var line3 = echarts.init(document.getElementById('line3'),null, {
  4. width: 600,
  5. height: 400
  6. });
  7. const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
  8. option = {
  9. backgroundColor: '#fff',
  10. title: {
  11. text: "告警数",
  12. left: "18px",
  13. top: "0",
  14. color: "#999",
  15. fontSize: 12,
  16. fontWeight: '400'
  17. },
  18. color: ['#73A0FA', '#73DEB3', '#FFB761'],
  19. tooltip: {
  20. trigger: 'axis',
  21. axisPointer: {
  22. type: 'cross',
  23. crossStyle: {
  24. color: '#999'
  25. },
  26. lineStyle: {
  27. type: 'dashed'
  28. }
  29. }
  30. },
  31. grid: {
  32. left: '25',
  33. right: '25',
  34. bottom: '24',
  35. top: '75',
  36. containLabel: true
  37. },
  38. legend: {
  39. data: ['上周', '本周'],
  40. orient: 'horizontal',
  41. icon: "rect",
  42. show: true,
  43. left: 20,
  44. top: 25,
  45. },
  46. xAxis: {
  47. type: 'category',
  48. data: ['爱立信端局', '中兴端局', '爱立信HSS', '中兴HSS', '华为HSS', '华为智能网', '中兴VIMS'],
  49. splitLine: {
  50. show: false
  51. },
  52. axisTick: {
  53. show: false
  54. },
  55. axisLine: {
  56. show: false
  57. },
  58. },
  59. yAxis: {
  60. type: 'value',
  61. axisLabel: {
  62. color: '#999',
  63. fontSize: 12
  64. },
  65. splitLine: {
  66. show: true,
  67. lineStyle: {
  68. color: '#F3F4F4'
  69. }
  70. },
  71. axisTick: {
  72. show: false
  73. },
  74. axisLine: {
  75. show: false
  76. },
  77. },
  78. series: [{
  79. name: '上周',
  80. type: 'line',
  81. smooth: true,
  82. data: [1800, 1000, 2000, 1000, 500, 100, 1200]
  83. },
  84. {
  85. name: '本周',
  86. type: 'line',
  87. smooth: true,
  88. data: [1700, 999, 1100, 899, 199, 99, 1000]
  89. }
  90. ]
  91. };
  92. line3.setOption(option);
  93. window.onresize = function() {
  94. line3.resize();
  95. }
  96. })