TemChart.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <div
  3. class="temChart"
  4. :class="[
  5. screenType === 'hor'
  6. ? 'horizontalClass'
  7. : 'verticalClass verticalTemChart',
  8. ]"
  9. >
  10. <div class="head-title">
  11. <span>实时温度</span>
  12. <div class="rightVal">
  13. 室外温度<span>{{ temperature }}</span
  14. >℃
  15. </div>
  16. </div>
  17. <div id="tempChartBox" class="tempChartBox" ref="tempChartBox"></div>
  18. </div>
  19. </template>
  20. <script>
  21. import G2 from "@antv/g2";
  22. import { mapState, mapActions } from "vuex";
  23. import moment from "moment";
  24. export default {
  25. name: "TemChart",
  26. props: {
  27. screenType: {
  28. type: String,
  29. default: () => {
  30. return "ver";
  31. }, //hor 横屏 vert 竖屏
  32. },
  33. },
  34. created() {},
  35. mounted() {
  36. //console.log("temchart--mounted");
  37. this.getRealTimeTemp().then((res) => {
  38. //debugger;
  39. var cdata = res.data.data || [];
  40. cdata.forEach((element) => {
  41. var timestr = element.time;
  42. var hour = timestr.substr(8, 2);
  43. var minute = timestr.substr(10, 2);
  44. element.time = hour + ":" + minute;
  45. });
  46. this.cInitChart(cdata);
  47. //this.getWeahter();
  48. });
  49. },
  50. data() {
  51. return {};
  52. },
  53. computed: {
  54. ...mapState({
  55. temperature: (state) => {
  56. var weatherCont = state.weatherCont;
  57. return weatherCont.temperature;
  58. },
  59. }),
  60. },
  61. methods: {
  62. ...mapActions(["getRealTimeTemp"]),
  63. cInitChart(cdata) {
  64. // var data = [
  65. // { time: "8", type: "温度", temp: 23.5 },
  66. // { time: "9", type: "温度", temp: 26.5 },
  67. // { time: "10", type: "温度", temp: 29.5 },
  68. // { time: "11", type: "温度", temp: 30.5 },
  69. // { time: "12", type: "温度", temp: 26.5 },
  70. // { time: "13", type: "温度", temp: 29.5 },
  71. // { time: "14", type: "温度", temp: 30.5 },
  72. // { time: "15", type: "温度", temp: 33.5 },
  73. // { time: "16", type: "温度", temp: 34.5 },
  74. // { time: "17", type: "温度", temp: 30.5 },
  75. // ];
  76. //var width = this.$refs.tempChartBox.clientWidth;
  77. //debugger;
  78. var width =
  79. this.screenType === "hor"
  80. ? document.getElementsByTagName("body")[0].offsetWidth - 874
  81. : document.getElementsByTagName("body")[0].offsetWidth - 80;
  82. var chart = new G2.Chart({
  83. container: "tempChartBox",
  84. // forceFit: true,
  85. width: width,
  86. height: 330,
  87. padding: [50, 50, 46, 60],
  88. });
  89. chart.source(cdata);
  90. chart.scale("time", {
  91. //range: [0, 1],
  92. //tickCount: 2,
  93. //tickInterval
  94. // type: 'timeCat'
  95. });
  96. chart.scale("temp", {
  97. //range: [0, 1],
  98. tickCount: 5,
  99. minTickInterval: 2,
  100. //ticks:[20,24,28,32]
  101. //tickInterval
  102. // type: 'timeCat'
  103. });
  104. chart.axis("time", {
  105. line: {
  106. lineWidth: 1, // 设置线的宽度
  107. stroke: "rgba(155, 152, 173,0.4)", // 设置线的颜色
  108. lineDash: [3, 3], // 设置虚线样式
  109. },
  110. label: {
  111. textStyle: {
  112. fill: "#9B98AD",
  113. fontSize: 12,
  114. },
  115. },
  116. tickLine: null,
  117. });
  118. chart.axis("temp", {
  119. tickLine: null,
  120. label: {
  121. textStyle: {
  122. fill: "#9B98AD",
  123. fontSize: 12,
  124. },
  125. // formatter: function formatter(text) {
  126. // return text;
  127. // }
  128. },
  129. });
  130. // chart.tooltip({
  131. // crosshairs: "y",
  132. // });
  133. chart.legend(false);
  134. //view1
  135. // var view1 = chart.view();
  136. // view1.source(dv2);
  137. // view1.axis(false);
  138. // view1.area().position('time*temp').color('#8d8d8d').opacity(0.1).tooltip(false);
  139. //view1
  140. //var view1 = chart.view();
  141. chart
  142. .line()
  143. .position("time*temp")
  144. .color("#23CCF9")
  145. .opacity(1)
  146. .shape("smooth")
  147. .style({
  148. lineWidth: 3,
  149. });
  150. chart
  151. .point()
  152. .position("time*temp")
  153. .color("#23CCF9")
  154. .opacity(1)
  155. .shape("circle")
  156. .style("time", {
  157. lineWidth: 2,
  158. stroke: "#ffffff",
  159. shadowColor: "#23CCF9",
  160. shadowBlur: (val) => {
  161. var nowtime = moment();
  162. var timestr = nowtime.format("HH") + ":00";
  163. if (val && val == timestr) {
  164. return 3;
  165. } else {
  166. return 0;
  167. }
  168. },
  169. shadowOffsetX: 0,
  170. shadowOffsetY: 0,
  171. });
  172. chart
  173. .area()
  174. .position("time*temp")
  175. .color("l(90) 0:#23CCF9 1:#ffffff")
  176. .opacity(0.2)
  177. .tooltip(false)
  178. .shape("smooth");
  179. var lastpoint = cdata[cdata.length - 1];
  180. const tooltipHtml = `<div style='line-height:22px;color:#fff;background: rgba(35,204,249,0.7);padding:10px 12px;border-radius:5px;'>
  181. <div style='font-size:13px;font-weight:400;'>${
  182. lastpoint.time
  183. }</div>
  184. <div style='font-size:12px;font-weight:600;'>室内温度:${lastpoint.temp.toFixed(
  185. 1
  186. )}℃</div></div>`;
  187. chart.guide().html({
  188. position: lastpoint,
  189. html: tooltipHtml,
  190. alignX: "right",
  191. alignY: "bottom",
  192. offsetX: 60,
  193. offsetY: -5,
  194. });
  195. chart.guide().text({
  196. top: false,
  197. limitInPlot: true,
  198. position: ["max", "min"], // 文本的起始位置,值为原始数据值,支持 callback
  199. content: "时间/时分", // 显示的文本内容
  200. style: {
  201. fill: "#9590AD", // 文本颜色
  202. fontSize: "12", // 文本大小
  203. // fontWeight: 'bold' // 文本粗细
  204. // rotate: Math.PI / 4 // 文本旋转,以弧度为单位
  205. }, // 文本的图形样式属性
  206. offsetX: 20, // x 方向的偏移量
  207. offsetY: 16, // y 方向偏移量
  208. });
  209. chart.guide().text({
  210. // position: ['min', 'max'], // 文本的起始位置,值为原始数据值,支持 callback
  211. position: function(xScale, yScale) {
  212. //console.log("position", xScale, yScale);
  213. return ["0%", "0%"];
  214. },
  215. content: "温度/℃", // 显示的文本内容
  216. style: {
  217. fill: "#9590AD", // 文本颜色
  218. fontSize: "12", // 文本大小
  219. // fontWeight: 'bold' // 文本粗细
  220. // rotate: Math.PI / 4 // 文本旋转,以弧度为单位
  221. }, // 文本的图形样式属性
  222. offsetX: -40, // x 方向的偏移量
  223. offsetY: -24, // y 方向偏移量
  224. });
  225. chart.render();
  226. return chart;
  227. },
  228. },
  229. };
  230. </script>
  231. <style lang="less" scoped>
  232. .horizontalClass {
  233. // width:1036px;
  234. height: 388px;
  235. }
  236. .temChart {
  237. padding: 24px 0 0 !important;
  238. .head-title {
  239. justify-content: space-between;
  240. padding: 0 32px;
  241. .rightVal {
  242. color: #39354e;
  243. font-size: 14px;
  244. font-weight: normal;
  245. }
  246. }
  247. .tempChartBox {
  248. width: 100%;
  249. height: 330px;
  250. }
  251. }
  252. </style>