line2.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. layui.use(['echarts'], function() {
  2. let echarts = layui.echarts;
  3. var line1 = echarts.init(document.getElementById('line1'),null, {
  4. width: 600,
  5. height: 400
  6. });
  7. const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
  8. option = {
  9. backgroundColor: '#fff',
  10. tooltip: {
  11. show: false
  12. },
  13. grid: {
  14. top: '10%',
  15. bottom: '6%',
  16. left: '6%',
  17. right: '6%',
  18. containLabel: true
  19. },
  20. xAxis: [{
  21. type: 'category',
  22. boundaryGap: false,
  23. axisLine: {
  24. show: false
  25. },
  26. axisTick: {
  27. show: false
  28. },
  29. axisLabel: {
  30. margin: 10,
  31. fontSize: 14,
  32. color: 'rgba(#999)'
  33. },
  34. splitLine: {
  35. show: true,
  36. lineStyle: {
  37. color: '#939ab6',
  38. opacity: .15
  39. }
  40. },
  41. data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
  42. },],
  43. yAxis: [{
  44. type: 'value',
  45. offset: 15,
  46. max: 100,
  47. min: 0,
  48. axisTick: {
  49. show: false
  50. },
  51. axisLine: {
  52. show: false
  53. },
  54. axisLabel: {
  55. margin: 10,
  56. fontSize: 14,
  57. color: '#999'
  58. },
  59. splitLine: {
  60. show: false
  61. }
  62. }],
  63. series: [{
  64. name: '2',
  65. type: 'line',
  66. z: 3,
  67. showSymbol: false,
  68. smoothMonotone: 'x',
  69. lineStyle: {
  70. width: 3,
  71. color: {
  72. type: 'linear',
  73. x: 0,
  74. y: 0,
  75. x2: 0,
  76. y2: 1,
  77. colorStops: [{
  78. offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色
  79. }, {
  80. offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色
  81. }]
  82. },
  83. shadowBlur: 4,
  84. shadowColor: 'rgba(69,126,247,.2)',
  85. shadowOffsetY: 4
  86. },
  87. areaStyle: {
  88. color: {
  89. type: 'linear',
  90. x: 0,
  91. y: 0,
  92. x2: 0,
  93. y2: 1,
  94. colorStops: [{
  95. offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色
  96. }, {
  97. offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色
  98. }]
  99. }
  100. },
  101. smooth: true,
  102. data: [20, 56, 17, 40, 68, 42]
  103. },{
  104. name: '1',
  105. type: 'line',
  106. showSymbol: false,
  107. smoothMonotone: 'x',
  108. lineStyle: {
  109. width: 3,
  110. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  111. offset: 0,
  112. color: 'rgba(255,84,108)'
  113. }, {
  114. offset: 1,
  115. color: 'rgba(252,140,118)'
  116. }], false),
  117. shadowBlur: 4,
  118. shadowColor: 'rgba(253,121,128,.2)',
  119. shadowOffsetY: 4
  120. },
  121. areaStyle: {
  122. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  123. offset: 0,
  124. color: 'rgba(255,84,108,.15)'
  125. }, {
  126. offset: 1,
  127. color: 'rgba(252,140,118,0)'
  128. }], false),
  129. },
  130. smooth: true,
  131. data: [20, 71, 8, 50, 57, 32]
  132. }
  133. ]
  134. };
  135. line1.setOption(option);
  136. window.onresize = function() {
  137. line1.resize();
  138. }
  139. })