animationBox.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div class="an-content">
  3. <div class="an-box">
  4. <div class="an-box-1">
  5. <span class="span2">数据传输情况</span>
  6. <el-tag
  7. v-for="item in items"
  8. :key="item.label"
  9. :type="item.type"
  10. closable
  11. effect="dark">
  12. {{ item.label }}
  13. </el-tag>
  14. </div>
  15. <div class="an-box-1">
  16. <span class="span2">实际冷量</span> 2800kw <span class="span1"><span class="span2">未来1小时预测冷量 </span>3400 kw</span>
  17. </div>
  18. </div>
  19. <div class="an-center">
  20. <bom-box></bom-box>
  21. </div>
  22. <div class="an-bottom">
  23. <div id="leftLine" style="width:574px;height:350px;margin-right:;24px;">
  24. </div>
  25. <div id="rightLine" style="width:573px;height:350px;"></div>
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. import echarts from 'echarts'
  31. import bomBox from './bomBox'
  32. export default {
  33. data(){
  34. return{
  35. items: [
  36. { type: 'success', label: '能耗' },
  37. { type: 'success', label: '环境' },
  38. { type: 'danger', label: 'BA' },
  39. ]
  40. }
  41. },
  42. components:{bomBox},
  43. methods:{
  44. drawLeft(){
  45. var leftLine = echarts.init(document.getElementById('leftLine'))
  46. let option = {
  47. tooltip: {
  48. trigger: 'axis'
  49. },
  50. legend: {
  51. data: ['室外温度', '室内平均温度', '室内最高温度']
  52. },
  53. grid: {
  54. left: '3%',
  55. right: '4%',
  56. bottom: '3%',
  57. containLabel: true
  58. },
  59. xAxis: {
  60. type: 'category',
  61. boundaryGap: false,
  62. data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
  63. },
  64. yAxis: {
  65. type: 'value'
  66. },
  67. series: [
  68. {
  69. name: '室外温度',
  70. type: 'line',
  71. stack: '总量',
  72. data: [120, 132, 101, 134, 90, 230, 210,112,150,]
  73. },
  74. {
  75. name: '室内平均温度',
  76. type: 'line',
  77. stack: '总量',
  78. data: [220, 182, 191, 234, 290, 330, 310,220,280]
  79. },
  80. {
  81. name: '室内最高温度',
  82. type: 'line',
  83. stack: '总量',
  84. data: [150, 232, 201, 154, 190, 330, 410,300,340]
  85. },
  86. ]
  87. };
  88. leftLine.setOption(option)
  89. },
  90. drawRight(){
  91. var rightLine = echarts.init(document.getElementById('rightLine'))
  92. rightLine.setOption({
  93. tooltip: {
  94. trigger: 'axis',
  95. axisPointer: {
  96. type: 'cross',
  97. animation: false,
  98. label: {
  99. backgroundColor: '#ccc',
  100. borderColor: '#aaa',
  101. borderWidth: 1,
  102. shadowBlur: 0,
  103. shadowOffsetX: 0,
  104. shadowOffsetY: 0,
  105. color: '#222'
  106. }
  107. },
  108. formatter: function (params) {
  109. return params[2].name + '<br />' + params[2].value;
  110. }
  111. },
  112. grid: {
  113. left: '3%',
  114. right: '4%',
  115. bottom: '3%',
  116. containLabel: true
  117. },
  118. xAxis: {
  119. type: 'category',
  120. data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
  121. },
  122. yAxis: {
  123. splitNumber: 3,
  124. splitLine: {
  125. show: false
  126. }
  127. },
  128. series: [{
  129. name: 'L',
  130. type: 'line',
  131. data: [20,30,40,50,60,50,40,30,20],
  132. lineStyle: {
  133. opacity: 0
  134. },
  135. stack: 'confidence-band',
  136. symbol: 'none'
  137. }, {
  138. name: 'U',
  139. type: 'line',
  140. data: [20,30,50,60,50,40,30,20,40],
  141. lineStyle: {
  142. opacity: 0
  143. },
  144. areaStyle: {
  145. color: '#ccc'
  146. },
  147. stack: 'confidence-band',
  148. symbol: 'none'
  149. }, {
  150. type: 'line',
  151. data: [20,30,40,50,60,40,30,20,50],
  152. hoverAnimation: false,
  153. symbolSize: 6,
  154. itemStyle: {
  155. color: '#c23531'
  156. },
  157. showSymbol: false
  158. }]
  159. });
  160. },
  161. },
  162. mounted(){
  163. this.drawLeft()
  164. this.drawRight()
  165. }
  166. }
  167. </script>
  168. <style lang='scss' scoped>
  169. .an-content{
  170. .an-box{
  171. display:flex;
  172. justify-content:space-between;
  173. margin-top: 20px;
  174. .an-box-1{
  175. min-width:544px;
  176. border:1px dashed #ccc;
  177. padding-top: 30px;
  178. padding-left: 24px;
  179. padding-bottom:30px;
  180. background: #F8F9FA;
  181. margin-right: 12px;
  182. .span2{
  183. color: #646C73;
  184. margin-right: 10px;
  185. }
  186. .span1{
  187. margin-left:64px;
  188. }
  189. }
  190. }
  191. .an-center{
  192. display: none;
  193. }
  194. .an-bottom{
  195. margin-top: 45px;
  196. display: flex;
  197. }
  198. }
  199. </style>
  200. <style lang="scss" scoped>
  201. .an-content{
  202. .el-tag{
  203. margin-right: 10px;
  204. }
  205. }
  206. </style>