TemChart.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <div
  3. class="temChart"
  4. :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalTemChart' ]"
  5. >
  6. <div class="head-title">
  7. <span>实时温度</span>
  8. <div class="rightVal">
  9. 室外温度<span>28</span>℃
  10. </div>
  11. </div>
  12. <div
  13. id="tempChartBox"
  14. class="tempChartBox"
  15. ></div>
  16. </div>
  17. </template>
  18. <script>
  19. import G2 from '@antv/g2';
  20. import {mapActions} from "vuex"
  21. export default {
  22. name: "TemChart",
  23. props: {
  24. screenType: {
  25. type: String,
  26. default: () => { return 'ver' } //hor 横屏 vert 竖屏
  27. }
  28. },
  29. created() {
  30. console.log("created");
  31. },
  32. mounted() {
  33. console.log("mounted");
  34. //this.getRealTimeTemp();
  35. this.cInitChart();
  36. },
  37. data() {
  38. return {
  39. }
  40. },
  41. methods: {
  42. ...mapActions(['getRealTimeTemp']),
  43. cInitChart() {
  44. var data = [
  45. { time: '8', type: '温度', temp: 23.5 },
  46. { time: '9', type: '温度', temp: 26.5 },
  47. { time: '10', type: '温度', temp: 29.5 },
  48. { time: '11', type: '温度', temp: 30.5 },
  49. { time: '12', type: '温度', temp: 26.5 },
  50. { time: '13', type: '温度', temp: 29.5 },
  51. { time: '14', type: '温度', temp: 30.5 },
  52. { time: '15', type: '温度', temp: 33.5 },
  53. { time: '16', type: '温度', temp: 34.5 },
  54. { time: '17', type: '温度', temp: 30.5 },
  55. ];
  56. var chart = new G2.Chart({
  57. container: 'tempChartBox',
  58. forceFit: true,
  59. height: 330,
  60. padding: [50, 40, 46, 60],
  61. });
  62. chart.source(data);
  63. chart.scale('time', {
  64. //range: [0, 1],
  65. //tickCount: 2,
  66. //tickInterval
  67. // type: 'timeCat'
  68. });
  69. chart.scale('temp', {
  70. //range: [0, 1],
  71. tickCount: 5,
  72. minTickInterval:2,
  73. //ticks:[20,24,28,32]
  74. //tickInterval
  75. // type: 'timeCat'
  76. });
  77. chart.axis('time', {
  78. line: {
  79. lineWidth: 1, // 设置线的宽度
  80. stroke: 'rgba(155, 152, 173,0.4)', // 设置线的颜色
  81. lineDash: [3, 3] // 设置虚线样式
  82. },
  83. label: {
  84. textStyle: {
  85. fill: '#9B98AD',
  86. fontSize: 12,
  87. }
  88. },
  89. tickLine: null
  90. });
  91. chart.axis('temp', {
  92. tickLine: null,
  93. label: {
  94. textStyle: {
  95. fill: '#9B98AD',
  96. fontSize: 12,
  97. },
  98. // formatter: function formatter(text) {
  99. // return text;
  100. // }
  101. }
  102. });
  103. chart.tooltip({
  104. crosshairs: 'y'
  105. });
  106. chart.legend(false);
  107. //view1
  108. // var view1 = chart.view();
  109. // view1.source(dv2);
  110. // view1.axis(false);
  111. // view1.area().position('time*temp').color('#8d8d8d').opacity(0.1).tooltip(false);
  112. //view1
  113. //var view1 = chart.view();
  114. chart.line().position('time*temp').color('#23CCF9').opacity(1).shape('smooth').style({
  115. lineWidth: 3,
  116. });
  117. chart.point().position('time*temp').color('#23CCF9').opacity(1).shape('circle').style({
  118. lineWidth: 1,
  119. stroke: '#ffffff',
  120. });
  121. chart.area().position('time*temp').color('l(90) 0:#23CCF9 1:#ffffff').opacity(0.2).tooltip(false).shape('smooth');
  122. chart.guide().text({
  123. top: false,
  124. limitInPlot: true,
  125. position: ['max', 'min'], // 文本的起始位置,值为原始数据值,支持 callback
  126. content: '时间/时分', // 显示的文本内容
  127. style: {
  128. fill: '#9590AD', // 文本颜色
  129. fontSize: '12' // 文本大小
  130. // fontWeight: 'bold' // 文本粗细
  131. // rotate: Math.PI / 4 // 文本旋转,以弧度为单位
  132. }, // 文本的图形样式属性
  133. offsetX: 16, // x 方向的偏移量
  134. offsetY: 16 // y 方向偏移量
  135. });
  136. chart.guide().text({
  137. // position: ['min', 'max'], // 文本的起始位置,值为原始数据值,支持 callback
  138. position: function (xScale, yScale) {
  139. console.log('position', xScale, yScale);
  140. return ['0%', '0%'];
  141. },
  142. content: '温度/℃', // 显示的文本内容
  143. style: {
  144. fill: '#9590AD', // 文本颜色
  145. fontSize: '12' // 文本大小
  146. // fontWeight: 'bold' // 文本粗细
  147. // rotate: Math.PI / 4 // 文本旋转,以弧度为单位
  148. }, // 文本的图形样式属性
  149. offsetX: -40, // x 方向的偏移量
  150. offsetY: -24// y 方向偏移量
  151. });
  152. chart.render();
  153. return chart;
  154. }
  155. }
  156. }
  157. </script>
  158. <style lang="less" scoped>
  159. .horizontalClass{
  160. // width:1036px;
  161. height: 388px;
  162. }
  163. .temChart {
  164. padding: 24px 0 0!important;
  165. .head-title {
  166. justify-content: space-between;
  167. padding:0 32px;
  168. .rightVal {
  169. color: #39354e;
  170. font-size: 14px;
  171. font-weight: normal;
  172. }
  173. }
  174. .tempChartBox {
  175. width: 100%;
  176. height: 330px;
  177. }
  178. }
  179. </style>