TemChart.vue 9.9 KB

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