YuzhiCurve.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <template>
  2. <div class="yuzhi-curve-module">
  3. <common-title title="预制曲线"></common-title>
  4. <div class="visualization-common-border">
  5. <div ref="yuzhiCurve" class="h100"></div>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import * as echarts from "echarts"
  11. import commonTitle from '../components/commonTitle.vue'
  12. import { setMax } from "../components/common.js";
  13. export default {
  14. components: { commonTitle },
  15. name: '',
  16. props: {
  17. data: {
  18. type: Array,
  19. default: []
  20. }
  21. },
  22. data () {
  23. return {
  24. uEcharts: null,
  25. uOption: null,
  26. legendData: [
  27. { name: '辐射强度值', value: 9000 },
  28. { name: '温度实值', value: 50 },
  29. { name: '湿度实值', value: 60.3 },
  30. ],
  31. fusheData: [150, 230, 224, 218, 135, 147, 260],
  32. wenduData: [120, 132, 101, 134, 90, 230, 210],
  33. shiduData: [220, 182, 191, 234, 290, 330, 310],
  34. }
  35. },
  36. watch: {
  37. data: {
  38. handler(newValue, oldValue){
  39. console.log(newValue, oldValue)
  40. },
  41. immediate: true,
  42. deep: true
  43. }
  44. },
  45. created () {
  46. },
  47. mounted () {
  48. this.$nextTick(() => {
  49. this.initYuzhiCurve()
  50. })
  51. },
  52. methods: {
  53. initYuzhiCurve(){
  54. var _this = this
  55. var maxa = Math.max.apply(null, this.fusheData)
  56. var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
  57. this.uEcharts = echarts.init(this.$refs.yuzhiCurve);
  58. this.uOption = {
  59. color: ['#0102c8', '#cfa809', '#49e4e9'], // legend对应颜色
  60. grid: {
  61. // top: '70',
  62. left: '46',
  63. bottom: '40'
  64. },
  65. xAxis: {
  66. type: 'category',
  67. axisTick: { show: false }, // 横坐标刻度
  68. boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
  69. axisLine: { // 横坐标线样式
  70. lineStyle: {
  71. color: 'rgba(255,255,255,.1)',
  72. },
  73. },
  74. axisLabel: {
  75. textStyle: { // 坐标轴文字
  76. color: '#fff'
  77. }
  78. },
  79. data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
  80. },
  81. yAxis: [
  82. {
  83. type: 'value',
  84. axisLabel: { // 纵坐标样式
  85. textStyle: {
  86. color: '#fff',
  87. }
  88. },
  89. splitLine: { // 网格线
  90. show: true, // 是否显示
  91. lineStyle: { // 网格线样式
  92. color: 'rgba(255,255,255,.1)', // 网格线颜色
  93. width: 1, //网格线的加粗程度
  94. // type: 'dashed' // 网格线类型 dashed:虚线
  95. }
  96. },
  97. name: '光照强度W/㎡', // 刻度
  98. nameTextStyle: {
  99. color: '#fff',
  100. padding: [0, 0, 0, 20],
  101. },
  102. min: 0,
  103. max: setMax(maxa),
  104. interval: setMax(maxa) / 5,
  105. },
  106. {
  107. type: 'value',
  108. axisLabel: { // 纵坐标样式
  109. textStyle: {
  110. color: '#fff',
  111. }
  112. },
  113. splitLine: { // 网格线
  114. show: true, // 是否显示
  115. lineStyle: { // 网格线样式
  116. color: 'rgba(255,255,255,.1)', // 网格线颜色
  117. width: 1, //网格线的加粗程度
  118. // type: 'dashed' // 网格线类型 dashed:虚线
  119. }
  120. },
  121. name: '温湿度值/℃/%', // 刻度
  122. nameTextStyle: {
  123. color: '#fff',
  124. // padding: [0, 0, 0, 20],
  125. },
  126. min: 0,
  127. max: setMax(maxb),
  128. interval: setMax(maxb) / 5,
  129. },
  130. ],
  131. legend: {
  132. icon: "roundRect", // 样式改为方形rect,改为圆角方形roundRect
  133. itemWidth: 14, // 宽度
  134. itemHeight: 6, // 高度
  135. textStyle: {
  136. color: '#fff',
  137. fontSize: 11
  138. },
  139. top: '15',
  140. // 使用回调函数
  141. formatter: function (name) {
  142. console.log(name)
  143. var currentObj = _this.legendData.find(item => item.name === name)
  144. return name + ':' + currentObj.value;
  145. },
  146. data: _this.legendData.map(item => item.name),
  147. },
  148. series: [
  149. {
  150. name: '辐射强度值',
  151. type: 'line',
  152. // symbol: 'circle',
  153. // symbolSize: 2,
  154. showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
  155. // itemStyle: { // symbol样式
  156. // normal: {
  157. // color: 'rgb(255, 255, 255)',
  158. // borderColor: 'rgba(255, 255, 255, 0.2)', // symbol边框颜色
  159. // borderWidth: 12 // symbol边框宽度
  160. // }
  161. // },
  162. lineStyle: { // 线条样式
  163. normal: {
  164. width: 2,
  165. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
  166. {
  167. offset: 0,
  168. color: 'rgb(1, 2, 200, 0)'
  169. },
  170. {
  171. offset: 0.5,
  172. color: 'rgb(1, 2, 200)'
  173. },
  174. {
  175. offset: 1,
  176. color: 'rgb(1, 2, 200, 0)'
  177. }
  178. ])
  179. }
  180. },
  181. data: _this.fusheData,
  182. },
  183. {
  184. name: '温度实值',
  185. type: 'line',
  186. yAxisIndex: 1, // 关联第几个y轴
  187. showSymbol: false,
  188. lineStyle: { // 线条样式
  189. normal: {
  190. width: 2,
  191. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
  192. {
  193. offset: 0,
  194. color: 'rgb(207, 168, 9, 0)'
  195. },
  196. {
  197. offset: 0.5,
  198. color: 'rgb(207, 168, 9)'
  199. },
  200. {
  201. offset: 1,
  202. color: 'rgb(207, 168, 9, 0)'
  203. }
  204. ])
  205. }
  206. },
  207. data: _this.wenduData,
  208. },
  209. {
  210. name: '湿度实值',
  211. type: 'line',
  212. yAxisIndex: 1, // 关联第几个y轴
  213. showSymbol: false,
  214. lineStyle: { // 线条样式
  215. normal: {
  216. width: 2,
  217. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
  218. {
  219. offset: 0,
  220. color: 'rgb(73, 228, 233, 0)'
  221. },
  222. {
  223. offset: 0.5,
  224. color: 'rgb(73, 228, 233)'
  225. },
  226. {
  227. offset: 1,
  228. color: 'rgb(73, 228, 233, 0)'
  229. }
  230. ])
  231. }
  232. },
  233. data: _this.shiduData,
  234. }
  235. ]
  236. };
  237. this.uOption && this.uEcharts.setOption(this.uOption)
  238. window.addEventListener("resize", ()=>{
  239. this.uEcharts.resize();
  240. });
  241. },
  242. // // 取最大值
  243. // setMax(num) {
  244. // // 1.判断是否小数: //判断是否含有小数点:要检索的字符串值没有出现,则该方法返回 -1。
  245. // if (num.toString().indexOf(".") != -1) {//有小数点
  246. // num = Math.ceil(num);//向上取整
  247. // }
  248. // // 2.向上取整数倍
  249. // if (num.toString().length < 2) {
  250. // // 一位数1
  251. // num = 10;
  252. // } else if (num.toString().length < 3) {
  253. // // 2位数
  254. // num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
  255. // } else {
  256. // // 位数--先判断是不是1000...的倍数
  257. // var t = '';
  258. // for (let i = 0; i < num.toString().length - 1; i++) {
  259. // t += '0';//'0000...'
  260. // }
  261. // if ((num % Number(1 + t)) != 0) {//不是100的倍数
  262. // num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
  263. // }
  264. // }
  265. // return num
  266. // }
  267. }
  268. }
  269. </script>
  270. <style scoped>
  271. @import '~@/assets/less/uStyle.less';
  272. </style>
  273. <style lang="less">
  274. .yuzhi-curve-module{
  275. width: 100%;
  276. height: 100%;
  277. }
  278. </style>